首页 前端知识 Echarts 多选框操作饼图选中(HTML详细教程)

Echarts 多选框操作饼图选中(HTML详细教程)

2024-11-04 09:11:22 前端知识 前端哥 954 185 我要收藏

废话少说,直接开始

第一步:在 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);
  });
}

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19870.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!