动态加载echarts数据，防止动态加载后数据叠加

Posted 2020-10-03 王家小西

最近百度echarts用的不要不要的，刚开始legend数据总还是固定的，现在连legend都要自己赋值，难过！

  c.canaloption = {

        title: {
            text: ‘‘,

        },
        tooltip: {
            trigger: ‘axis‘,
            axisPointer: {
                type: ‘cross‘,
                label: {
                    backgroundColor: ‘#283b56‘
                }
            }
        },
        legend: {
            data: []
        },
        grid: {
            left: ‘3%‘,
            right: ‘4%‘,
            bottom: ‘15%‘,
            containLabel: true
        },
        toolbox: {
            show: true,
            feature: {
                dataView: { readOnly: false },
                restore: {},
                saveAsImage: { show: true }
            }, right: 20
        },
        dataZoom: {
            show: false,
            start: 0,
            end: 100
        },
        xAxis: [
            {
                type: ‘category‘,
                name: ‘名字‘,
                data: [],
                axisLabel: {
                    interval: 0,
                    rotate: 30
                },
            },
            {
                type: ‘category‘,
                axisTick: {
                    alignWithLabel: true
                },
                data: [],
                show: false
            }
        ],
        yAxis: [

            {
                type: ‘value‘,
                name:‘x名字‘,
                nameTextStyle: {
                    color: ‘#7cb5ec‘
                },
                min: 0,
                boundaryGap: [0.2, 0.2],
                axisLabel: {
                    formatter: ‘{value}‘,
                    //textStyle: {
                    //    color: ‘#7cb5ec‘
                    //}
                },
                lineStyle: {
                    color: ‘#7cb5ec‘
                },

                // nameLocation: ‘middle‘//标题距离
                // 去除y轴上的刻度线
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },//去掉Y轴竖线
            },
        ],
        series: []
    };

 

 接下来就是存数据进去了，大体数据存储可以如下，自己逻辑太多，就只截取了片段

 

 

 var CanalSource = new Array();//声明一个数组
 CanalSource.push(rows[i].CanalSource);//将后台传来的数据存进去
//根据自己的需要对数据进行循环
 c.series.push({
            name: CanalSource[j],
            type: ‘line‘,
            data: count,
            label: {
                normal: {
                    show: true,
                    position: ‘top‘
                },
            }
        });
        


    //然后设置柱状图的数据
    c.canaloption.legend.data = CanalSource;
    c.canaloption.xAxis[0].data = day;//
    c.canaloption.xAxis[1].data = day;
    
    c.canaloption.series = [];
    c.canaloption.series = c.series;
//得到要放这个图表外的一个id，这里不要忘了引入百度echarts的文件
   c.canalchart = echarts.init(document.getElementById("canalchart"));
//这里的true如果不加会导致数据叠加，
    c.canalchart.setOption(c.canaloption,true);
   
    $(window).resize(c.canalchart.resize);