echarts legend 图例文字闪烁显示
最近同事小夏遇到一个需求:客户要求echarts图表上指定的图例文字闪烁显示。
先放一张图:

客户要求:待处理字样要闪动显示。
小夏一番百度之后,求助于我:快来看看,怎么有客户提这种百度都百度不到答案的无理要求!
于是一起解决问题。
先写一下解决思路(不靠谱的后端开发,前端解决全靠百度)。
第一步:百度 echarts legend 自定义文字样式
这一步的时候,看到这位老兄的答案:https://www.cnblogs.com/wuguanglin/p/echarts_legend_formatter.html
思路很棒,但是它不闪啊!!不过已经学会了自定义字体样式,并举一反三,为指定的文字“待处理”单独设置了样式。
此处放字体样式代码:

代码意思是:待处理字样使用样式 a,其他字样使用样式 b
到这一步,只需要让 待处理 闪烁,就能实现客户要求了。好办,上定时器定时刷新字体样式

本来以为到这一步就好了,但是使用之后发现问题:客户数据太多,所以图表下方有设置滚动条。拖动滚动条之后,每次setOption,都会重新刷一下图表。问题来了,客户刚小心翼翼找到自己想看的数据位置,一下刷新就要直接从头再找。
小夏同学提出解决方案:记录一下刷新前的状态值,刷新时候重新赋值。
可行,于是小夏设置了 dataZoom 的 start 和 end 值。然后发现:滚动条放大时,数据是能设置好的,但是缩小之后就又出现重新刷新的问题了。
盲猜是因为参数设置不全面的问题,于是我建议,粗暴一点,全部获取,全部设置,不要单独设置部分属性了。如此就不会漏掉属性。
最终代码:

一个小问题的解决思路。百度上确实没看到具体的这种例子。如果有人需要,又正好看到,不失为一种解决办法。
echarts legend 图例文字闪烁显示的更多相关文章
- echarts中关于自定义legend图例文字
formatter有两种形式: - 模板 - 回调函数 模板 使用字符串模板,模板变量为图例名称 {name} formatter: 'Legend {name}' 回调函数 formatter: f ...
- echarts 图形图例文字太长如何解决
文章来源: https://blog.csdn.net/csm17805987903/article/details/85111835 legend 文字很多的时候对文字做裁剪并且开启 tooltip ...
- Echarts数据可视化legend图例,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- echarts legend文字配置多个颜色(转)
困扰很久的问题终于解决了 oh yea! echarts legend文字配置多个颜色legend: {data: [{name:‘直接访问’,icon : ‘circle’,textStyle: { ...
- echarts 柱状图+折线+文字倾斜及省略
效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- echarts legend 重叠 (转载)
解决方案: 1. 调整option中的grid.top值才能避免重叠:(可以设置定制,也可以定义了一个计算公式) 2. 文档注明[特殊字符串 ''(空字符串)或者 '\n' (换行字符串)用于图例的 ...
- [置顶]
echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐)
echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置.(当然yAxis ...
- echarts x轴文字显示不全解决办法
标题:echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐):http://blog.csdn.net/kebi007/article/details/68488694
- echarts柱状图坐标文字显示不完整解决方式
echarts柱状图坐标文字显示不完整解决方式 本文转载自:https://jingyan.baidu.com/article/ab69b2707a9aeb2ca7189f0c.html echart ...
随机推荐
- Python-全局函数(内置方法、内置函数)
Python有很多内置方法,这些都全局可用 abs() 求数值的绝对值,如果是复数则返回其模 print(abs(-17), abs(30.2), abs(3+4j)) # Python中复数表示为 ...
- (leetcode每日打卡)秋叶收藏集【动态规划】
LCP 19.秋叶收藏集 题目链接 算法 动态规划 时间复杂度O(n) 1.题目要求最终形成[红.黄.红]三部分,每部分数量可以不相等,问最终调整操作数量最小是多少.这道题一开始考虑暴力去做,枚举两个 ...
- springboot项目打包瘦身
默认情况下,Spring Boot 项目发布时会将项目代码和项目的所有依赖文件一起打成一个可执行的 jar 包.但如果项目的依赖包很多,那么这个文件就会非常大.这样每次即使只改动一点东西,就需要将整个 ...
- HTML+CSS系列:登录界面实现
一.效果 二.具体实现 1.index.html <!DOCTYPE html> <html> <head> <meta charset="utf- ...
- 系统编程-文件IO-IO处理方式
IO处理五种模型 .
- 空间视频和GIS
摘要. GIS的空间数据基本单位表示通常是根据 点,线和面.但是,另一种类型的空间数据正在变得越来越频繁 捕获的是视频,但在GIS中却被很大程度上忽略了.数字录像时 是现代社会中常见的一种媒介,包含多 ...
- 实验报告系列:实验一 HTML语言的简单网页制作
实验一 HTML语言的简单网页制作 一.实验目的: 1.掌握常用的HTML语言标记: 2.利用文本编辑器建立HTML文档,制作简单网页. 3.学习将其它格式的文档转换成HTML格式的文档 二.实验内容 ...
- 多测师讲解接口测试 _理论基础知识001_高级讲师肖sir
前言: 我们今天进入接口测试的学习! 今天学习的内容是偏向理论 接口理论 了解接口测试(1) 一.什么是接口测试? 接口统称api,即程序与程序之间的对接.交接.交互.是测试系统组件间接口的一种测试. ...
- 多测师讲解自动化测试 _RF定位iframe框_高级讲师肖sir
Open Browser https://mail.163.com/ gc Maximize Browser Window sleep 2 #进入if框 Comment Input Text name ...
- pytest文档56-插件打包上传到 pypi 库
前言 pytest 的插件完成之后,可以上传到 github,方便其他小伙伴通过 pip 源码安装.如果我们想通过 pip install packages 这种方式安装的话,需上传到 pypi 仓库 ...