易网时代-编程资源站
易网时代-编程资源站 // 获取生产环节仪表盘图
getschj: function() {
var chartDom = document.getElementById('schj');
var myChart = echarts.init(chartDom);
var option;
option = {
series: [{
type: 'gauge',//type 属性
axisLine: {//仪表盘轴线相关配置。
lineStyle: {
width: 10,
color: [
[0.2, 'red'],
[0.4, new echarts.graphic.LinearGradient(
0, 1, 0, 0,
[{
offset: 0,
color: 'red'
}, {
offset: 0.8,
color: 'rgb(235,205,6)'
}]
)],
[0.6, new echarts.graphic.LinearGradient(
0, 1, 0, 0,
[{
offset: 0,
color: 'rgb(235,205,6'
}, {
offset: 0.8,
color: 'yellow'
}]
)],
[0.8, new echarts.graphic.LinearGradient(
0, 1, 0, 0,
[{
offset: 0,
color: 'rgb(13,211,97)'
}, {
offset: 0.8,
color: 'yellow'
}]
)],
[1, new echarts.graphic.LinearGradient(
0, 1, 0, 0,
[{
offset: 0,
color: 'blue'
}, {
offset: 0.8,
color: 'rgb(13,211,97)'
}]
)],
],
}
},
pointer: {//仪表盘指针。
icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
length: '100%',
width: 3,
offsetCenter: [0, '0%'],
itemStyle: {
color: '#fff'
}
},
axisTick: {//仪表盘中刻度的样式。
length: 0,
lineStyle: {
color: '#3DCBF4',
width: 2
}
},
splitLine: {//仪表盘分隔线样式。
length: 4,
lineStyle: {
color: '#3DCBF4',
width: 1
}
},
axisLabel: {//设置仪表盘的刻度标签。
show: false
},
title: {//仪表盘标题。
offsetCenter: [0, '60%'],
fontSize: 10,
color: '#fff'
},
detail: {//仪表盘详情，用于显示数据。
fontSize: 16,
offsetCenter: ['0%', '100%'],
valueAnimation: true,
formatter: function(value) {
return Math.round(value) + '%';
},
color: '#fff'
},
data: [{
value: 89,
name: '合格率'
}]
}]
};
option && myChart.setOption(option);
},