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

先放一张图:

客户要求:待处理字样要闪动显示。

小夏一番百度之后,求助于我:快来看看,怎么有客户提这种百度都百度不到答案的无理要求!

于是一起解决问题。

先写一下解决思路(不靠谱的后端开发,前端解决全靠百度)。

第一步:百度  echarts legend 自定义文字样式

这一步的时候,看到这位老兄的答案:https://www.cnblogs.com/wuguanglin/p/echarts_legend_formatter.html

思路很棒,但是它不闪啊!!不过已经学会了自定义字体样式,并举一反三,为指定的文字“待处理”单独设置了样式。

此处放字体样式代码:

代码意思是:待处理字样使用样式 a,其他字样使用样式 b

到这一步,只需要让 待处理 闪烁,就能实现客户要求了。好办,上定时器定时刷新字体样式

本来以为到这一步就好了,但是使用之后发现问题:客户数据太多,所以图表下方有设置滚动条。拖动滚动条之后,每次setOption,都会重新刷一下图表。问题来了,客户刚小心翼翼找到自己想看的数据位置,一下刷新就要直接从头再找。

小夏同学提出解决方案:记录一下刷新前的状态值,刷新时候重新赋值。

可行,于是小夏设置了 dataZoom 的 start 和 end 值。然后发现:滚动条放大时,数据是能设置好的,但是缩小之后就又出现重新刷新的问题了。

盲猜是因为参数设置不全面的问题,于是我建议,粗暴一点,全部获取,全部设置,不要单独设置部分属性了。如此就不会漏掉属性。

最终代码:

一个小问题的解决思路。百度上确实没看到具体的这种例子。如果有人需要,又正好看到,不失为一种解决办法。

echarts legend 图例文字闪烁显示的更多相关文章

  1. echarts中关于自定义legend图例文字

    formatter有两种形式: - 模板 - 回调函数 模板 使用字符串模板,模板变量为图例名称 {name} formatter: 'Legend {name}' 回调函数 formatter: f ...

  2. echarts 图形图例文字太长如何解决

    文章来源: https://blog.csdn.net/csm17805987903/article/details/85111835 legend 文字很多的时候对文字做裁剪并且开启 tooltip ...

  3. Echarts数据可视化legend图例,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  4. echarts legend文字配置多个颜色(转)

    困扰很久的问题终于解决了 oh yea! echarts legend文字配置多个颜色legend: {data: [{name:‘直接访问’,icon : ‘circle’,textStyle: { ...

  5. echarts 柱状图+折线+文字倾斜及省略

    效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  6. echarts legend 重叠 (转载)

    解决方案:  1. 调整option中的grid.top值才能避免重叠:(可以设置定制,也可以定义了一个计算公式) 2. 文档注明[特殊字符串 ''(空字符串)或者 '\n' (换行字符串)用于图例的 ...

  7. [置顶] echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐)

    echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置.(当然yAxis ...

  8. echarts x轴文字显示不全解决办法

    标题:echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐):http://blog.csdn.net/kebi007/article/details/68488694

  9. echarts柱状图坐标文字显示不完整解决方式

    echarts柱状图坐标文字显示不完整解决方式 本文转载自:https://jingyan.baidu.com/article/ab69b2707a9aeb2ca7189f0c.html echart ...

随机推荐

  1. Centos-当前登录用户信息- w who

    w who 显示当前登录系统的用户,但w显示的更为详细 who 相关参数 # 默认输出 用户名.登录终端.登录时间 -a 列出所有信息 -b    系统最近启动日期 -m   当前终端信息,相当于 w ...

  2. 联赛模拟测试10 C. 射手座之日

    题目描述 分析 方法一(线段树) 线段树维护的是以当前节点为左端点的区间的贡献 而区间的右端点则会从 \(1\) 到 \(n\) 逐渐右移 当我们把右端点从 \(i-1\) 的位置扩展到 \(i\) ...

  3. 065 01 Android 零基础入门 01 Java基础语法 08 Java方法 02 带参无返回值方法

    065 01 Android 零基础入门 01 Java基础语法 08 Java方法 03 带参无返回值方法 本文知识点:带参无返回值方法 说明:因为时间紧张,本人写博客过程中只是对知识点的关键步骤进 ...

  4. AA.Dapper升级了

    AA.Dapper基于dapper进一步封装而成的orm框架,提供增删改查.分页.事务.原生sql的功能,以满足日常的业务开发. 1.Repository层: DapperRepository类包含大 ...

  5. 手把手教你AspNetCore WebApi:Serilog(日志)

    前言 小明目前已经把"待办事项"功能实现了,API文档也搞定了,但是马老板说过,绝对不能让没有任何监控的项目上线的. Serilog是什么? 在.NET使用日志框架第一时间会想到N ...

  6. 制作iconfont放到自己的公共组件库

    我们公司的icon是UI提供svg,我们转成iconfont. 这里就不详细说明怎么制作svg,可以上网搜一下,https://www.iconfont.cn/help/detail?spm=a313 ...

  7. 推荐一款IDEA神器!一键查看Java字节码以及其他类信息

    由于后面要分享的一篇文章中用到了这篇文章要推荐的一个插件,所以这里分享一下.非常实用!你会爱上它的! 开始推荐 IDEA 字节码查看神器之前,先来回顾一下 Java 字节码是啥. 何为 Java 字节 ...

  8. Python+Appium自动化测试(8)-swipe()滑动页面

    app自动化测试过程中,经常会遇到滑动屏幕操作,appium框架的话我们可以使用webdriver提供的swipe()方法来对屏幕页面进行上滑.下滑.左滑.右滑操作. 一,swipe方法介绍 swip ...

  9. 多测师讲解selenium ——切换窗口——打印句柄_高级讲师肖sir

    (一)同一个窗口打开两个浏览器 from selenium import webdriverfrom time import sleepdrvier=webdriver.Chrome()url='ht ...

  10. day21 Pyhton学习 模块

    一.模块:就是一个包含了python定义和声明的文件,文件名是模块名字加上.py的后缀. 但其实import加载的模块分为四个通用类别: 1.使用python编写的代码(.py文件) 2.已被编译为共 ...