image.png
- 代码块:
getChartOpt(data, total) {
const bgImg = new URL(`../../../../assets/imgs/安全检查记录图表背景.svg`, import.meta.url)
.href;
const option = {
title: {
// 副标题
subtext: '总检查数',
// 主副标题间距
itemGap: 10,
text: total || 0,
left: 'center',
top: '45%',
padding: [-40, 0],
textStyle: {
color: '#0591FC',
fontSize: 56,
fontFamily: 'DINAlternate-Bold',
align: 'center',
},
// 副标题样式
subtextStyle: {
fontSize: 32,
color: '#fff',
fontFamily: 'PingFangSC-Regular',
},
},
graphic: [
{
type: 'image', // 图形元素类型
right: 'center', // 根据父元素进行定位 (居中)
bottom: 'center', // 根据父元素进行定位 (0%), 如果bottom的值是 0,也可以删除该bottom属性值。
z: 0, // 层叠
bounding: 'all', // 决定此图形元素在定位时,对自身的包围盒计算方式
style: {
image: bgImg,
width: 290,
height: 290,
},
},
],
series: [
{
name: '设备类型',
type: 'pie',
radius: ['75%', '85%'],
color: this.colorList,
label: {
position: 'inner',
show: false, //指示线文字
},
labelLine: {
show: false, //知识线
length: 20,
length2: 20,
lineStyle: {
width: 2,
},
},
itemStyle: {
//设置间隙
borderWidth: 6,
borderColor: 'black',
},
data: data || [],
},
],
};
return (this.chartOpt = option);
}
网友评论