这里写自定义目录标题
欢迎使用Markdown编辑器
中间显示统计数据,效果图如下
代码
var dataValue = [[
{ name: '正常', value: 10098},
{ name: '外勤', value: 1231 },
{ name: '迟到', value: 991 },
{ name: '早退', value: 811 },
{ name: '未打卡', value:897 }]];
var avnd = 0;
var option = {
legend: {
bottom: '1%',
left: 'center'
},
graphic: {
type: 'text',
left: 'center',
top: 'center',
style: {
text:
'总人数' +
'\n\n' +
String(
dataValue.map((item) => {
item.forEach((e) => {
avnd += e.value;
});
avnd = avnd.toFixed();
return avnd;
})
),
textAlign: 'center',
fill: '#333',
width: 50,
height: 20,
fontSize: 14
}
},
series: dataValue.map(function (data, idx) {
return {
type: 'pie',
radius: ['50%', '70%'],
//top: '32%',
//height: '33.33%',
left: 'center',
// width: 400,
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
color: ['#5daf34', '#e6a23c', '#f38989', '#fb5e22', '#409eff'],
label: {
alignTo: 'edge',
formatter: '{name|{b}}\n{time|{c} 人}',
minMargin: 10,
edgeDistance: 5,
lineHeight: 20,
rich: {
time: {
fontSize: 12,
color: '#999'
}
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < myChart.getWidth() / 10;
const points = params.labelLinePoints;
// Update the end point.
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
},
data: data
};
})
};
myChart.setOption(option);