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文件的引入,通过配置即可实现词云随机颜色的产生.下面为大家介绍 ...
随机推荐
- 【锁】Innodb锁
InnoDB与MyISAM的最大不同有两点:一是支持事务(TRANSACTION):二是采用了行级锁.行级锁与表级锁本来就有许多不同之处,另外,事务的引入也带来了一些新问题.下面我们先介绍一点背景知识 ...
- Oozie框架介绍
Oozie框架: 1.Oozie英文翻译:驯象人 2.Oozie简介 一个基于工作流引擎的开源框架,由Cloudera公司贡献给Apache,提供对Hadoop Mapreduce.Pig Jobs的 ...
- NX二次开发-UFUN替换组件UF_ASSEM_use_alternate
NX9+VS2012 #include <uf.h> #include <uf_ui.h> #include <uf_assem.h> #include <u ...
- LeetCode 196. Delete Duplicate Emails (删除重复的电子邮箱)
题目标签: 题目给了我们一个 email 的表格,让我们删除重复的. 建立Person p1,Person p2,当email 相同时,而且 p1 id 要大于 p2 id 时候,删除这一行. Jav ...
- RoadFlowCore 解决方案介绍及开发概述
RoadFlow解决方案如下: RoadFlow.Business:业务层 RoadFlow.Integrate:组织机构获取层(如果你系统要使用第三方组织架构的时候修改这里面的方法即可) RoadF ...
- class9_Menubar 菜单
最终的运行效果图(程序见序号5) #!/usr/bin/env python# -*- coding:utf-8 -*-# -------------------------------------- ...
- Adobe Fireworks CS6 win64的安装
网页三大剑客之一 FW的安装 本人也是找了半天才找到的. (没有视频)这里先感谢原帖给我的链接https://blog.csdn.net/qq_38053395/article/details/ ...
- Windows下安装配置PLSQL
说明:1.PLSQL Developer是远程连接Oracle数据库的一个可视化工具,并且其不是一个独立的软件,是需要依赖Oracle客户端运行的.2.本安装教程是基于本机没有安装Oracle数据库的 ...
- maven javaProject打包发布成服务
1,现在pom.xml中添加打包所需要的jar包. <plugins> <plugin> <groupId>org.apache.maven.plugins< ...
- BBS论坛 项目表分析
一.项目表分析 from django.db import models from django.contrib.auth.models import AbstractUser # Create yo ...