echarts饼图与柱状图联动

ECharts支持图表之间的联动，可以通过设置事件来实现饼图和柱状图的联动。

具体实现步骤如下：

1. 在ECharts中设置两个图表，一个是饼图，一个是柱状图。

2. 给饼图和柱状图分别绑定相应的事件。

3. 在事件回调函数中，获取当前图表选中的数据，并将其传递给另一个图表。

示例代码如下：

// 饼图配置
var pieOption = {
  ...
  // 添加事件
  series: [{
    type: 'pie',
    data: [...],
    // 点击事件
    emphasis: {
      itemStyle: {
        // 高亮效果
      }
    },
    // 饼图选中事件
    selectedMode: 'single',
    selected: {...}
  }],
  ...
};

// 柱状图配置
var barOption = {
  ...
  // 添加事件
  series: [{
    type: 'bar',
    data: [...],
    // 柱状图选中事件
    emphasis: {
      itemStyle: {
        // 高亮效果
      }
    }
  }],
  ...
};

// 饼图绑定选中事件
myChart1.on('pieselectchanged', function (params) {
  // 获取选中的数据
  var selectedData = params.selected;
  // 将选中的数据传递给柱状图
  myChart2.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,
    dataIndex: selectedData[0].dataIndex
  });
});

// 柱状图绑定选中事件
myChart2.on('highlight', function (params) {
  // 获取选中的数据
  var selectedData = params.highlighted;
  // 将选中的数据传递给饼图
  myChart1.dispatchAction({
    type: 'pieSelect',
    seriesIndex: 0,
    dataIndex: selectedData[0].dataIndex
  });
});

// 渲染图表
myChart1.setOption(pieOption);
myChart2.setOption(barOption);

需要注意的是，柱状图和饼图的数据要保持一致，否则无法实现联动效果。