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

最常见的两种：

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

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

上代码前先讲一下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. 使用Ant将项目打成war包

    现在很多项目Java基本都是基于maven管理的,maven对于jar包管理和打包的方便这里就不再赘述,但是如果没有使用maven管理如何将一个Java Web项目打成war包呢,这里推荐使用Ant. ...

  2. MQ消息中间件，面试能问些什么？

    MQ消息中间件,面试能问些什么? 为什么使用消息队列?消息队列的优点和缺点? kafka.activemq.rabbitmq.rocketmq都有什么优缺点? 面试官角度分析: (1)你知不知道你们系 ...

  3. 工作一年半被裁掉，机缘巧合拿到阿里P7offer，得亏我看过这份“突击”面试宝典

    前言 不论是校招还是社招都避免不了各种⾯试.笔试,如何去准备这些东⻄就显得格外重要.不论是笔试还是⾯试都是有章可循的,我这个"有章可循"说的意思只是说应对技术⾯试是可以提前准备,所 ...

  4. 转化dataframe中一组序列为时间序列的方法-to_datetime()的最新用法

    一.to_datetime()的最新用法: hs300_hf['date'] = pd.to_datetime(hs300_hf['date']) hs300_hf.set_index('date', ...

  5. 【VUE】7.Vuex基本使用

    1. 安装Vuex npm install vuex --save 2. 导入Vuex包 import Vuex from 'vuex' Vue.use(Vuex) 3. 创建store对象 cons ...

  6. 【VUE】3.表单操作

    1. Form组件渲染 1. components -> 新增组件Form.vue <template> <div>表单验证</div> </templ ...

  7. [LGOJ1273]有线电视网

    solution 用了一个很有意思的转移方法. $dp[i][j] $ 表达 \(i\) 作为根,\(j\)个终端时最大的收益,即钱数,当\(0\leq dp[1][i]\)时,即以1为根可以转移到\ ...

  8. Educational Codeforces Round 96 (Rated for Div. 2) E. String Reversal 题解（思维+逆序对）

    题目链接 题目大意 给你一个长度为n的字符串,可以交换相邻两个元素,使得这个字符串翻转,求最少多少种次数改变 题目思路 如果要求数组排序所需要的冒泡次数,那其实就是逆序对 这个也差不多,但是如果是相同 ...

  9. python - os.sep用法

    python是跨平台的.在Windows上,文件的路径分隔符是'\',在Linux上是'/'.为了让代码在不同的平台上都能运行,那么路径应该写'\'还是'/'呢?使用os.sep的话,就不用考虑这个了 ...

  10. celery异步发送短信

    1.使用celery异步发送短信 1.1 在 celery_task/mian.py 中添加发送短信函数 # celery项目中的所有导包地址, 都是以CELERY_BASE_DIR为基准设定. # ...