Echarts 多选框操作饼图选中

Echarts 多选框操作饼图选中

《详细教程在这》
在 Echarts 中，要实现多选框操作饼图选中的功能，需要结合使用 Echarts 的数据过滤和事件机制。

首先，需要在饼图的 series 配置项中设置 data 属性，该属性用于定义饼图的数据。在每个数据项中，可以添加一个 selected 属性，用于控制该数据项是否被默认选中。例如，如果想要前两个饼图切片被默认选中，可以将前两个数据项的 selected 属性设置为 true。

option = {
  title: {
    text: '饼图示例'
  },
  tooltip: {},
  series: [
    {
      type: 'pie',
      data: [
        { name: '选项1', value: 10, selected: true },
        { name: '选项2', value: 20, selected: true },
        { name: '选项3', value: 30 }
      ]
    }
  ]
};

接下来，需要创建一个多选框元素，用于控制饼图的选中状态。可以使用 HTML 和 CSS 来实现多选框的样式和布局。

<div class="checkbox-container">
  <input type="checkbox" id="checkbox1">
  <label for="checkbox1">选项1</label>
  <input type="checkbox" id="checkbox2">
  <label for="checkbox2">选项2</label>
  <input type="checkbox" id="checkbox3">
  <label for="checkbox3">选项3</label>
</div>

然后，使用 JavaScript 将多选框的状态与饼图的数据项关联起来。可以使用 Echarts 的 setOption 方法来动态更新饼图的选中状态。

var chart = echarts.init(document.getElementById('main'));
chart.setOption(option);

// 监听多选框的点击事件
document.getElementById('checkbox1').addEventListener('change', function () {
  // 更新饼图的选中状态
  option.series[0].data[0].selected = this.checked;
  chart.setOption(option);
});

document.getElementById('checkbox2').addEventListener('change', function () {
  option.series[0].data[1].selected = this.checked;
  chart.setOption(option);
});

document.getElementById('checkbox3').addEventListener('change', function () {
  option.series[0].data[2].selected = this.checked;
  chart.setOption(option);
});

在上面的代码中，通过监听多选框的 change 事件，当用户点击多选框时，会更新对应饼图数据项的 selected 属性，并使用 setOption 方法重新绘制饼图。这样就可以实现多选框操作饼图选中的功能。

对于vue 直接绑定@change事件去监听就行了

《详细教程在这》