先看图有个大略脑回路
如果繁多维度很好了解,所有值一填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);