如何实现eharts两个图表的点击联动？

1. 背景

产品需求为点击柱形图中的每一项，重新渲染饼图，即联动。在联动时，柱形图的样式要区别于其他柱体，并且可取消联动恢复初始化的数据。

2. 现状

① Echarts.js目前已经提供了connect功能，只要图标的legend一样，那么就能实现联动。 下面两个链接是介绍Echarts connect的用法的。 blog.csdn.net/u014452812/… echarts.baidu.com/api.html#ec…

② 通过重新绘制，其他各种需求的实现基本都是重新绘制后面联动图表，

官方例子：echarts.baidu.com/examples/ed…

myChart.on('updateAxisPointer', function (event) {
    var xAxisInfo = event.axesInfo[0];
    if (xAxisInfo) {
        var dimension = xAxisInfo.value + 1;
        myChart.setOption({
            series: {
                id: 'pie',
                label: {
                    formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                },
                encode: {
                    value: dimension,
                    tooltip: dimension
                }
            }
        });
    }
});

下面链接是介绍这种用法的： www.jianshu.com/p/2ae846ac2…

3.我的需求

（1）点击触发chart2重新渲染

图一：

图二：

当用户点击左侧饼图时，对应右侧数据变化。

// 点击事件绑定如下：
myechart1.off('click');
myechart1.on('click', (param) => {
  console.log(param);
  this.getGraph(param.name); // 获取chart2数据，并重新渲染饼图
});

其中，param 数据如下图：

（2）点击触发chart2重新渲染，并可取消联动

初始化时图表展示情况：

点击之后效果图：

取消联动点击后恢复成图一。

重要代码片段如下：

this.myechart.off('click');
this.myechart.on('click', (param) => {
  if (!param.seriesName) return; // 若点击的不是柱体
  this.seriesIndex = param.seriesIndex; // 保存被点击柱体的seriesIndex
  this.dataIndex = param.dataIndex; // 保存被点击柱体的dataIndex
  this.first = false;
  this.chain = true;
  this.getPieData(param.value); // 重新获取指定城市旅游人群行为数据
});

被选中的bar有样式效果的变化，开始我使用了emphasis属性，但是在鼠标移出时选中效果也会消失，于是使用了data中的itemStyle属性（itemStyle官方示例），这里就需要重新渲染柱状图。

const legends = [
    {
      label: '北京',
      value: 'bj',
    },
    {
      label: '上海',
      value: 'sh',
    },
    {
      label: '西双版纳',
      value: 'xsbn',
    },
];
legends.forEach((item, index) => {
    const currdata = data.map((val, idx) => {
      let styles = {
        color: colors[index],
      };
      // 点击时保存的seriesIndex/dataIndex，在这里做判断
      if (!this.first && (this.seriesIndex === index && this.dataIndex === idx)) {
        styles = {
          color: colors[index],
          shadowColor: colors[index],
          shadowBlur: 20,
          borderColor: colors[index],
          borderWidth: 3,
        };
      }
      const obj = {
        value: val[item.label] ? val[item.label].total || 0 : 0,
        name: '',
        itemStyle: styles,
      };
      return obj;
    });
    series.push({
      name: item.label,
      type: 'bar',
      barWidth: 20,
      data: currdata,
    });
  });

哪里不对，欢迎大家指正~

描述不够详细，有问题可留言，及时补充~~