let option = {
color: ['#ff7547', '#48dc41', '#7054ff', '#ff00a8', '#0211e7', '#00a0ff'],
tooltip: {
trigger: 'item',
},
title: {
subtext: '土地利用方式', //副标题文本
left: 'center',
top: '43%',
left: '20.5%',
subtextStyle: {
fontFamily: '微软雅黑',
fontSize: 13,
color: '#fff',
},
},
legend: {
orient: 'vertical',
type: 'scroll',
width: '50%',
pageIconColor: '#fff',
pageButtonGap: 25,
pageButtonItemGap: 25,
pageTextStyle: {
color: '#fff',
},
right: '10%',
top: 'center',
textStyle: {
color: '#cad3d9',
fontSize: 14,
},
formatter: function(name) {
let data = option.series[0].data;
// console.log(data, 'data')
let total = 0;
let tarValue;
for (let i = 0; i < data.length; i++) {
total += data[i].value;
if (data[i].name == name) {
tarValue = data[i].value;
}
}
let p = Math.round((tarValue / total) * 100) + '%';
return `${name} ${p}`;
},
icon: 'circle',
itemHeight: 8,
itemWidth: 8,
},
series: [
{
name: '',
type: 'pie',
radius: ['55%', '65%'],
center: ['30%', '53%'],
data: this.pieData,
itemStyle: {
normal: {
label: {
show: false,
},
labelLine: {
show: false,
},
},
},
},
{
//虚线圆环
type: 'gauge',
startAngle: 270,
endAngle: -89.9999,
center: ['30%', '53%'],
radius: '49%',
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
splitNumber: 40, //虚线的个数
axisLine: {
show: false,
lineStyle: {
color: [[1, 'rgba(65, 184, 131,0.8)']],
width: 20,
},
},
splitLine: {
length: 5, //每个虚线的宽度厚度
lineStyle: {
width: 3, //每个虚线的长度
color: 'rgba(65, 184, 131,0.8)',
}, //刻度节点线
},
detail: {
show: false,
},
},
],
};
echarts 圆环图 虚线装饰 中间文字
最新推荐文章于 2023-11-21 10:56:41 发布