echarts 饼图和柱状图联动
时间: 2023-09-12 22:11:15 浏览: 316
echarts折线图+饼图双图联动示例
5星 · 资源好评率100%
可以通过 echarts 中的数据联动和事件联动实现饼图和柱状图的联动。具体步骤如下:
1. 在饼图和柱状图的 option 中分别定义一个相同的 dataZoom 组件,设置 type 为 inside,使得两个图表的缩放范围相同。
2. 在饼图和柱状图的 option 中分别定义一个相同的 toolbox 组件,并设置 feature.dataView.show 为 true,使得用户可以查看数据。
3. 在饼图和柱状图的 option 中分别定义一个相同的 brush 组件,设置 toolbox 中的 feature.dataView 和 brush 组件的关联,使得用户可以通过 brush 组件框选某一部分数据并查看。
4. 在饼图和柱状图的 option 中分别定义一个相同的 tooltip 组件,设置 trigger 为 'axis',使得饼图和柱状图的 tooltip 显示方式相同。
5. 在饼图和柱状图的 option 中分别定义一个相同的 series-name,使得在 brush 组件框选某一部分数据时,饼图和柱状图的 tooltip 内容相同。
这样饼图和柱状图就可以实现数据联动和事件联动,达到联动效果。
阅读全文