echarts饼图默认状态高亮显示
需求:饼状图默认状态下高亮显示指定内容。
最常见的两种:
一、饼图中间始终默认展示数据总数和统计事项的名字(如下图),这种实现方式比较简单,就不多介绍

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

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

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

这样就大功告成了
echarts饼图默认状态高亮显示的更多相关文章
- Vue Echarts 饼图设置默认选中一个
Vue Echarts 饼图设置默认选中一个 myChart.setOption(data) // data伟echarts所需要传入的参数,就是配置参数最多的那个玩意 myChart.dispatc ...
- Echarts饼图绘制
实现效果: html代码: <div id="chartBody1" style="width:120%;height:28vh;"> <di ...
- Android GridView 通过seletor 设置状态和默认状态
Android中可以通过selector控制GridView Item 的状态,而省去使用代码控制 GridView View Selector Xml文件 <?xml version=&quo ...
- ECharts饼图试玩
处理类似提交问卷的数据,要生成图表,用了ECharts,好方便的. 简陋效果: 1.表单存储 有单选和多选题,单选直接存储各选项数字值,1,2,3,4...中一个:多选用|分隔存储选项值,如1|3,2 ...
- 将数据动态加载到Echarts饼图中
需求描述 Echarts中的官方示例是将数据的设定写好在页面的配置项中的,但在实际的开发展示中,我们需要按照需求通过调用后台的接口获取数据,再将数据加载到特定的Echarts饼图中. 实现效果 实现步 ...
- MouseMoveEvent为了不太耗资源在默认状态下是要鼠标按下才能捕捉到。要想鼠标不按下时的移动也能捕捉到,需要setMouseTracking(true)
最近用Qt软件界面,需要用到mouseMoveEvent,研究了下,发现些问题,分享一下. 在Qt中要捕捉鼠标移动事件需要重写MouseMoveEvent,但是MouseMoveEvent为了不太耗资 ...
- echarts饼图
1.添加点击事件并跳转到不同的页面 // 路径配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist/' ...
- 百度ECHARTS 饼图使用心得 处理data属性
做过CRM系统的童鞋应该都或多或少接触过hicharts或者echarts等数据统计插件.用过这两款,个人感觉echarts的画面更好看.至于功能,只有适合自己的才是最好的. 今天来说说我使用echa ...
- echarts饼图配置
js引用和配置div <div id="container" style="height: 100%"></div> <scrip ...
随机推荐
- go-zero之web框架
go-zero 是一个集成了各种工程实践的 web 和 rpc 框架,其中rest是web框架模块,基于Go语言原生的http包进行构建,是一个轻量的,高性能的,功能完整的,简单易用的web框架 服务 ...
- 重置ubuntu13.04 密码
方法如下: Restart Machine HOLD Shift Button ( You will get message "GRUB Loading") Select the ...
- python3处理csv文件
1. 基础语句 1.1 文件的读取 如果需要读取一行数据如下表1所示,那么需要读取域名下面的数据,便使用如下代码: with open('A.csv','rb') as csvfile: reader ...
- 主板上来了一个新邻居,CPU慌了!
大家好,我是CPU一号车间的那个阿Q,好久不见,我想死你们了- 不认识我的请去这里这里补补课:完了!CPU一味求快出事儿了! 主板上的新邻居 "阿Q,快别忙了,马上去一趟会议室,领导有重要事 ...
- 【MathType教学】如何让括号内的内容居中
作为一款非常好用的公式编辑器,MathType它的功能十分强大,不仅包含了大量的数学符号,并且能和Office软件很好地兼容.但是有的时候打出来的公式可能不是自己想要的效果,这时我们就要用一些特别的办 ...
- FL Studio20效果器Fruity Reverb 2功能介绍
FL Studio,也就是我梦通常所说的水果音乐制作软件,是一款新手就可以用的软件.其操作简单,界面简洁大方,就算只用鼠标也可以轻松编曲. FL Studio20中有许多自带合成器是很好用的,同时也是 ...
- 如何能够将MathType工具栏放大?
作为专业的公式编辑器,MathType受到了很多用户的青睐,因为借助它可以快速编写出想要的各种数学公式.但是有的用户发现MathType工具栏中的符号有一些小,那么为了方便使用,能不能将工具栏放大呢? ...
- 详解FL Studio压缩器——Fruity Limiter(下)
Hello!小伙伴们又见面啦-接上一篇,本篇咱们继续讲解音乐编曲软件FL Studio20压缩器内容. 包络"ENVELOPE"中包含三个旋钮,它们都有什么作用呢?一起来揭晓吧! ...
- Java IDEA根据database以及脚本代码自动生成DO,DAO,SqlMapper文件(一)
根据数据库代码自动生成的插件挺多的,这里主要分享两种: 1.根据database以及脚本代码自动生成 2.根据mybatis-generator-core自动生成(下一章节进行分享,包含sqlserv ...
- 精尽MyBatis源码分析 - MyBatis-Spring 源码分析
该系列文档是本人在学习 Mybatis 的源码过程中总结下来的,可能对读者不太友好,请结合我的源码注释(Mybatis源码分析 GitHub 地址.Mybatis-Spring 源码分析 GitHub ...