echart多y轴 切换标题时 永远只显示一个分割线

需求背景：

       有时候项目可能涉及多y轴  但如果此时 每个y轴都需要配置分割线，则显得很杂乱。因此能有一个y轴显示分割线，但如果不动态设置，可能会发生如下情况（没有分割线了） 用户体验很差。

解决代码如下：

<div class="statistic-chart" style="width: 100%; height: 100%" ref="chart"></div>

this.myChartIns = echarts.init(this.$refs.chart as any, '', { locale: 'ZH' });
this.myChartIns.on('legendselectchanged', (params: any) => {
        const trueSelectList: any[] = [];
        for (let item in params.selected) {
          if (params.selected[item]) {
            trueSelectList.push(item);
          }
        }
        let splitLineShowList: number[] = [];
        trueSelectList.forEach((item: any) => {
          const index = (this.options.series as any).filter((seriesItem: any) => {
            return seriesItem.name === item;
          })[0].yAxisIndex;
          if (splitLineShowList.indexOf(index) === -1) {
            splitLineShowList.push(index);
          }
        });
        splitLineShowList = sortBy(splitLineShowList);
        (this.options.yAxis as any).forEach((item: any, index: number) => {
          //等于排序后的第一个  则show true  其他为false
          item.splitLine.show = index === splitLineShowList[0];
        });
        this.myChartIns.setOption(this.options);
      });

以上代码可以直接复制。 

其中有一个sortBy函数，是自动升序排列，  来自lodash库

链接如下 Lodash 简介 | Lodash 中文文档 | Lodash 中文网

效果如下：

当隐藏第一个时 第二个y轴的分割线就显示出来了，后面的同理

 后续我还会在更新一些关于echart的小技巧，欢迎关注！