当前位置：首页 > news >正文

echart pie label.rich 颜色设置与项目同色

news 来源：原创 2025/6/13 9:53:49

在这里插入图片描述

<v-chart ref="chartRef" :option="option" :autoresize="{ throttle: 1000 }" />

var data = [{ name: '一般风险', value: 3 },{ name: '中等风险', value: 59 },{ name: '严重风险', value: 48 },
];
const option = computed(() => {return {color: ['#28C0FF', '#FACD66', '#FF8080'],series: [// 边框的设置{name: '第一层环',type: 'pie',z: 2,tooltip: {show: false,},center: ['50%', '50%'],radius: [85, 100],hoverAnimation: false,clockWise: false,itemStyle: {normal: {color: {type: 'radial', // 径向渐变x: 0.5,y: 0.5,r: 0.9,colorStops: [{offset: 0,color: 'rgb(255,239,224)', // 0% 处的颜色},{offset: 1,color: 'rgb(255,239,224,0.3)', // 100% 处的颜色},],globalCoord: false, // 缺省为 false},},emphasis: {color: {type: 'radial',x: 0.5,y: 0.5,r: 0.9,colorStops: [{offset: 0,color: 'rgb(255,239,224)', // 0% 处的颜色},{offset: 1,color: 'rgb(255,239,224,0.3)', // 100% 处的颜色},],globalCoord: false, // 缺省为 false},},},label: {show: false,},data: [100],},// 真实数据环{type: 'pie',radius: [65, 85],// top: top + '%',height: '100%',left: 'center',width: 900,itemStyle: {borderColor: '#fff',borderWidth: 1,},label: {formatter: '{icon|●}{b|{b}} \n{hr|}\n{c} {unit|个}    {per|{d}%}  ',// backgroundColor: '#F6F8FC',// borderColor: '#8C8D8E',// borderWidth: 1,// borderRadius: 4,position: 'outer',padding: [0, 0], // 消除内边距distanceToLabelLine: 0, // 消除label和项目连线之间的距离// alignTo: 'edge',margin: 0,show: true,fontSize: 16,rich: {icon: {fontSize: 18,color: 'auto', // 使用auto是可以默认是该项目的颜色align: 'left',padding: [0, 5, 0, 0],},hr: {// borderColor: '#EFEFEF',borderColor: 'auto', // 该项目的颜色width: '100%',borderWidth: 1,height: 0,},b: {color: '#333',fontSize: 16,lineHeight: 33,align: 'left',},unit: {fontSize: 16,color: '#999',},per: {color: '#333',fontSize: 16,lineHeight: 33,},},},labelLine: {length: 20,length2: 30,maxSurfaceAngle: 80,},data: data,},],};
});