Echarts 多选框操作饼图选中（HTML详细教程）

废话少说，直接开始

第一步：在 HTML 文件中添加饼图的容器元素

<div id="main" style="width: 600px;height:400px;"></div>

第二步：引入 Echarts 库文件

从 Echarts 官方网站下载适合您项目的版本，并将其中的 echarts.min.js 文件引入到您的 HTML 文件中。

<script src="echarts.min.js"></script>

第三步：配置饼图的数据和样式

在 JavaScript 文件中配置饼图的数据和样式。

var option = {
  title: {
    text: '饼图示例',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: '55%',
      center: ['50%', '60%'],
      data: [
        { value: 335, name: '直接访问' },
        { value: 310, name: '邮件营销' },
        { value: 234, name: '联盟广告' },
        { value: 135, name: '视频广告' },
        { value: 1548, name: '搜索引擎' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

第四步：初始化 Echarts 实例并设置初始数据和样式

在 JavaScript 文件中初始化一个 Echarts 实例，并使用 setOption 方法将配置项应用到实例上。

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

这样，您就可以在页面上看到一个带有选中状态的饼图了。接下来，我们将实现通过多选框来控制饼图的选中状态。

第五步：创建多选框元素并监听其点击事件

在 HTML 文件中添加多选框元素，并使用 JavaScript 监听其点击事件。

<div class="checkbox-container">
  <input type="checkbox" id="checkbox1">
  <label for="checkbox1">直接访问</label>
  <input type="checkbox" id="checkbox2">
  <label for="checkbox2">邮件营销</label>
  <input type="checkbox" id="checkbox3">
  <label for="checkbox3">联盟广告</label>
  <input type="checkbox" id="checkbox4">
  <label for="checkbox4">视频广告</label>
  <input type="checkbox" id="checkbox5">
  <label for="checkbox5">搜索引擎</label>
</div>

第六步：使用 JavaScript 控制饼图的选中状态

在 JavaScript 文件中添加以下代码，以实现通过多选框来控制饼图的选中状态。

// 获取多选框元素和饼图数据项的索引值映射关系
var checkboxMap = {
  'checkbox1': 0, // 直接访问对应的数据项索引值（0）
  'checkbox2': 1, // 邮件营销对应的数据项索引值（1）
  'checkbox3': 2, // 联盟广告对应的数据项索引值（2）
  'checkbox4': 3, // 视频广告对应的数据项索引值（3）
  'checkbox5': 4   // 搜索引擎对应的数据项索引值（4）
};
// 监听多选框的点击事件并更新饼图的选中状态
for (var checkboxId in checkboxMap) {
  document.getElementById(checkboxId).addEventListener('change', function () {
    // 根据多选框的选中状态更新饼图对应数据项的 selected 属性值，并重新绘制饼图
    option.series[0].data[checkboxMap[this.id]].selected = this.checked;
    chart.setOption(option);
  });
}

现在，您已经完成了通过多选框来控制饼图选中状态的完整教程。您可以根据需要调整代码中的样式和数据，并根据实际情况进行修改和扩展。