仅做个人收藏记录。
1. 双层饼图
let htjc_option4_data = [
{ value: 78, name: '网上申请合同数', textStyle: { color: '#28b1ff' } },
{ value: 22, name: '线下申请合同数', textStyle: { color: '#1ae562' } },
];
option={
tooltip: {
trigger: 'item'
},
color: ['#28b1ff', '#1ae562'],
legend: {
data: [{
name: '网上申请合同数',
textStyle: {
color: '#28b1ff'
}
}, {
name: '线下申请合同数',
textStyle: {
color: '#1ae562'
}
}],
orient: 'vertical',
right: '5%',
top: '5%',
itemGap: 25,
itemWidth: 14,
itemHeight: 14,
textStyle: {
color: 'auto',
fontSize: 14,
padding: [0, 0, 0, 5],
rich: {
name: {
fontSize: 14,
color: '#fff'
},
b: {
fontSize: 14,
color: 'auto',
fontWeight: 'bold'
},
v: {
fontSize: 14,
color: 'auto',
fontWeight: 'bold'
}
}
},
icon: 'rect',
formatter: name => {
var data = htjc_option4.series[0].data;
var total = 0;
var tarValue;
for (var i = 0; i < data.length; i++) {
total += data[i].value;
if (data[i].name == name) {
tarValue = data[i].value;
}
}
var v = tarValue;
var b = Math.round((tarValue / total) * 100);
return '{name|' + name + '}' + ' ' + "{b| " + b + "%}" + ' ' + "{v| " + v + "万平方米}";
}
},
series: [
{
type: 'pie',
radius: ['35%', '55%'],
center: ['35%', '62%'],
label: {
show: false,
},
labelLine: {
show: false
},
data: htjc_option4_data
}, {
type: 'pie',
radius: ['55%', '65%'],
center: ['35%', '62%'],
hoverAnimation: false,
label: {
normal: {
show: false,
},
emphasis: {
show: false,
},
},
labelLine: {
normal: {
show: false,
},
emphasis: {
show: false,
},
},
animation: false,
tooltip: {
show: false,
},
data: [
{
value: 1,
itemStyle: {
color: "rgba(255,255,255,0.2)",
},
},
],
}
]
}
2.
var ecologicalOption = {
tooltip: {
show: false
},
color: ['#2a2ac7', '#3657c8', '#53b1f9'],
legend: {
left: 'center',
top: 20,
itemGap: 20,
textStyle: {
color: '#fff',
fontSize: 12
}
},
series: [
{
type: 'pie',
radius: '55%',
// top: '6%',
data: [
{ value: 1048, name: '供地盘活' },
{ value: 735, name: '转让盘活' },
{ value: 580, name: '增容改进' }
],
label: {
normal: {
show: true,
formatter: '{b|{b}}\n{d|{d}%}',
rich: {
b: {
color: '#fff',
fontSize: 12,
align: 'center',
padding: [0, 0, 5, 0]
},
c: {
fontSize: 12,
color: '#10d0f5',
fontWeight: '700'
},
d: {
fontSize: 12,
color: '#baeaf3',
fontWeight: '700'
}
}
}
},
labelLine: {
normal: {
show: true,
length: 20,
length2: 50,
lineStyle: {
color: '#3874b5',
width: 2
}
}
}
}
]
}