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

最常见的两种:

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

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

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

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

上代码

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

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

这样就大功告成了

echarts饼图默认状态高亮显示的更多相关文章

  1. Vue Echarts 饼图设置默认选中一个

    Vue Echarts 饼图设置默认选中一个 myChart.setOption(data) // data伟echarts所需要传入的参数,就是配置参数最多的那个玩意 myChart.dispatc ...

  2. Echarts饼图绘制

    实现效果: html代码: <div id="chartBody1" style="width:120%;height:28vh;"> <di ...

  3. Android GridView 通过seletor 设置状态和默认状态

    Android中可以通过selector控制GridView Item 的状态,而省去使用代码控制 GridView View Selector Xml文件 <?xml version=&quo ...

  4. ECharts饼图试玩

    处理类似提交问卷的数据,要生成图表,用了ECharts,好方便的. 简陋效果: 1.表单存储 有单选和多选题,单选直接存储各选项数字值,1,2,3,4...中一个:多选用|分隔存储选项值,如1|3,2 ...

  5. 将数据动态加载到Echarts饼图中

    需求描述 Echarts中的官方示例是将数据的设定写好在页面的配置项中的,但在实际的开发展示中,我们需要按照需求通过调用后台的接口获取数据,再将数据加载到特定的Echarts饼图中. 实现效果 实现步 ...

  6. MouseMoveEvent为了不太耗资源在默认状态下是要鼠标按下才能捕捉到。要想鼠标不按下时的移动也能捕捉到,需要setMouseTracking(true)

    最近用Qt软件界面,需要用到mouseMoveEvent,研究了下,发现些问题,分享一下. 在Qt中要捕捉鼠标移动事件需要重写MouseMoveEvent,但是MouseMoveEvent为了不太耗资 ...

  7. echarts饼图

    1.添加点击事件并跳转到不同的页面 // 路径配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist/' ...

  8. 百度ECHARTS 饼图使用心得 处理data属性

    做过CRM系统的童鞋应该都或多或少接触过hicharts或者echarts等数据统计插件.用过这两款,个人感觉echarts的画面更好看.至于功能,只有适合自己的才是最好的. 今天来说说我使用echa ...

  9. echarts饼图配置

    js引用和配置div <div id="container" style="height: 100%"></div> <scrip ...

随机推荐

  1. go-zero之web框架

    go-zero 是一个集成了各种工程实践的 web 和 rpc 框架,其中rest是web框架模块,基于Go语言原生的http包进行构建,是一个轻量的,高性能的,功能完整的,简单易用的web框架 服务 ...

  2. 重置ubuntu13.04 密码

    方法如下: Restart Machine HOLD Shift Button ( You will get message "GRUB Loading") Select the ...

  3. python3处理csv文件

    1. 基础语句 1.1 文件的读取 如果需要读取一行数据如下表1所示,那么需要读取域名下面的数据,便使用如下代码: with open('A.csv','rb') as csvfile: reader ...

  4. 主板上来了一个新邻居,CPU慌了!

    大家好,我是CPU一号车间的那个阿Q,好久不见,我想死你们了- 不认识我的请去这里这里补补课:完了!CPU一味求快出事儿了! 主板上的新邻居 "阿Q,快别忙了,马上去一趟会议室,领导有重要事 ...

  5. 【MathType教学】如何让括号内的内容居中

    作为一款非常好用的公式编辑器,MathType它的功能十分强大,不仅包含了大量的数学符号,并且能和Office软件很好地兼容.但是有的时候打出来的公式可能不是自己想要的效果,这时我们就要用一些特别的办 ...

  6. FL Studio20效果器Fruity Reverb 2功能介绍

    FL Studio,也就是我梦通常所说的水果音乐制作软件,是一款新手就可以用的软件.其操作简单,界面简洁大方,就算只用鼠标也可以轻松编曲. FL Studio20中有许多自带合成器是很好用的,同时也是 ...

  7. 如何能够将MathType工具栏放大?

    作为专业的公式编辑器,MathType受到了很多用户的青睐,因为借助它可以快速编写出想要的各种数学公式.但是有的用户发现MathType工具栏中的符号有一些小,那么为了方便使用,能不能将工具栏放大呢? ...

  8. 详解FL Studio压缩器——Fruity Limiter(下)

    Hello!小伙伴们又见面啦-接上一篇,本篇咱们继续讲解音乐编曲软件FL Studio20压缩器内容. 包络"ENVELOPE"中包含三个旋钮,它们都有什么作用呢?一起来揭晓吧! ...

  9. Java IDEA根据database以及脚本代码自动生成DO,DAO,SqlMapper文件(一)

    根据数据库代码自动生成的插件挺多的,这里主要分享两种: 1.根据database以及脚本代码自动生成 2.根据mybatis-generator-core自动生成(下一章节进行分享,包含sqlserv ...

  10. 精尽MyBatis源码分析 - MyBatis-Spring 源码分析

    该系列文档是本人在学习 Mybatis 的源码过程中总结下来的,可能对读者不太友好,请结合我的源码注释(Mybatis源码分析 GitHub 地址.Mybatis-Spring 源码分析 GitHub ...