定义一个echarts,里面的series包含两个环形图,环形图需要联动显示tooltip,点击第一个环形图的色块,展示第一个环形图的tooltip和第二个环形图的tooltip
时间: 2023-08-18 18:18:48 浏览: 87
好的,我可以为您解答这个问题。
首先,需要明确的是,ECharts 是一个基于 JavaScript 的开源可视化库,用于构建交互式的数据可视化界面。在 ECharts 中,每一个图表都被称为一个“系列”(series),而每个系列可以包含多个“数据项”(data item)。在这里,我们需要创建两个环形图系列,然后实现联动显示 tooltip 的效果。
以下是一个简单的代码示例,供您参考:
``` javascript
var chart1 = echarts.init(document.getElementById('chart1'));
var chart2 = echarts.init(document.getElementById('chart2'));
// 定义第一个环形图
var series1 = {
type: 'pie',
radius: ['50%', '70%'],
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)'
}
}
};
// 定义第二个环形图
var series2 = {
type: 'pie',
radius: ['50%', '70%'],
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)'
}
}
};
// 将两个系列添加到图表中
chart1.setOption({
series: [series1],
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
}
});
chart2.setOption({
series: [series2],
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
}
});
// 监听第一个环形图的点击事件
chart1.on('click', function(params) {
var dataIndex = params.dataIndex;
chart1.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: dataIndex
});
chart2.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: dataIndex
});
});
```
在上面的代码中,我们首先定义了两个环形图系列 `series1` 和 `series2`,然后将它们分别添加到两个不同的图表 `chart1` 和 `chart2` 中。在每个图表中,我们都定义了一个 tooltip,用于显示鼠标悬停在数据项上时的信息。
接下来,我们监听了第一个环形图的点击事件,并且在点击时,通过 `dispatchAction` 方法分别展示了第一个环形图和第二个环形图的 tooltip。
需要注意的是,上面的代码仅为示例,实际使用时需要根据具体情况进行修改和调整。
阅读全文