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

最常见的两种：

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

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

上代码前先讲一下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. sql bypass waf fuzz python

    从freebuf copy过来的,先保存,有空再改 #encoding=utf-8 import requests url = "http://127.0.0.1/index.php?id= ...

  2. v-echarts安装

    npm install v-echarts echarts --save

  3. Linux学习 - 02 使用 - Centos8 - 『更换rpm/epel包源为国内源』

    1. Centos8 - 『更换rpm/epel包源为国内源』 centos 8 默认是会读取centos.org的mirrorlist的,所以一般来说是不需要配置镜像的. 如果你的网络访问mirro ...

  4. leetcode165. 比较版本号

    比较两个版本号 version1 和 version2.如果 version1 > version2 返回 1,如果 version1 < version2 返回 -1, 除此之外返回 0 ...

  5. Redis 基础设计结构之三 hash（哈希）

    Redis 有 5 种基础数据结构,分别为:string (字符串).list (列表).set (集合).hash (哈希) 和 zset (有序集合). 今天来说一下hash(哈希),hash的数 ...

  6. python测试代码

    前言: 编写函数或者类时,需要编写测试代码,来保证其的功能运行是否按预期的那样工作.在程序添加新的代码时,用来测试是否会破坏本身的功能. 我们使用python自带的unittest模块来测试代码. 编 ...

  7. P3287 [SCOI2014]方伯伯的玉米田

    首先可以证明,一定存在一种最优解,每次选择的区间结尾都是 \(n\).因为如果某一个区间结尾不是 \(n\),将其替换成 \(n\) 仍然保持单调不下降.接着都按这个策略拔高玉米. 令 \(f_{i, ...

  8. Tarjan 算法总结

    一些概念 连通:无向图中的任意两点都可以互相到达. 强连通:有向图中的任意两点都可以互相到达. 连通分量:无向图的极大连通子图. 强连通分量:有向图的极大强连通子图. DFS 生成树:对一张图(有向无 ...

  9. 《我想进大厂》之Spring夺命连环10问

    1.说说Spring 里用到了哪些设计模式? 单例模式:Spring 中的 Bean 默认情况下都是单例的.无需多说. 工厂模式:工厂模式主要是通过 BeanFactory 和 Application ...

  10. 6.2 Binding基础

    WPF最为核心的思想是数据驱动UI,实现这一技术的基石就是绑定技术(binding).如果把Binding比作数据的桥梁,那么它的两端分别是源(Source)和目标(Target),Binging是架 ...