//圆形echarts占比
makeUpEcharts(el, makeUp_val) {
let color = ['#EAF1FF', '#73A0FA'];//圆环两色
let echartData = [{
value: 100 - makeUp_val
},
{
value: makeUp_val
}
];
let formatNumber = function(num) {
let reg = /(?=(\B)(\d{3})+$)/g;
return num.toString().replace(reg, ',');
}
let total = echartData.reduce((a, b) => {
return b.value + '%'
}, 0);
var option = {
color: color,
title: [{
text: '{val|' + formatNumber(total) + '}',
top: 'center',
left: 'center',
textStyle: {
rich: {
val: {
fontSize: 16,
fontWeight: 'bold',
color: '#73A0FA',//圆环中心文字字体颜色
}
}
}
}],
series: [{
type: 'pie',
radius: ['60%', '90%'], //控制圆环大小
center: ['50%', '50%'], //控制圆环位置
data: echartData,
hoverAnimation: false,
itemStyle: {
normal: {
borderWidth: 2
}
},
labelLine: {
normal: {
length: 0,
length2: 0,
lineStyle: {
color: '#e6e6e6'
}
}
}
}]
};
let myChart = echarts.init(this.$refs[el]);
myChart.setOption(option)
},
echarts显示环形数据占比
最新推荐文章于 2023-06-28 21:40:33 发布
这段代码展示了如何使用Echarts库创建一个圆形占比图表,包括设置圆环颜色、数据处理、格式化数字以及配置项如pie的半径、位置、边框宽度等。圆环由两个部分组成,分别用不同颜色表示,并在圆心显示百分比值。
摘要由CSDN通过智能技术生成