echart 之仪表盘 动态分段颜色实现
时间:2021-08-05
本文章向大家介绍echart 之仪表盘 动态分段颜色实现,主要包括echart 之仪表盘 动态分段颜色实现使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
直接切入
需求
上图(已实现的)
重点:
1、三段颜色,小于34% 蓝色, 34%-67% 黄色,大于67% 橙色
2、数值到达地方才显示颜色,颜色是动态的
区别于这种固定三种颜色
这种实现比较简单,随便贴一下
lineStyle: { color: [ [0, '#2CFAFC'], [0.33, '#4BAEFD'], [0.67, '#FFE24D'], [0.99, '#F85C1D'], [1, '#0b275B'] // 底色 ], }
核心代码实现如下,实现原理还是在实现三种颜色基础上,根据数据判断是否到达分割点,否则给底色
// that.value 是data里面的数据
lineStyle: { color: [ [0, '#2CFAFC'], [that.value < 34 ? that.value / 100 : 0.33, '#4BAEFD'], [that.value > 34 && that.value < 67 ? that.value / 100 : 0.67, that.value > 34 ? '#FFE24D' : '#0b275B'], [that.value > 67 ? that.value / 100 : 0.99, that.value > 67 ? '#F85C1D' : '#0b275B'], [1, '#0b275B'] // 底色 ],
}
-----------------------------------------end-------------
series的仪表盘代码,本地是封装的,切勿整段复制
{ name: '进度条', type: 'gauge', center: ['50%', '50%'], radius: '90%', z: 10, axisLine: { show: true, lineStyle: { color: [ [0, '#2CFAFC'],// [0.33, '#4BAEFD'], // [0.67, '#FFE24D'], // [0.99, '#F85C1D'], [that.value < 34 ? that.value / 100 : 0.33, '#4BAEFD'], [that.value > 34 && that.value < 67 ? that.value / 100 : 0.67, that.value > 34 ? '#FFE24D' : '#0b275B'], [that.value > 67 ? that.value / 100 : 0.99, that.value > 67 ? '#F85C1D' : '#0b275B'], [1, '#0b275B'] ], width: px2px(8) } }, detail: { offsetCenter: ['10%', '80%'], fontSize: px2px(24), lineHeight: px2px(12), x: 'center', y: 'center', width: px2px(60), height: px2px(60), formatter: (value) => { return `{valueStyle|${value}}{unitStyle|%}` }, rich: { valueStyle: { color: '#fff', fontSize: px2px(24) }, unitStyle: { color: '#fff', padding: [0, 0, 10, 0], fontSize: px2px(11) } } }, axisLabel: { show: false }, axisTick: { show: false }, splitLine: { show: false }, // itemStyle: { // color: '#ccc' // }, label: { show: false }, pointer: { show: true, length: '45%', radius: '80%', width: px2px(5), // 指针粗细 itemStyle: { color: 'red' } }, data: [that.value] }
原文地址:https://www.cnblogs.com/yflbk-2016/p/15102310.html
- popcorn-js视频Video框架简单用法
- 一次数据库响应缓慢的问题排查(r2第9天)
- 通过Ajax方式上传文件(input file),使用FormData进行Ajax请求
- C# 读取指定文件夹下所有文件
- ASP.NET 实现Base64文件流下载PDF
- MVC自定义视图引擎地址
- JS禁止鼠标右键、禁止全选、复制、粘贴的方法(所谓的防盗功能)
- impdp异常中断导致的问题(r2第8天)
- 利用autocomplete.js实现仿搜索效果(ajax动态获取后端[C#]数据)
- sql语句的简化(r2第7天)
- Ajax jsonp 跨域请求实例
- asp.net动态解析用户控件(UserControl)
- 找到多个与名为“Home”的控制器匹配的类型的解决方案
- 关于sequence问题的紧急处理(r2第26天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- (⊙o⊙)?markdown文档中插入萌萌的emoji表情
- C语言中的字符串可以怎么处理?
- 一个简单的C语言测试框架
- Let's Encrypt实践指北
- MassTransit Get Started->
- 一次性把所有普通和经典的网页布局讲得通通透透的,多图预警,建议收藏
- Github标星 8K+,免费又好用的Redis客户端工具!
- Python判断字符串是否包含特定子串的7种方法
- 用后台开发的逻辑理念学习VUE
- 进程管理-Linux每日一练(6)
- AkShare-能源数据-碳排放-国际行情
- Linux 【Shell脚本经典案例】
- 【Vulnhub】SecTalks: BNE0x00 - Minotaur
- Spring Boot扩展机制 - Spring Factories
- Google Analytics上实施透明度和用户意见征求框架