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

一、功能需求背景

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

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

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

三、效果图

四、代码

1.基础信息初始化

 			var colors=['#91cc75','#5470c6','#ee6666','#7a22ef','#3bbcd9']

            var dom = document.getElementById("echart1");
            var myChart = echarts.init(dom);
            var app = {};
            var option;
            option = {
              dataZoom:[
                    {
                        type:'slider',      // slider滑动条型数据区域缩放组件
                        show:true,
                        xAxisIndex:[0],
                        start:0,
                        end:100,
                        filterMode: 'filter'  
                    }, 
                    {
                        type: 'inside',    // 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') {
                myChart.setOption(option,true);
            }

2.根据后端数据封装series

            function set_series(data) {
                var se = [];     // 说明空series
                var se_data = data.series;
                se_data.forEach((e,index) => {
                    var item = {
                        name:e.name,
                        data:e.data,
                        type: 'line',
                        itemStyle : {  
                            normal : {  
                                color:colors[index],      //圈圈的颜色
                                lineStyle:{  
                                    color:colors[index]   //线的颜色
                                }  
                        }  
                        }, 
                    }
                    se.push(item);
                })

                return se
            }

3.数据渲染

         function showChart(data) {
                var new_legend = [];    // 获取折线分类数量

                if(data) {

                    var new_series = set_series(data)  // 获取最新series数据 
                    data.series.forEach(e => {
                        new_legend.push(e.name);
                    })

                    myChart.setOption(option,true)  // 清除series上次数据

                    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)
开发记录，仅做参考。若有更为正确的方法还请指教 (^- -^)