您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
ECharts 饼图实现多级联动可以通过使用多个饼图组件,并通过监听事件来更新其他饼图的数据。以下是一个简单的示例,展示了如何使用 ECharts 实现两级联动的饼图:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 饼图多级联动示例</title>
</head>
<body>
<div id="pieChart1" style="width: 600px;height:400px;"></div>
<div id="pieChart2" style="width: 600px;height:400px;"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
<script src="main.js"></script>
</body>
</html>
// 初始化两个饼图实例
var pieChart1 = echarts.init(document.getElementById('pieChart1'));
var pieChart2 = echarts.init(document.getElementById('pieChart2'));
// 定义第一级饼图的数据
var data1 = [
{ value: 300, name: 'A' },
{ value: 200, name: 'B' },
{ value: 150, name: 'C' }
];
// 定义第二级饼图的数据
var data2 = {
'A': [
{ value: 100, name: 'A1' },
{ value: 200, name: 'A2' }
],
'B': [
{ value: 50, name: 'B1' },
{ value: 150, name: 'B2' }
],
'C': [
{ value: 30, name: 'C1' },
{ value: 120, name: 'C2' }
]
};
// 配置第一个饼图
var option1 = {
series: [
{
type: 'pie',
radius: '55%',
data: data1,
label: {
show: true,
formatter: '{b}: {c} ({d}%)'
}
}
]
};
// 配置第二个饼图
var option2 = {
series: [
{
type: 'pie',
radius: ['40%', '70%'],
data: [],
label: {
show: true,
formatter: '{b}: {c} ({d}%)'
}
}
]
};
// 使用配置项渲染两个饼图
pieChart1.setOption(option1);
pieChart2.setOption(option2);
// 监听第一个饼图的点击事件
pieChart1.on('click', function (params) {
// 更新第二个饼图的数据
var newData = data2[params.name];
if (newData) {
pieChart2.setOption({
series: [
{
data: newData
}
]
});
}
});
在这个示例中,我们首先创建了两个饼图实例,并分别为它们设置了初始数据。然后,我们监听第一个饼图的点击事件,当点击某个扇区时,我们根据点击的扇区名称更新第二个饼图的数据。这样就实现了两级联动的饼图。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。