1. 甜甜圈饼图/环形图:
标签文字过长会被容器遮挡,设置成当字数大于4小于4的时候一行展示两个字
HTML
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>报警来源统计</span>
</div>
<div id="alarm_source"></div>
<div id="alarm_control"></div>
<div id="online_inspection"></div>
</el-card>
JS
mounted: function() {
this.alarmSourceChart()
this.alarmControlChart()
this.onlineInspectionChart()
});
},
methods: {
// 报警来源
alarmSourceChart() {
var that = this;
this.httpPost('admin-alarm-api/alarm-source', {
admin_user_id: admin_user_id,
admin_user_token: admin_user_token,
}, function(msg, data) {
that.doughnutChart('alarm_source',data.total,'报警来源',data.res)
})
},
// 动环辅控
alarmControlChart() {
var that = this;
this.httpPost('admin-alarm-api/sensor-alarm', {
admin_user_id: admin_user_id,
admin_user_token: admin_user_token,
}, function(msg, data) {
that.doughnutChart('alarm_control',data.sensor,'动环辅控',data.res)
})
},
// 在线检测
onlineInspectionChart() {
var that = this;
this.httpPost('admin-alarm-api/detector-alarm', {
admin_user_id: admin_user_id,
admin_user_token: admin_user_token,
}, function(msg, data) {
that.doughnutChart('online_inspection',data.total,'在线检测',data.res)
})
},
// 甜甜圈饼图模板
doughnutChart(id,title1,title2, serialData) {
echarts.dispose(document.getElementById(id));
let myChart = echarts.init(document.getElementById(id));
myChart.setOption({
color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
title:[{
text: title1,
top: '44%',
textAlign: "center",
left: "50%",
textStyle: {
color: '#7afeff',
fontSize: 30,
}
}, {
text: title2,
top: '52%',
textAlign: "center",
left: "50%",
textStyle: {
fontWeight: '600',
color: '#F0F2F5',
fontSize: 22,
}
}],
tooltip: {
trigger: 'item'
},
grid: {
left: '50%',
},
label: {
position: 'outer',
alignTo: 'edge',
margin: 0,
formatter: function(v) {
let text = v.name;
let value_format = v.value;
if (id == "jf_probability") {
value_format = value_format+'%';
} else {
value_format = value_format+'次';
}
if (text.length <= 2) {
return `${text}\n${value_format}`;
} else if (text.length > 2 && text.length <= 4) {
return text = `${text.slice(0, 2)}\n${text.slice(2)}\n${value_format}`
} else if (text.length > 4 && text.length <= 6) {
return text = `${text.slice(0, 3)}\n${text.slice(3)}\n${value_format}`
} else if (text.length > 6 && text.length <= 9) {
return text = `${text.slice(0, 3)}\n${text.slice(3, 6)}\n${text.slice(6)}\n${value_format}`
}
},
edgeDistance:'25%',
// minMargin: 5,
// edgeDistance: 10,
// lineHeight: 15,
fontSize: 15,
color: '#7afeff',
rich: {
time: {
fontSize: 15,
color: '#7afeff'
}
},
},
series: [
{
type: 'pie',
radius: ['30%', '60%'],
itemStyle: {
borderRadius: 10,
},
avoidLabelOverlap: true,//防止标签重叠
data:serialData,
emphasis: {
// 鼠标经过lable变大
// label: {
// show: true,
// fontSize: '40',
// fontWeight: 'bold'
// },
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
});
// 当我们浏览器缩放的时候,图表也等比例缩放
window.addEventListener("resize", function() {
// 让我们的图表调用 resize这个方法
myChart.resize();
});
},
}