echarts根据数据动态生成不同条数的折线图

一、功能需求背景

1、后台可自定义折线图的折线名称、数据、数量（几条）
2、满足不同折线图之间随意切换
3、折线图可鼠标拖动缩放和滚动条收缩查看
4、同一页面涉及多个echarts

二、功能涉及echarts相关文档知识点

1.异步数据的加载
2.区域缩放组件的使用
3.数据更新处理

三、效果图

四、代码

1、初始化调用

// 后端返回数据处理后直接调用封装过的函数echarts_1(database1);echarts_2(database2);

2、简单封装单个echarts 初始化

// 定义线条颜色const colors=['#91cc75','#5470c6','#ee6666','#7a22ef','#3bbcd9']// 折线图1functionecharts_1(data){let[data1,data2,data3]=[data[0],data[1],data[3]];// 定义三组折线数据var dom= document.getElementById("echart1");var myChart1= echarts.init(dom);var option={                     dataZoom:[// 缩放和进度组件{                             type:'slider',                             show:true,                             xAxisIndex:[0],                             start:0,                             end:100,                             filterMode:'filter'},{                             type:'inside',                             start:0,                             end:100},],                     tooltip:{                         trigger:'axis',},                     grid:{                         left:'5%',                         right:'5%',                         bottom:'15%',},                     xAxis:{                         type:'category',                         boundaryGap:false,                         data:[]},                     yAxis:{                         type:'value'},                     series:[]};if(option&&typeof option==='object'){                  myChart1.setOption(option,true);}showChart(data1,myChart1,option);// 初始渲染// 折线图切换渲染$('.database1 .tags li').on('click',function(){let index=$(this).index()+1;$(this).addClass('check').siblings().removeClass('check');let targetdata=eval('data'+index);showChart(targetdata,myChart1,option);})}

2.根据后端数据封装series

/*              * 设置折线样式及名称             * set_series              * @param {Object} data 折线数据             * @return {arr} 返回配置项             */functionset_series(data){var series=[];var series_data= data.series;                 series_data.forEach((e,index)=>{var item={                         name:e.name,                         data:e.data,                         type:'line',                         itemStyle:{                               normal:{                                   color:colors[index],//圈圈的颜色                                 lineStyle:{                                       color:colors[index]//线的颜色}}},}                     series.push(item);})return series}

3.数据渲染

/*              * 折线数据渲染             * @showChart()             * @param {Object} data 折线数据             * @param {Object} myChart echars实例对象             * @param {Object} option  echarts 配置项             */functionshowChart(data,myChart,option){let new_legend=[];// 获取折线类别数量if(data){let new_series=set_series(data)                      data.series.forEach(e=>{                         new_legend.push(e.name);})                      myChart.setOption(option,true)// 清除上次数据                     myChart.setOption({                         xAxis:{                             data: data.categories},                          legend:{                             data: new_legend},                         series: new_series});}}

五、数据渲染问题和遇到的坑

折线图切换时，默认会存在option 合并问题见文档，即便按照文档myChart.setOption(option,true);设置后仍存在历史数据遗留问题，例如图表1是3条折线，图表2是2条折线，图1切换到图2会出现3条折线，多出的一条则是图1的第三条线数据。
目前解决办法
在下一次更新数据前执行一次空的数据更新
myChart.setOption(option,true)
执行后再有数据的option更新myChart.setOption(option)
开发记录，仅做参考。若有更为正确的方法还请指教 (^- -^)