echarts饼图默认状态高亮显示

2023-02-17,,,,

需求:饼状图默认状态高亮显示指定内容。

最常见的两种:

一、饼图中间始终默认展示数据总数和统计事项的名字(如下图),这种实现方式比较简单,就不多介绍

二、饼图中间默认展示某一图例的具体数据,鼠标放在谁身上中间就展示谁的数据(如下图),这种需求实现起来相对比较麻烦,今天就来分享一下如何实现

上代码前先讲一下ECharts中的事件,因为会用到,ECharts中的事件分为两种,一种是鼠标事件,在鼠标点击某个图形上会触发,还有一种是调用dispatchAction后触发的事件。官网上有dispatchAction的api,在这就不过多阐述,链接在此

https://echarts.apache.org/zh/api.html#echartsInstance.dispatchAction。

上代码

光这样还有问题:因为echarts默认鼠标移入legend图例也就是下面的小点点时,也会高亮显示该图例的数据,这里需要把该事件取消,否则就会数据重叠展示

在series里面将legendHoverLink设置为false,即取消legend的hover事件

这样就大功告成了

echarts饼图默认状态高亮显示的相关教程结束。

《echarts饼图默认状态高亮显示.doc》

下载本文的Word格式文档,以方便收藏与打印。