先看图有个大概脑回路
如果单一维度很好理解,所有值一填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);
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。