TNBLOG
首页
博客
视频
资源
问答
猿趣
手机
关于
搜索
收藏
便签
笔记
消息
创作
登录
剑轩
故如虹,知恩;故如月,知明
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
CSS
15篇
微服务
41篇
Git
14篇
.NET
102篇
移动开发
33篇
软件架构
23篇
.NET Core
119篇
.NET MVC
11篇
英语
3篇
随笔
86篇
Bootstrap
3篇
Redis
21篇
编辑器
10篇
Js相关
15篇
虚拟化
8篇
更多
Oracle
7篇
Python
14篇
数据库
26篇
EF
17篇
微信
3篇
前端
151篇
消息队列
6篇
docker
41篇
多线程
1篇
Java
4篇
软件基础
2篇
C++
2篇
WCF
7篇
Linux
7篇
nginx
5篇
K8S
9篇
ABP
2篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术
原
echarts 仪表盘gauge颜色渐变。echarts圆环进度条。echarts圆环进度条弧形
2931
人阅读
2022/3/9 18:57
总访问:
3969147
评论:
0
收藏:
0
手机
分类:
前端
效果如下: <img src="https://img.tnblog.net/arcimg/aojiancc2/38b71ec068bf493c8b97ac6d82c61e8e.gif" width="320px"> ### 配置项代码如下 ``` // 基于准备好的dom,初始化echarts实例 const myChart = this.$echarts.init(document.getElementById('labroom-trend-chart')) option = { series: [ { type: 'gauge', center: ['50%', '60%'], // 调整显示圆弧的弧度,也就是可以调整显示的圆圈 startAngle: 240, endAngle: -60, min: 0, max: 100, splitNumber: 12, itemStyle: { // 圆弧刻度的颜色,这样只是设置一个颜色 // color: '#ffabcd', // 颜色渐变 color:{ type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset:0,color:'#EA5050' // 0% 处的颜色 },{ offset:0.25,color:'#EA5050' // 25% 处的颜色 },{ offset:0.5,color:'#EB5D5D' // 50% 处的颜色 },{ offset:0.75,color:'#EF8585' // 75% 处的颜色 },{ offset:1,color:'#F5BDBD' // 100% 处的颜色 }], global: false // 默认为 false } }, // 显示进度 progress: { show: true, width: 30 }, pointer: { //关闭指示器 show: false }, axisLine: { lineStyle: { width: 30, // 底圈的颜色 // color: [ // [0.25, '#FF6E76'], // [0.5, '#FDDD60'], // [0.75, '#58D9F9'], // [1, '#7CFFB2'] // ] } }, // 刻度线 axisTick: { distance: -45, splitNumber: 5, lineStyle: { width: 1, color: '#ffabcd' } }, // 外圈刻度分割线 splitLine: { distance: -52, length: 14, lineStyle: { // 设置成0不要刻度分割线 width: 0, color: '#999' } }, // 刻度数字 axisLabel: { distance: -20, color: '#999', // 设置成0不要刻度数字 fontSize: 0 }, anchor: { show: false }, title: { show: false }, detail: { valueAnimation: true, width: '60%', lineHeight: 40, borderRadius: 8, offsetCenter: [0, '0%'], fontSize: 33, fontWeight: 'bolder', formatter: '{value} %', color: 'inherit' //inherit表示和图表颜色一致 }, data: [ { value: 20 } ] } ] }; setInterval(function () { const random = +(Math.random() * 100).toFixed(2); myChart.setOption({ series: [ { data: [ { value: random } ] }, { data: [ { value: random } ] } ] }); }, 2000); option && myChart.setOption(option); ``` **例子是基于官方的例子:气温仪表盘改的** https://echarts.apache.org/examples/zh/editor.html?c=gauge-temperature 上面的这种配置,表示颜色从上到下渐变 ``` x: 0, y: 0, x2: 0, y2: 1, ``` 如果是想要颜色从左到右渐变这样设置即可 ``` x: 0, y: 0, x2: 1, y2: 0, ``` 关于颜色渐变官方的文档可以看看:https://echarts.apache.org/zh/option.html#color **在贴两个颜色渐变的搭配** 黄色渐变 ``` // 颜色渐变 color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#F8ED41' // 0% 处的颜色 }, { offset: 1, color: '#E4951E' // 100% 处的颜色 }], global: false // 默认为 false } ``` 蓝色渐变 ``` itemStyle: { // 圆弧刻度的颜色,这样只是设置一个颜色 // color: '#ffabcd', // 颜色渐变 color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#0491FA' // 0% 处的颜色 }, { offset: 1, color: '#0054D0' // 100% 处的颜色 }], global: false // 默认为 false } }, ``` **itemStyle的颜色渐变也可以这样设置** a ,b,c,d为0,1 a:1 arr中的颜色右到左 b:1 arr中的颜色下到上 c:1 arr中的颜色左到右 d:1 arr中的颜色上到下 简单示例: ``` itemStyle: { color: new this.$echarts.graphic.LinearGradient( 0, 0, 1, 0, [ { offset: 0, color: '#abcdff' }, { offset: 0.75, color: '#ffabcd' }, { offset: 1, color: '#00cc66' } ] ) } ``` ### 外圈高亮,发光 ![](https://img.tnblog.net/arcimg/aojiancc2/c7a82ec0f1c5415e9eac22074f6f698e.png) 利用边框和阴影 ``` itemStyle: { normal: { borderWidth: 2, shadowBlur: 5, // color:"blue", borderColor: "#ffabcd", shadowColor: "#fff" }, } ``` ### 内圈高亮,发光 内圈设置的官方文档:https://echarts.apache.org/zh/option.html#series-gauge.axisLine.lineStyle 内圈底部那个圈只能通过shadowColor,shadowBlur,shadowOffsetX,shadowOffsetY这几个参数来,例如 ``` axisLine: { lineStyle: { width: 20, // 阴影的颜色 shadowColor: 'rgba(255,0, 0, 1)', // 阴影的宽度 shadowBlur: 22, // 阴影的x偏移量 shadowOffsetX: 0, // 底圈的颜色 color: [[1, "rgba(255,255,255,9)"]], } ``` 效果如下: ![](https://img.tnblog.net/arcimg/aojiancc2/f7924cb3a55c4fce8b7212d2538e8f19.png) **如果把阴影的x偏移量设置一下就可以看到阴影效果的偏移** ``` // 阴影的x偏移量 shadowOffsetX: 50, ``` ![](https://img.tnblog.net/arcimg/aojiancc2/d3e1248fc8814807bc9077808cf86b03.png) **但是如果把底圈那个颜色的透明度设置成很低,就看不到阴影了** 比如设置成0.1的透明度就看不到阴影了 ``` // 底圈的颜色 color: [[1, "rgba(255,255,255,0.1)"]], ``` 底圈高亮的效果其实我们还可以用同心圆的方式实现,我们可以用三个圆,内部的一个圆刚好在内边框,外面的那个圆设置在外边框这样也可以实现底圈的高亮效果 ### 内圈的颜色渐变。多个颜色分段 通过实例化的this.$echarts.graphic.LinearGradient设置即可 ``` axisLine: { lineStyle: { width: 20, // color: [ // [0.25, '#FF6E76'], // [0.5, '#FDDD60'], // [0.75, '#58D9F9'], // [1, '#7CFFB2'] // ] color: [ [1, new this.$echarts.graphic.LinearGradient( 0, 1, 1, 0, [ { offset: 0, color: '#ffabcd' }, { offset: 0.37, color: 'rgba(255,255,255,0.1)' }, { offset: 0.67, color: 'rgba(255,255,255,0.1)' }, { offset: 1, color: '#abcdff' } ] ) ] ] } }, ``` **是多个颜色分段的话就是这样设置** ``` color: [ [0.25, '#FF6E76'], [0.5, '#FDDD60'], [0.75, '#58D9F9'], [1, '#7CFFB2'] ] ```
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}