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

最常见的两种:

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

echarts lines 取消结束点箭头 echarts点击节点高亮_数据

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

echarts lines 取消结束点箭头 echarts点击节点高亮_图例_02

echarts lines 取消结束点箭头 echarts点击节点高亮_高亮显示_03

echarts lines 取消结束点箭头 echarts点击节点高亮_数据_04

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

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

上代码

echarts lines 取消结束点箭头 echarts点击节点高亮_数据_05

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

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

echarts lines 取消结束点箭头 echarts点击节点高亮_数据_06

这样就大功告成了