echarts4实现折线图、树状图、动态数据分离刷新数据

代码实例：

 var monthByCorp3Chart;

 var monthByCorp3Option={};

  $(function() {
     monthByCorp3Chart = echarts.init(document.getElementById('monthByCorp3'));
     });

function drawByCorp3(){
    monthByCorp3Option = {
        backgroundColor: '#0B0B0D',//����ɫ
        title: {
            text: '',
            top:'3%'
        },
        grid: {
            bottom: '10px',
            left: '10px',
            containLabel: true
        },
        tooltip : {         
            trigger: 'item',
            showDelay: 0,
            hideDelay: 50,
            transitionDuration:0,
            backgroundColor : 'rgba(72,84,101,0.9)',
            position : function(p) {
                return [p[0]-40, p[1] - 65];
            },
            extraCssText:'width:80px;height:50px', //��Ϣ���С
            // �����ı���ʽ
            textStyle : {
                color: '#FFFFFF',
                decoration: 'c',
                fontFamily: 'Verdana, sans-serif',
                //fontStyle: 'italic',
                align:'center',
                fontWeight: 'bold'
            },
            formatter: "<div><span style='font-size:12px;width:80px;height50px'>{b}</span></br><span style='font-size:18px;width:80px;height50px'>{c}kW/h</span></div>",
            axisPointer:{
                type: 'none',
            }   
        },
        legend: {
            data:[],
            orient: 'vertical',
            textStyle:{
                fontSize: 14
            }
        },
        calculable : true,
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [],
            axisLine:{
                show: false,
            },
            axisTick:{
                lineStyle:{
                    color: '#A9ED3A',
                }
            },
            axisLabel: {  
                interval:0,  
                formatter:function(value){  
                   return "";  
               }
            }
        },
        yAxis: {
            type: 'value',
            show: false, // ����Y���Ƿ���ʾ
        },
        series: []
    };
    
}

function loadDataByCorp3(cueName,seriesData,xAxisData){    
     monthByCorp3Option.legend.data = cueName;
     monthByCorp3Option.xAxis.data = xAxisData;
     monthByCorp3Option.series = {
            name:cueName,
            data:seriesData,
            type:"bar",
            symbolSize: 5,
            itemStyle : {  
                normal : {  
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{  
                        offset: 0,  
                        color: '#FFA000'  
                    }, {  
                        offset: 1,  
                        color: '#2DF0DB'  
                    }]),//��������ɫ
                    lineStyle:{
                        color:'#000000',  // �ߵ���ɫ
                    }
                },                
            },
     };
     monthByCorp3Chart.setOption(monthByCorp3Option);

}

详情结果请下载源码https://download.csdn.net/download/liqi_q/10451083