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"; |
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 = { |
var options = { |
||||
title: { |
|
||||
x: "center", |
|
||||
top: 10, |
|
||||
}, |
|
||||
tooltip: { |
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: [ |
series: [ |
||||
|
|
||||
|
|
||||
// 内圆
|
|
||||
{ |
{ |
||||
type: "pie", |
name: '温度区间', |
||||
radius: ["0", "40%"], |
type: 'pie', |
||||
center: ["50%", "50%"], |
selectedMode: 'single', |
||||
hoverAnimation: false, |
radius: [0, '50%'], |
||||
z: 3, |
label: { |
||||
data: [ |
normal: { |
||||
{ |
position: 'inner', |
||||
value: [20], |
show: true, |
||||
itemStyle: { |
color:'#fff', |
||||
normal: { |
fontSize:14, |
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
formatter: '{b}\n{c}辆', |
||||
{ |
} |
||||
offset: 0, |
|
||||
color: "#205b78", |
|
||||
}, |
|
||||
{ |
|
||||
offset: 1, |
|
||||
color: "#205b7800", |
|
||||
}, |
|
||||
]), |
|
||||
opacity: 1, |
|
||||
}, |
|
||||
}, |
|
||||
label: { |
|
||||
show: false, |
|
||||
}, |
|
||||
}, |
|
||||
], |
|
||||
labelLine: { |
|
||||
show: false, |
|
||||
}, |
}, |
||||
}, |
|
||||
{ |
|
||||
type: "pie", |
|
||||
radius: ["0", "2%"], |
|
||||
center: ["50%", "50%"], |
|
||||
hoverAnimation: false, |
|
||||
z: 7, |
|
||||
data: [ |
data: [ |
||||
{ |
{value: 2290, name: '客车\n'}, |
||||
value: [20], |
{value: 1020, name: '货车\n'}, |
||||
itemStyle: { |
{value: 3000, name: '专项车\n'}, |
||||
color:'#fff' |
|
||||
}, |
|
||||
label: { |
|
||||
show: false, |
|
||||
}, |
|
||||
}, |
|
||||
], |
], |
||||
labelLine: { |
color:['#708FFF','#FB9434','#219F73'] |
||||
show: false, |
|
||||
}, |
|
||||
}, |
}, |
||||
|
|
||||
|
|
||||
{ |
{ |
||||
name: "wrap", |
name: '', |
||||
type: "gauge", |
type: 'pie', |
||||
min: 0, |
radius: ['60%', '70%'], |
||||
max: 100, |
label: { |
||||
z:5, |
position: 'inner', |
||||
splitNumber: 5, |
show: false |
||||
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: { |
data: [ |
||||
show: false, |
{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: { |
itemStyle: { |
||||
normal: { |
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: { |
color:['#009688','#63BA79','#FFB800','#F7ED46','#666666'] |
||||
width: 4, |
} |
||||
length: "80%", |
] |
||||
|
} |
||||
|
|
||||
},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; |
export default options; |
||||
|
|||||
Loading…
Reference in new issue