共计 1582 个字符,预计需要花费 4 分钟才能阅读完成。
先看图有个大略脑回路
如果繁多维度很好了解,所有值一填 echarts 主动算占比。然而需要不是这样的。类型一到类型六视为 100%,其余类型视为 100%。
思路:
1、筹备两个饼图叠加 z:1 层展示类型,z:2 层展示其余类型,第一层挖走 330 度,第二层挖走 30 度留白给第一层的类型让地位。
干货 code:
var myChart = echarts.init(document.getElementById('youid'));
option = {backgroundColor: 'rgba(255, 255, 255, 0)',
title: {
left: 'center',
text: 'yourtitle',
textStyle: {
color: '#3c3c3c',
fontSize: 14,
lineHeight: 1,
fontWeight: 'bold'
},
top: 10
},
toolbox: {
feature: {saveAsImage: {}
}
},
grid: {
top: '0%',
left: '5%',
right: '5%',
bottom: '5%',
containLabel: true,
},
graphic: {
elements: [{
type: 'image',
style: {
width: 40,
height: 40
},
left: 'center',
top: 'center'
}]
},
series: [
{
name: "类型",
type: 'pie',
z:2,
minAngle: 30,
radius: ['10%', '45%'],
center: ['50%', '50%'],
color: ['#0864A1', '#FFC100', '#47B5FF', '#476DB4', '#70AD47', '#ED7D31', '#47B5FF','#FF5218'],
data: [
{
value: 0,
itemStyle: {
normal: {color: "transparent"}
}
},
{
value: 2.96,
name: '类型一'
},
{
value: 0.72,
name: '类型二'
},
{
value: 2.68,
name: '类型三'
},
{
value: 9.22,
name: '类型四'
},
{
value: 18.26,
name: '类型五'
},
{
value: 0.66,
name: '类型六'
},
],
label: {
normal: {formatter: '{c|{b}}\n{d|{d}%}',
rich: {
b: {
fontSize: 12,
color: '#12EABE',
align: 'left',
padding: 4
},
d: {
fontSize: 12,
align: 'left',
padding: 2
},
c: {
color: '#3c3c3c',
fontSize: 12,
align: 'left',
padding: 2
}
}
}
}
},
{
name: "其余类型",
type: 'pie',
minAngle: 330,
z:1,
radius: ['10%', '55%'],
center: ['50%', '50%'],
data: [
{
value: 10,
name: '其余类型',
selected:true,
},
{
value: 0,
name: '',
itemStyle: {
normal: {color: "transparent"}
}
},
],
label: {
normal: {formatter: '{c|{b}}\n{d|-16%}',
rich: {
b: {
fontSize: 12,
color: '#12EABE',
align: 'left',
padding: 4
},
d: {
fontSize: 12,
align: 'left',
padding: 2
},
c: {
color: '#3c3c3c',
fontSize: 12,
align: 'left',
padding: 2
}
}
}
}
}
]
};
// 应用刚指定的配置项和数据显示图表。myChart.setOption(option);
正文完
发表至: javascript
2021-12-10