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文件的引入,通过配置即可实现词云随机颜色的产生.下面为大家介绍 ...
随机推荐
- thinkphp模块设计
3.2发布版本自带了一个应用目录结构,并且带了一个默认的应用入口文件,方便部署和测试,默认的应用目录是Application(实际部署过程中可以随意设置). 通常情况下3.2无需使用多应用模式,因为大 ...
- jar中没有主清单属性【解决办法】
<plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compi ...
- NX二次开发-直线分析函数UF_EVAL_ask_line与NXOpen::Line直线分析的用法
NX11+VS2013 #include <NXOpen/Line.hxx> #include <NXOpen/NXException.hxx> #include <NX ...
- hibernate 一对多查询 对多的一方进行分页
//查询用户留言@Overridepublic List<LeaveWords> getLeaveWords(String userName) {Session session = nul ...
- Java-Class-C：com.alibaba.fastjosn.JSON
ylbtech-Java-Class-C:com.alibaba.fastjosn.JSON 1.返回顶部 1.1.import com.alibaba.fastjson.JSON;import co ...
- D.Country Meow 最小球覆盖 三分套三分套三分 && 模拟退火
// 2019.10.3 // 练习题:2018 ICPC 南京现场赛 D Country Meow 题目大意 给定空间内 N 个点,求某个点到 N 个点的距离最大值的最小值. 思路 非常裸的最小 ...
- spark1.0.2读取hbase（CDH0.96.1）上的数据
基本环境: 我是在win7环境下,spark1.0.2,HBase0.9.6.1 使用工具:IDEA14.1, scala 2.11.6, sbt.我现在是测试环境使用的是单节点 1.使用IDEA创建 ...
- 5、Docker数据管理
为了能够存储持久化数据以及共享容器间的数据,Docker提出了Volume的概念.让我们通过类似mount的方式将宿主机的文件或者目录挂载到容器中. 在容器中管理数据主要有两种方式: 数据卷(Data ...
- Algo: maxSubArray vs. maxProduct
这两个问题类似,都可利用动态规划思想求解. 一.最大连续子序列和 https://leetcode.com/problems/maximum-subarray/description/ https:/ ...
- [转]nginx简易教程
安装 nginx官网下载地址 发布版本分为 Linux 和 windows 版本. 也可以下载源码,编译后运行. 从源代码编译 Nginx 把源码解压缩之后,在终端里运行如下命令: $ ./confi ...