上代码!:
<script>
$.get('/get_priority_count/',function(data) {
console.log(data["ALERT"]);
var yData = [{
name: 'ALERT',
value: data['ALERT']
},
{
name: 'CRITICAL',
value: data['CRITICAL']
},
{
name: 'EMERGENCY',
value: data['EMERGENCY']
},
{
name: 'ERROR',
value: data['ERROR']
},
{
name: 'WARNING',
value: data['WARNING']
}];
var xData = [ 'CRITICAL', 'WARNING'];
// this.$nextTick(() => {
var myChart1 = echarts.init(document.getElementById('main1'))
// })
var option = {
backgroundColor: 'rgba(255, 255, 255, 1)',
// color: color,
legend: {
orient: 'vartical', //图里列表的布局朝向
x: 'left',
top: 'center',
left: '60%',
bottom: '0%',
data: xData,
itemWidth: 10,
itemHeight: 8,
itemGap: 16,
// color: color,
formatter: function(name){ //格式化图例文本 使用回调函数
return '' + name
}
},
series: [{
type: 'pie',
clockwise: false,
minAngle: 2,
radius: ['40%', '70%'],
center: ['30%', '50%'],
avoidLabelOverlap: false, //防止标签重叠
itemStyle: { //图形样式
normal: {
borderColor: '#ffffff',
borderWidth: 6,
},
},
label: {
normal: {
show: false,
position: 'center',
formatter: '{text|{b}}\n{c} ({d}%)',
rich: {
text: {
color: '#666',
fontSize: 15,
align: 'center',
verticalAlign: 'middle',
padding: 8,
},
value: {
color: '#8693f3',
fontSize: 14,
align: 'center',
verticalAlign: 'middle',
},
}
},
emphasis: {
show: true,
textStyle: {
fontSize: 24,
}
}
},
data: yData,
}]
};
myChart1.setOption(option);
})
</script>