echarts图表联动

发布时间:2026/7/8 3:38:07
echarts图表联动 就是一个页面有很多图表,鼠标移入一个的时候,其他的图表也有同样的行为,比如tooltip等前提是大家的横轴数据要保持一致,否则可能达不到我们预期的效果效果如下:第一种方式:也比较简单,就是首先我们给每个图表实例设置相同的group:if(!charts) { charts = echarts.init(document.getElementById(`wft-charts-${props.id}`)) } charts.group = 'CUSTOM_CHART' // 设置分组名称然后使用echarts.connect方法联动起来即可:因为我这里是习惯把图表单独封装为一个组件,所以我在父组件中进行统一的connect:因为实例项目中,数据都是动态的,很多个图表情况下,对设置echart.connect的时机有要求,设置不好可能达不到我们的预期效果,就是不是所有的图表都会联动,可能只有其中两个联动。这时候我们也可以手动实现,方式2如下:第二种方式:首先在我们的图表封