echarts折线图联动的坑

再2018年下半年开始做前端，总结一下半年来再echarts图表联动的时候遇到的一些坑。

在工作初期echarts的xAxis的type属性设置为value，此时两个表联动为A图的第一个点和B图的第一个点联动，A图第二个点和B图第二个点联动，以此类推。没什么大问题。后续将xAxis的type属性设置为time，此时需要更改的地方有xAxis的data不需要设置，直接再series的data属性设置为   时间+数值的数组的数组级[ [time1,value1],[time2,value2],[time3,value3]......]。这个算是echarts一个转化，下面进入主题。

• 有图例的图点击取消掉某个图例之后tooltip联动不起来
• 特殊类型的图，tooltip联动问题（由上面bug修复后发现）
• 图例至少存在一个
• 多个图的图例同时点击，图例可能初始化，（由加入了点击图例重新计算左边轴的单位和显示）

有图例的图点击取消掉某个图例之后tooltip联动不起来

环境：折现图图A有1，2两条线，有图例，折线图图B有一条线。图标联动正常

现象：取消掉折线图图A的图例1显示，只留下2一条线。此时图A和图B两条线联动不起来

原因：再经过大量反复的操作定位bug之后发现echatrs的联动只是对应线的联动，例如图A的第一条线之和图B的第一条线联动，如果图A由两条线点击图例取消显示第一条线留下第二条线时，此时图A和图B的tooltip联动时联动不起来的。

解决办法：全局总览联动图最多有几条线。然后在线少的折线图里补充上辅助联动的空线。

{

    type: 'line',

    name: '辅助线1',

    symbol: 'none',

    lineStyle: {

        normal: {

            opacity: 0

        }

    },

    data: data

}

 特殊类型的图，tooltip联动问题（由上面bug修复后发现）

环境：折现图图A有1，2，3三条线，有图例，折线图图B为双y轴一条x轴的双图图表，图表1两条线，第二条是辅助线，图表2一条线，没有图例。图标联动正常

现象：取消掉折线图图A的图例1，3显示，只留下2一条线。鼠标移动到图A上此时图A和图B两条线tooltip联动不起来

原因：解决这个问题的时候非常头疼，原因没有定位到，以为在上面的bug定位定错了。然而一个偶然下，将折线图图B的表1又加了一条辅助线，上面的现象正常了，但是鼠标移动到图B上的表2上tooltip联动不起来。然后又在折现图图A上加了一条辅助线，联动正常

解决办法：特殊的图特殊处理，在图A上加了一条辅助线，在图B的图标1上加了一共两条辅助线

图例至少存在一个

环境：折现图图A有1，2，3三条线，有图例。

现象：取消掉折线图图A的图例1，3显示，只留下2一条线。继续取消3，可以取消。

原因：默认可以取消需要echarts的点击图例回调函数里判断一下

解决办法：回调函数中加入下面代码

myChart.on('legendselectchanged', function (params) {
        let option = this.getOption();
        let maxValue = 0;
        if (option.legend && option.legend.length > 0) {
            let select_value = Object.values(params.selected);
            var n = 0;
            select_value.map(res => {
                if (!res) {
                    n++;
                }
            });
            if (n == select_value.length) {
                option.legend[0].selected[params.name] = true;
            }
            this.setOption(option)
        }
    });

多个图的图例同时点击，图例可能初始化，（由修复上一个bug引起）

环境：使用的React框架。折现图图A有1，2，3三条线，有图例，折现图图B有1，2，3三条线，有图例。图例初始化的时候没有将图例状态存在state里

现象：取消掉折线图图A的图例1，3显示，只留下2一条线。继续取消折现图图B的1，3折现，折线图图例重置都显示出来。

原因：折线图图例的状态没有放在redux里，

解决办法：折线图图例的状态放在redux里