Echarts——更改仪表盘方向和颜色
做小项目需要用到仪表盘，官方给出的颜色设置如下：
而我想要如下样式的：
最后，经过一番折腾算是搞成了如下样式效果：
要达到上面效果关键在于设置Echarts的如下两处js代码：
1.大小值要颠倒，因为这里的仪表刻度是顺时针增长的
2.坐标轴线的颜色要重新设置，不能用默认的，要把默认的颜色顺序颠倒过来
总体代码如下：
HTML：
<html>
<head>
<title>汽车仪表盘</title>
<style>
[v-cloak] {
display: none;
}
html,body{
height: 100%;
width: 100%;
padding: 0;
margin: 0;
background: gray;
display: flex;/*设置为弹性容器*/
align-items: center; /*包含的元素垂直居中*/
justify-content: center; /*包含的元素水平居中*/
}
.bg_total{
width: 80vh; /* 1vh 等于1/100的视口高度 */
height: 80%;
background: url(../static/img/totalBg.png) no-repeat;
background-size: 100% 100%;
}
.panel_agv{
width: 100%;
height: 100%;
position: relative;
background: #101019;
}
</style>
</head>
<body>
<div class="bg_total">
<div id="panel_agvid" class="panel_agv"></div>
</div>
<script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="./js/echarts-en.min.js"></script>
<script type="text/javascript" src="./js/myecharts.js"></script>
</body>
</html>
JS：
var panel_agvid= echarts.init(document.getElementById('panel_agvid'));
panel_option = {
series : [
{
name: '左上转速',
type: 'gauge',
center: ['33%', '33%'], // 默认全局居中
radius: '50%',
clockwise:true, //仪表盘刻度顺时针增长
min:7,
max:0,
startAngle:225,
endAngle:45,
splitNumber:7,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 10,
color: [[0.2, '#c23531'], [0.8, '#63869e'], [1, '#91c7ae']]
}
},
axisTick: { // 坐标轴小标记
length:12, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
splitLine: { // 分隔线
length:20, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto'
}
},
pointer: {
width:3
},
title: {
offsetCenter: ['0', '-20%'], // x, y，单位px
fontSize: 14,
color:'gray'
},
detail: {
offsetCenter: ['0', '35%'], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式
fontWeight: 'bolder',
fontSize: 18
}
},
data:[{value: 0, name: 'x1000 r/min'}]
},
{
name: '右上转速',
type: 'gauge',
center: ['66%', '33%'], // 默认全局居中
radius: '50%',
min:0,
max:7,
startAngle:135,
endAngle:-45,
splitNumber:7,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 8
}
},
axisTick: { // 坐标轴小标记
length:12, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
splitLine: { // 分隔线
length:20, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto'
}
},
pointer: {
width:3
},
title: {
offsetCenter: ['0', '-20%'], // x, y，单位px
fontSize: 14,
color:'gray'
},
detail: {
offsetCenter: ['0', '35%'], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式
fontWeight: 'bolder',
fontSize: 18
}
},
data:[{value: 0, name: 'x1000 r/min'}]
},
{
name: '左下转速',
type: 'gauge',
center: ['33%', '66%'], // 默认全局居中
radius: '50%',
min:0,
max:7,
startAngle:315,
endAngle:135,
splitNumber:7,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 8
}
},
axisTick: { // 坐标轴小标记
length:12, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
splitLine: { // 分隔线
length:20, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto'
}
},
pointer: {
width:3
},
title: {
offsetCenter: ['0', '20%'], // x, y，单位px
fontSize: 14,
color:'gray'
},
detail: {
offsetCenter: ['0', '-35%'], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式
fontWeight: 'bolder',
fontSize: 18
}
},
data:[{value: 0, name: 'x1000 r/min'}]
},
{
name: '右下转速',
type: 'gauge',
center: ['66%', '66%'], // 默认全局居中
radius: '50%',
min:7,
max:0,
startAngle:45,
endAngle:-135,
splitNumber:7,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 8,
color: [[0.2, '#c23531'], [0.8, '#63869e'], [1, '#91c7ae']]
}
},
axisTick: { // 坐标轴小标记
length:12, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
splitLine: { // 分隔线
length:20, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto'
}
},
pointer: {
width:3
},
title: {
offsetCenter: ['0', '20%'], // x, y，单位px
fontSize: 14,
color:'gray'
},
detail: {
offsetCenter: ['0', '-35%'], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式
fontWeight: 'bolder',
fontSize: 18
}
},
data:[{value: 0, name: 'x1000 r/min'}]
}
]
};
setInterval(function (){
panel_option.series[0].data[0].value = 1;
panel_option.series[1].data[0].value = 1;
panel_option.series[2].data[0].value = 1;
panel_option.series[3].data[0].value = 1;
panel_agvid.setOption(panel_option,true);
},2000);
只要再设置一个js全局变量对象就可以实现仪表盘数值的实时更新！
Echarts——更改仪表盘方向和颜色的更多相关文章
- echarts更改折线图区域颜色、折线颜色、折点颜色
series : [ { name:'订单流入总数', type:'line', stack: '总量', areaStyle: { normal: { color: '#8cd5c2' //改变区域 ...
- [转]如何在Windows 10中更改文件夹背景颜色
ini文件.我们甚至可以使用相同的技术将图片设置为文件夹背景. 已有工具可以更改Windows 7中Windows资源管理器背景的颜色,并将图像设置为Windows 7中的文件夹背景,但这些工具与Wi ...
- []如何在Windows 10中更改文件夹背景颜色
ini文件.我们甚至可以使用相同的技术将图片设置为文件夹背景. 已有工具可以更改Windows 7中Windows资源管理器背景的颜色,并将图像设置为Windows 7中的文件夹背景,但这些工具与Wi ...
- C# Word中设置/更改文本方向
C# Word中设置/更改文本方向 一般情况下在Word中输入的文字都是横向的,今天给大家分享两种方法来设置/更改一个section内的所有文本的方向及部分文本的方向,有兴趣的朋友可以试下. 首先,从 ...
- 如何更改Audition的界面颜色
如何更改Audition的界面颜色_百度经验 https://jingyan.baidu.com/article/77b8dc7fce2c6a6174eab6f6.html
- echarts更改坐标轴文字颜色及大小
xAxis: { data: anameArr, axisLabel: { show: true, textStyle: { color: '#c3dbff', //更改坐标轴文字颜色 fontSiz ...
- echarts更改轴线颜色
xAxis : [ { type : 'category', data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月 ...
- ios上 更改 状态栏(UIStatusBar)的颜色，你值得一看、收藏
IOS上 关于状态栏的相关设置(UIStatusBar) 知识普及 ios上状态栏 就是指的最上面的20像素高的部分 状态栏分前后两部分,要分清这两个概念,后面会用到: 前景部分:就是指的显示电池.时 ...
- echarts之词云随机颜色的配置
echarts中的词云字体产生随机颜色,最主演的是要引入worldcloud.js,另外还要有jquery.js文件与echarts.js文件的引入,通过配置即可实现词云随机颜色的产生.下面为大家介绍 ...
随机推荐
- bcc-tools工具之profile
profile是用于追踪程序执行调用流程的工具,类似于perf中的-g指令 相比perf -g而言,profile功能化更加细分,可以根据需要选择追踪层面,例如-U(用户要调用流程) -K (内核态调 ...
- Linux/Mac中alias的使用
最近在设置代理的时候,每次手写不方便,想起linux有个alias命令可以用,防止忘记,这边记录一下 一.alias 设置 1.设置别名 proxy # 1. # 设置别名前,使用 `type 自定义 ...
- Java中JNI的使用详解第四篇:C/C++中创建Java对象和String字符串对象及对字符串的操作方法
首先来看一下C/C++中怎么创建Java对象:在JNIEnv中有两种方法是用来创建Java对象的: 第一种方法: jobject NewObject(jclass clazz , jmethodI ...
- NOIp2018集训test-9-22(am/pm) (联考三day1/day2)
szzq学长出的题,先orz一下. day1 倾斜的线 做过差不多的题,写在我自己的博客里,我却忘得一干二净,反而李巨记得清清楚楚我写了的. 题目就是要最小化这个东西 $|\frac{y_i-y_j} ...
- 李宏毅机器学习课程---2、Regression - Case Study
李宏毅机器学习课程---2.Regression - Case Study 一.总结 一句话总结: 分类讨论可能是比较好的找最佳函数的方法:如果 有这样的因素存在的话 模型不够好,可能是因素没有找全 ...
- nagios监控实用教程
nagios监控实用教程 Nagios作为开源网络监视工具,它不但可以有效的监控内存.流量.数据库使用情况.它还可以Windows.Linux主机状态.本专题收录了有关Nagios监控相关文章,供大家 ...
- 基于Netty的RPC架构学习笔记（十）：自定义数据包协议
文章目录 数据包简介 粘包.分包现象 数据包格式 举个
- Java & 架构硬核福利，速度上车！
极客时间福利时间! 最近,栈长每周都会给大家带来极客时间的专栏拼团优惠,给错过优惠的朋友一个再次优惠上车的机会. <从0开始学架构>和<Java核心技术36讲>,这两个专栏很火 ...
- Spring Boot 文件下载
1. 文件下载类 import javax.servlet.http.HttpServletResponse; import java.io.*; public class DownloadUtil ...
- 转——调试寄存器 原理与使用：DR0-DR7
下面介绍的知识性信息来自intel IA-32手册(可以在intel的开发手册或者官方网站查到),提示和补充来自学习调试器实现时的总结. 希望能给你带去有用的信息. (DRx对应任意的一个调试寄存器. ...