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

最常见的两种：

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

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

上代码前先讲一下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. eclipse 和 myeclipse 字符编码设置

    需要设置的几处地方为: Window->Preferences->General ->Content Type 所有 Default encoding 设置为UTF-8 Window ...

  2. 文本多行省略号（CSS最优方案）

    Float定位溢出隐藏 优点: 纯CSS实现,性能好,不用js调优 兼容性高 多行省略,自动显示 缺点: 单词截断 代码如下: <div class="ellipses-div&quo ...

  3. TypeScript 引入第三方包，报无法找到模块错误

    以 react-router-dom 模块为例 1. npm加上 @types/ 根据报错提示尝试安装该库的TypeScript版本 (该库的 ts 声明文件),也就是在该库的名称前加上 @types ...

  4. Kafka入门（安装及使用）

    Kafka是一种分布式的,基于发布/订阅的消息系统. Kafka的组成包括: Kafka将消息以topic为单位进行归纳. 将向Kafka topic发布消息的程序成为producers. 将预订to ...

  5. 面试官：小伙子，给我说一下Java 数组吧

    Java 数组 Java 语言中提供的数组是用来存储固定大小的同类型元素. 1.声明数组变量 首先必须声明数组变量,才能在程序中使用数组. dataType[] arrayRefVar; // 首选的 ...

  6. 不想错过网课？不妨用Camtasia录制下来！

    2020年突发的这场疫情给我们的日常生活与学习带来了一些不便,却也意外的让网课走红了起来.小学.中学.大学都开始通过媒体工具或直播平台开始授课,但网络授课与实际课堂上课还是有区别的,学生们受到环境影响 ...

  7. JS&Swift相互交互

    加载本地HTML文件       x         override func loadView() {    super.loadView()    let conf = WKWebViewCon ...

  8. 测试中：ANR是什么

    1.ANR 的定义 ANR(Application Not Responding),用户可以选择"等待"而让程序继续运行,也可以选择"强制关闭".所以一个流畅的 ...

  9. 推荐系统实践 0x09 基于图的模型

    用户行为数据的二分图表示 用户的购买行为很容易可以用二分图(二部图)来表示.并且利用图的算法进行推荐.基于邻域的模型也可以成为基于图的模型,因为基于邻域的模型都是基于图的模型的简单情况.我们可以用二元 ...

  10. TCP的流量控制和阻塞控制

    流量控制和阻塞控制实例: 可以用一个例子来说明这种区别.设某个光纤网络的链路传输速率为1000Gbit/s.有一台巨型计算机向一台个人电脑以1Gbit/s的速率传送文件.显然,网络本身的带宽是足够大的 ...