yyl
1 year ago
6 changed files with 111 additions and 149 deletions
@ -1,10 +0,0 @@ |
|||
import request from '@/utils/request' |
|||
|
|||
|
|||
export function onMessage(data) { |
|||
return request({ |
|||
url: '/phoneSpk/onMessage', |
|||
method: 'post', |
|||
data: data |
|||
}) |
|||
} |
|||
@ -1,144 +1,105 @@ |
|||
|
|||
import * as echarts from "echarts"; |
|||
let color = ['#4278F8F9', 'transparent','#5372C4F9', 'transparent', '#0046FFF9', 'transparent','#FB9434F9', 'transparent','#854101F9', 'transparent', '#05E599F9', 'transparent','#219F73F9', 'transparent','#7CEDD5F9', 'transparent',]; |
|||
let colorend = ['#4278F800', 'transparent', '#5372C400', 'transparent','#0046FF00', 'transparent', '#FB943400', 'transparent','#85410100', 'transparent','#05E59900', 'transparent','#219F7300', 'transparent','#7CEDD500', 'transparent',]; |
|||
|
|||
var options = { |
|||
title: { |
|||
x: "center", |
|||
top: 10, |
|||
}, |
|||
tooltip: { |
|||
formatter: "{a} <br/>{b} : {c}%", |
|||
show:false, |
|||
trigger: 'item', |
|||
formatter: '{a} <br/>{b}: {c} ({d}%)' |
|||
}, |
|||
legend: { |
|||
orient: 'vertical', |
|||
right: 10, |
|||
itemStyle:{ |
|||
color:"#fff", |
|||
}, |
|||
data: ['客1', '18-22℃', '18℃以下', '数据异常', |
|||
'阀开', '强开', '阀关', '强关', '损坏'] |
|||
}, |
|||
series: [ |
|||
|
|||
|
|||
// 内圆
|
|||
{ |
|||
type: "pie", |
|||
radius: ["0", "40%"], |
|||
center: ["50%", "50%"], |
|||
hoverAnimation: false, |
|||
z: 3, |
|||
data: [ |
|||
{ |
|||
value: [20], |
|||
itemStyle: { |
|||
normal: { |
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ |
|||
offset: 0, |
|||
color: "#205b78", |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "#205b7800", |
|||
}, |
|||
]), |
|||
opacity: 1, |
|||
}, |
|||
}, |
|||
label: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
], |
|||
labelLine: { |
|||
show: false, |
|||
name: '温度区间', |
|||
type: 'pie', |
|||
selectedMode: 'single', |
|||
radius: [0, '50%'], |
|||
label: { |
|||
normal: { |
|||
position: 'inner', |
|||
show: true, |
|||
color:'#fff', |
|||
fontSize:14, |
|||
formatter: '{b}\n{c}辆', |
|||
} |
|||
}, |
|||
}, |
|||
{ |
|||
type: "pie", |
|||
radius: ["0", "2%"], |
|||
center: ["50%", "50%"], |
|||
hoverAnimation: false, |
|||
z: 7, |
|||
data: [ |
|||
{ |
|||
value: [20], |
|||
itemStyle: { |
|||
color:'#fff' |
|||
}, |
|||
label: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
{value: 2290, name: '客车\n'}, |
|||
{value: 1020, name: '货车\n'}, |
|||
{value: 3000, name: '专项车\n'}, |
|||
], |
|||
labelLine: { |
|||
show: false, |
|||
}, |
|||
color:['#708FFF','#FB9434','#219F73'] |
|||
}, |
|||
|
|||
|
|||
{ |
|||
name: "wrap", |
|||
type: "gauge", |
|||
min: 0, |
|||
max: 100, |
|||
z:5, |
|||
splitNumber: 5, |
|||
axisLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
width: 10, |
|||
shadowBlur: 0, |
|||
color: [ |
|||
[0.6, "#FF5A62"], |
|||
[0.8, "#23E7B2"], |
|||
[1, "#0294FF"], |
|||
], |
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
distance: -40, |
|||
textStyle: { |
|||
color: "#d0d0d0", |
|||
}, |
|||
}, |
|||
axisTick: { |
|||
show: true, |
|||
splitNumber: 1, |
|||
length: 3, |
|||
distance: 4, |
|||
lineStyle: { |
|||
color: "#d0d0d0", |
|||
}, |
|||
}, |
|||
splitLine: { |
|||
show: false, |
|||
name: '', |
|||
type: 'pie', |
|||
radius: ['60%', '70%'], |
|||
label: { |
|||
position: 'inner', |
|||
show: false |
|||
}, |
|||
|
|||
data: [ |
|||
{value: 13456, name: '客1'}, |
|||
{value: 2000, name: ''}, |
|||
{value: 13456, name: '客2'}, |
|||
{value: 2000, name: ''}, |
|||
{value: 13456, name: '客3'}, |
|||
{value: 2000, name: ''}, |
|||
{value: 13456, name: '货1'}, |
|||
{value: 2000, name: ''}, |
|||
{value: 13456, name: '货2'}, |
|||
{value: 2000, name: ''}, |
|||
{value: 13456, name: '专1'}, |
|||
{value: 2000, name: ''}, |
|||
{value: 13456, name: '专2'}, |
|||
{value: 2000, name: ''}, |
|||
{value: 13456, name: '专3'}, |
|||
{value: 2000, name: ''}, |
|||
], |
|||
itemStyle: { |
|||
normal: { |
|||
color: "#24D8E7", //指针颜色
|
|||
borderRadius: "5", |
|||
borderWidth:0, |
|||
borderType:"solid", |
|||
borderCap:"round", |
|||
borderJoin:"round", |
|||
borderColor:"#064258", |
|||
borderMiterLimit:"20", |
|||
color: function(params) { |
|||
return { |
|||
type: 'linear', |
|||
x: 0, |
|||
y: 0, |
|||
x2: 1, |
|||
y2: 1, |
|||
colorStops: [{ |
|||
offset: 0, |
|||
color: color[params.dataIndex] // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: colorend[params.dataIndex] // 100% 处的颜色
|
|||
} |
|||
], |
|||
globalCoord: false // 缺省为 false
|
|||
} |
|||
} |
|||
}, |
|||
}, |
|||
pointer: { |
|||
width: 4, |
|||
length: "80%", |
|||
color:['#009688','#63BA79','#FFB800','#F7ED46','#666666'] |
|||
} |
|||
] |
|||
} |
|||
|
|||
},data: [{ |
|||
value: 63, |
|||
}], |
|||
detail: { |
|||
formatter: function (params) { |
|||
return ( |
|||
"{number|" + |
|||
params + |
|||
"}{unit|" + |
|||
"辆}"); |
|||
}, |
|||
rich:{ |
|||
number:{ |
|||
fontSize: 20, |
|||
padding: 5, |
|||
},unit:{ |
|||
fontSize: 12, |
|||
} |
|||
}, |
|||
color: "#1de8af", |
|||
offsetCenter: ["0%", "100%"], |
|||
} |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
export default options; |
|||
|
|||
Loading…
Reference in new issue