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

最常见的两种：

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

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

上代码前先讲一下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. appium-appium的等待时间

    #三种appium设置等待时间的方法 #第一种 sleep(): 设置固定休眠时间. python 的 time 包提供了休眠方法 sleep() , 导入 time包后就可以使用 sleep()进行 ...

  2. 漏洞利用-FTP漏洞利用

    一.环境说明 目标IP: 本人虚拟机 192.168.80.134 ,使用 metasploit2 攻击IP: 本人虚拟机 192.168.80.129 ,使用 kali 二.匿名用户登录 root@ ...

  3. phpmyadmin 4.8.1任意文件包含（CVE-2018-12613）

    简介 环境复现:https://gitee.com/xiaohua1998/hctf_2018_warmup 考察知识点:文件包含漏洞(phpmyadmin 4.8.1任意文件包含) 线上平台:榆林学 ...

  4. 牛客练习赛60E 旗鼓相当的对手

    dsu on tree 题目链接 点我跳转 题目大意 给你一棵以\(1\)为根节点,包含\(n\)个节点的树和一个参数 \(k\),求每个节点的"\(rating\)" \(rat ...

  5. 详解CorelDRAW中刻刀工具的具体运用

    通过CorelDRAW,我们可以将一个对象拆分为两个对象,使用刻刀工具就可以将对象一分为二,保存为一个由两个或者多个子路径组成的对象,可以指定是否要自动闭合路径,或者是否一直将它们打开. CDR刻刀工 ...

  6. ubuntu安装imagick扩展

    注意:安装该扩展不要求安装ImageMagick从http://pecl.php.net/package/imagick找到imagick的最新的版本 Linux代码 wget http://pecl ...

  7. 一张图彻底理解Spring如何解决循环依赖！！

    写在前面 最近,在看Spring源码,看到Spring解决循环依赖问题的源码时,不得不说,源码写的太烂了.像Spring这种顶级的项目源码,竟然存在着这种xxx的代码.看了几次都有点头大,相信很多小伙 ...

  8. synchronized底层揭秘

    前言 上篇文章我们从硬件级别探索,对可见性和有序性的认识上升了一个高度,却迟迟没有介绍原子性的解决方案. 今天我们就来聊一聊原子性的解决方案,锁. 引入锁机制,除了可以保证原子性,同时也可以保证可见性 ...

  9. Window .NetCore Nginx

    1.首先去官网下载Nginx 官网地址:http://nginx.org/en/download.html 2.下载好之后,我的文件是放在D:\InstallFiles\Nginx\nginx-1.1 ...

  10. LeetCode 040 Combination Sum II

    题目要求:Combination Sum II Given a collection of candidate numbers (C) and a target number (T), find al ...