文章目录
- 需求
- 分析
需求
实现 echarts 中饼图点击区块事件
分析
当用户点击饼状图上的各个模块时，我们可以通过 JavaScript 监听 click 事件来实现相应的交互逻辑。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>饼状图点击事件示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart-container" style="width: 600px; height: 400px;"></div>
<script>
// 创建饼状图的容器
var chartContainer = document.getElementById('chart-container');
// 创建 ECharts 实例
var myChart = echarts.init(chartContainer);
// 配置饼状图的数据
var option = {
series: [{
type: 'pie',
data: [
{value: 335, name: 'A'},
{value: 310, name: 'B'},
{value: 234, name: 'C'},
{value: 135, name: 'D'},
{value: 1548, name: 'E'}
]
}]
};
// 监听饼状图点击事件
myChart.on('click', function(params) {
// 获取被点击项的名称和数值
var name = params.name;
var value = params.value;
// 在控制台输出被点击项的信息
console.log(name + ' 被点击了，数值为：' + value);
alert(name + ' 被点击了，数值为：' + value);
});
// 使用配置项显示饼状图
myChart.setOption(option);
</script>
</body>
</html>
-
在上述代码中，我们首先创建了一个
<div>容器来放置饼状图，并引入了 ECharts 库。然后，使用 echarts.init 方法创建了一个 ECharts 实例，并设置了饼状图的数据。 -
接着，使用 myChart.on 方法监听了饼状图的 ‘click’ 事件，并在回调函数中获取被点击项的名称和数值，并将其输出到控制台和一个弹窗中。
-
最后，使用 myChart.setOption(option) 将配置项应用到 ECharts 实例中，从而显示饼状图。
