1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
| var myChart = echarts.init(document.getElementById('main'));
var data = parseInt(res.data);
// 指定图表的配置项和数据
var option = {
dark: true,
backgroundColor: '#001122',
series: [
{
type: 'gauge',
progress: {
show: false,
width: 5,
itemStyle: {
color: {
type: 'radial',
global: true,
// x: 1,
// y: 0.5,
// r: 0.5,
colorStops: [
{
offset: 0,
color: 'transparent',
},
{
offset: 0.7,
color: 'transparent',
},
{
offset: 0.95,
color: 'rgba(150, 200, 255, 0.5)',
},
{
offset: 0.98,
color: 'rgba(230, 250, 255, 0.9)',
},
{
offset: 1,
color: 'rgba(255,255,255,1)',
},
],
},
},
},
axisLine: {
lineStyle: {
width: 2,
color: [
[0.8, '#fff'],
[1, 'red'],
],
},
},
axisTick: {
lineStyle: {
color: '#fff',
},
},
splitLine: {
length: 15,
lineStyle: {
width: 2,
color: '#999'
}
},
axisLabel: {
color: '#fff',
fontSize: 20,
},
anchor: {
show: true,
size: 60,
showAbove: true,
itemStyle: {
color: '#001122',
opacity: 0.9,
borderColor: 'rgba(255,255,255,0.8)',
borderWidth: 1,
shadowBlur: 30,
shadowColor: 'rgba(255, 255, 255, 0.5)',
},
},
pointer: {
offsetCenter: [0, '20%'],
icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
length: '110%',
itemStyle: {
color: 'rgba(255,255,255,0.9)',
},
},
title: {
show: false
},
detail: {
valueAnimation: true,
// formatter: '{value}\n{unit|km / h}',
offsetCenter: [0, '50%'],
rich: {
unit: {
lineHeight: 80,
color: '#fff',
fontSize: 30,
},
},
fontSize: 50,
color: '#fff',
},
data: [
{
value: data
}
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
});
|