说起来,基本不用echarts...
饼图内圈
横向柱状图(圆角+渐变): https://blog.csdn.net/maxwell0401/article/details/72861035
function getIndexRichStyle(config = {}) { return Object.assign({ align: 'center', color: 'rgb(199,86,83)', width: 27, height: 22, borderWidth: 1, borderColor: 'rgb(199,86,83)' }, config); } const levelStyleMap = { 0 : '{a|1}', 1 : '{b|2}', 2 : '{c|3}', }; var option = { xAxis: { show: false }, yAxis: { type: 'category', data: ['倒萨倒萨撒旦', '倒萨倒萨', '小阿斯顿赵', '小重传马', '撒旦', '小张', '小实时'], inverse: true, axisLine: { show: false, }, axisTick: { show: false, }, axisLabel: { formatter(value, index) { return levelStyleMap[index] || `{index|${index}}`; }, rich: { index: getIndexRichStyle(), a: getIndexRichStyle({ color: 'red', borderColor: 'red' }), b: getIndexRichStyle({ color: 'green', borderColor: 'green' }), c: getIndexRichStyle({ color: 'blue', borderColor: 'blue' }), }, }, }, series: [{ type: 'bar', data: [3100, 2142, 1218, 581, 431, 383, 163], barWidth: 22, label: { show: true, position: 'insideLeft', offset: [5, 0], formatter(params) { return params.name; }, }, itemStyle: { barBorderRadius: 8, borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: '#fff' }, { offset: 1, color: 'yellow' }]) }, }] };