function drawWholeInstrument(chartData) {
console.log(chartData)
if (Number.isNaN(chartData)) {
chartData = 100
}
var instrument = {
'cn': {
"text": "当前网络健康度",
"answer_great": "优秀",
"answer_good": "良好",
"answer_common": "一般"
},
'en': {
"text": "The current network health",
"answer_great": "great",
"answer_good": "good",
"answer_common": "common"
}
}
var wholeInstrumentDiagramDom = document.getElementById('whole_instrument_diagram')
var wholeInstrumentEcharts = echarts.init(wholeInstrumentDiagramDom);
console.log(wholeInstrumentEcharts)
var wholeInstrumentOption = {
series: [{
type: 'gauge',
startAngle: 200,
endAngle: -20,
radius: '80%', //仪表大小
pointer: {
show: true,
icon: 'circle',
length: "197%",
width: 10,
itemStyle: {
color: "green",
}
},
axisLine: {
lineStyle: {
width: 4,
color: [
[1, 'green']
]
}
},
axisTick: {
show: false
},
splitLine: {
show: false,
},
axisLabel: {
show: false
},
title: {
show: false
},
detail: {
valueAnimation: true,
fontSize: 16,
offsetCenter: [0, 80],
formatter: instrument[lang].text
},
data: [{
value: chartData
}]
},
{
type: 'gauge',
radius: '70%', //仪表大小
startAngle: 200,
endAngle: -20,
pointer: {
show: false,
},
axisLine: {
lineStyle: {
width: 15,
color: [
[1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0.1,
color: 'red'
},
{
offset: 0.5,
color: 'yellow'
},
{
offset: 1,
color: 'green'
}
])]
]
}
},
axisTick: {
show: false
},
splitLine: {
distance: -15,
length: 15,
lineStyle: {
color: '#fff',
width: 4
}
},
axisLabel: {
show: false,
},
detail: {
valueAnimation: true,
offsetCenter: [0, 50],
fontSize: 16,
formatter: function (value) {
if (value >= 0 && value < 60) {
return instrument[lang].answer_common;
} else if (value >= 60 && value < 80) {
return instrument[lang].answer_good;
} else if (value >= 80 && value <= 100) {
return instrument[lang].answer_great;
}
},
},
data: [{
value: chartData // chartData是个number
}]
}
]
};
wholeInstrumentOption && wholeInstrumentEcharts.setOption(wholeInstrumentOption);
}
function drawSingleDeviceInstrument(chartData) {
var singleInstrument = {
cn: {
good: '优',
average: "良",
bad: '差'
},
en: {
good: "dood",
average: "average",
bad: 'bad'
}
}
var singleDeviceInstrumentDom = document.getElementById('single_device_instrument');
var singleDeviceInstrumentEchart = echarts.init(singleDeviceInstrumentDom)
var singleDeviceInstrumentOption;
singleDeviceInstrumentOption = {
series: [
{
type: 'gauge',
startAngle: 200,
endAngle: -20,
radius: '80%', //娴狅拷鐞涖劌銇囩亸锟?
progress: {
show: true,
itemStyle: {
color: '#faac31'
},
},
// clockwise: false,
pointer: {
show: false,
},
axisLine: {
lineStyle: {
width: 4,
color: [
[1, '#eee']
]
},
},
axisTick: {
show: false
},
splitLine: {
show: false,
},
axisLabel: {
show: false
},
title: {
show: false
},
detail: {
valueAnimation: true,
height: '18',
width: 30,
lineHeight: '18',
fontSize: 18,
backgroundColor: "#f3a22b",
borderRadius: [19, 19, 19, 19],
color: '#fff',
offsetCenter: [0, '50%'],
formatter: function (value) {
if (value >= 80) {
return singleInstrument[lang].good
} else if (value > 60 && value < 80) {
return singleInstrument[lang].average
} else {
return singleInstrument[lang].bad
}
}
},
data: [
{
value: chartData
}
]
}
]
}
singleDeviceInstrumentOption && singleDeviceInstrumentEchart.setOption(singleDeviceInstrumentOption);
}
