效果图:
代码:
var color_1 = ["#fe6249", "#e39c49", "#ffc184", "#fdffe2"];
var data_1 = [
{name:'三级风险数量',value:0},
{name:'四级风险数量',value:0},
{name:'五级风险数量',value:1},
{name:'六级风险数量',value:2}
];
pie("main2", "风险", color_1, data_1);
// id: 图表容器元素 str
// title: 标题 str
// data: 数据 arr
// color: 图例颜色和饼状图各区域颜色 arr
function pie(id, title, color, data) {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById(id));
myChart.clear();
myChart.showLoading();
var option = {
// 标题设置
title : {
text: title,
x: 'center',
y: 'center',
textStyle: {
fontSize: 26,
color: '#fff',
fontWeight: 'nomal'
}
},
// 提示
tooltip: {
trigger: 'item',
formatter: "{b} : {c} ({d}%)"
},
color: color,
// 图例
legend: {
orient: 'vertical',
x: '10%',
y: 'center',
// 设置图例形状
icon: 'circle',
itemWidth: 16, // 设置宽度
itemHeight: 16, // 设置高度
textStyle:{
color:"#fff",
fontSize: 14,
},
formatter: function(params) {
var legendIndex = 0;
data.forEach(function (v, i) {
if (v.name == params) {
legendIndex = i;
}
});
return params + " " + data[legendIndex].value;
}
},
calculable : true,
series : [
{
type:'pie',
itemStyle : {
normal : {
label : {
show : false
},
labelLine : {
show : false
}
},
emphasis : {
label : {
show : false
}
}
},
radius : ['50%', '70%'],
// 设置饼状图在画布中的位置
center: ['50%', '50%'],
data: data
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
myChart.hideLoading();
//隐藏加载动画
};