echarts仪表盘option_echarts仪表盘完整代码
var option = {
backgroundColor: '#00162a',
title: [{
x: "40%",
y: "53%",
text: '主干道平均車速:36km/h',
textStyle: {
fontWeight: 'normal',
fontSize: 16,
color: "#fff"
},
}],
series: [
{
name: "",
type: 'gauge',
min: 0,
max: 10,
radius: "80%",
splitNumber: 1, //刻度數量
startAngle: 180,
endAngle: 0,
axisLine: { // 坐標軸線
lineStyle: { // 屬性lineStyle控制線條樣式
width: 60,
color: [
[1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#3aa600'
}, {
offset: 1,
color: '#f70700'
}])]
],
}
},
splitLine: {
show: false,
},
axisLabel: {
show: true,
color: "#fff",
formatter: "{value}",
distance: 40,
padding: [-20, 0, 0, 0],
fontSize: 16
},
axisTick: {
show: false
},
pointer: {
show: true,
length: '82%',
width: 2,
},
itemStyle: {
color: '#0782f9'
},
title: {
show: false,
},
detail: {
offsetCenter: [0, '-35%'],
textStyle: {
color: '#8bd100',
fontSize: 48,
fontWeight: 500
}
},
data: [{
value: 3.5, //指針數值
}]
},
{
name: '擁堵程度',
type: 'gauge',
z: 2,
min: 0,
max: 10,
splitNumber: 25,
startAngle: 0,
endAngle: 180,
radius: '80%',
axisLine: {
show: false,
lineStyle: {
width: 0
}
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
color: '#ffffff',
fontSize: 14,
rotate: '40',
formatter: function(e){
switch (e + "") {
case "0.8":
return "暢";
case "1.2":
return "通";
case "2.4":
return "輕";
case "2.8":
return "度";
case "3.2":
return "擁";
case "3.6":
return "堵";
case "4.4":
return "中";
case "4.8":
return "度";
case "5.2":
return "擁";
case "5.6":
return "堵";
case "6.4":
return "中";
case "6.8":
return "度";
case "7.2":
return "擁";
case "7.6":
return "堵";
case "8.4":
return "嚴";
case "8.8":
return "重";
case "9.2":
return "擁";
case "9.6":
return "堵";
// default:
// return e;
}
},
},
splitLine: { // 分隔線
show: false,
length: 19,
lineStyle: { // 屬性lineStyle(詳見lineStyle)控制線條樣式
color: 'blue',
width: 1
}
},
detail: {
show: false,
},
data: [],
clockwise: false
},
{
name: '刻度',
type: 'gauge',
radius: "80%",
startAngle: 144,
endAngle: 36,
center: ['50%', '50%'],
min: 2,
max: 8,
splitNumber: 3,
axisLine: { // 坐標軸線
lineStyle: { // 屬性lineStyle控制線條樣式
width: 60,
color: [
[1, 'rgba(0,0,0,0)']
]
}
},
axisLabel: {
show: true,
fontSize: 18,
color: '#ffffff'
},
axisTick: {
show: false,
splitNumber: 10,
lineStyle: {
color: '#707070', //用顏色漸變函數不起作用
width: 1
},
length: -10
},
splitLine: {
show: true, //改１
length: 62,
lineStyle: { // 屬性lineStyle(詳見lineStyle)控制線條樣式
color: '#ffffff',
width: 1
}
},
pointer: {
show: false
}
},
{
"name": '指針小圓形', //裝飾作用
"type": 'pie',
"hoverAnimation": false,
"legendHoverLink": false,
"radius": ['0%', '1%'],
"center": ['50%', '50%'],
"z": 10,
"label": {
"normal": {
"show": false,
"position": 'center'
},
"emphasis": {
"show": false
}
},
"labelLine": {
"normal": {
"show": false
}
},
"data": [{
"value": 0,
"name": '1',
itemStyle: {
normal: {
color: "red"
}
}
}, {
"value": 100,
"name": '2',
itemStyle: {
normal: {
color: "#0782f9"
},
emphasis: {
color: "#0782f9"
}
}
}]
},
{
name: '外層輔助線',
type: 'gauge',
z: 1,
min: 0,
max: 10,
splitNumber: 5,
startAngle: 0,
endAngle: 180,
radius: '85%',
axisLine: { // 坐標軸線
lineStyle: { // 屬性lineStyle控制線條樣式
width: 4,
color: [
[1, '#0666c9']
],
opacity: 1
}
},
axisTick: {
show: false
},
axisLabel: {
show: false,
},
splitLine: { // 分隔線
show: false,
length: 15,
},
detail: {
show: false,
},
data: [],
clockwise: false
},
{
"name": '背景',
"type": 'pie',
"hoverAnimation": false,
"legendHoverLink": false,
radius: '66%',
center: ['50%', '50%'],
"z": 0,
"startAngle": 180,
"label": {
"normal": {
"show": false,
"position": 'center'
},
"emphasis": {
"show": false,
}
},
"labelLine": {
"normal": {
"show": false
}
},
"data": [{
"value": 50,
"name": '1',
itemStyle: {
normal: {
color: "#021a30"
},
}
}, {
"value": 50,
"name": '2',
itemStyle: {
normal: {
color: "rgba(0,0,0,0)"
}
}
}]
},
]
};
總結
以上是生活随笔為你收集整理的echarts仪表盘option_echarts仪表盘完整代码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python输入两个变量的值、输出大的_
- 下一篇： 单片机彩灯移动实验_单片机课程设计彩灯实