Echarts多層同心圓以及多行圖例展示

效果：

代碼：

• 如果想要富文本生效，echarts版本需要4.0以上

<template>
	<div>
		<div class="chart" ref="preChart"></div>
	</div>
</template>

<script>
import echarts from 'echarts'
export default {
	data() {
		return {}
	},
	mounted() {
		this.getPieChart()
	},
	methods: {
		getPieChart() {
			let chartData = [
				{ name: '華北地區', value: 754 },
				{ name: '東北地區', value: 611 },
				{ name: '華東地區', value: 400 },
				{ name: '中部地區', value: 300 },
				{ name: '西部地區', value: 200 },
			]
			let total = chartData.reduce((a, b) => { return a + b.value}, 0)
			let color = [
				['rgb(19, 204, 204)','rgb(248,150,55)','rgb(247, 85, 39)','rgb(31, 137, 241)','rgb(40, 245, 154)'],
				['rgba(19, 204, 204, 0)','rgba(248, 150, 55, 0)','rgba(247, 85, 39, 0)','rgba(31, 137, 241, 0)','rgba(40, 245, 154, 0)'],
			]

			let optionData = getData(chartData)
			function getData(data) {
				var res = {series: [],yAxis: []}
				for (let i = 0; i < chartData.length; i++) {
					res.series.push({
						name: '',
						type: 'pie',
						clockWise: true, // 順時針加載
						hoverAnimation: false, // 鼠標移入變大
						radius: [75 - i * 15 + '%', 68 - i * 15 + '%'],
						center: ['50%', '50%'], // 圖標位置
						label: {
							show: true,
							formatter: '{d}%',
							color: '#000000',
							fontSize: 12,
							position: 'inside',
						},
						data: [
							{
							      value: chartData[i].value,
							      name: chartData[i].name,
							},
							{
							      value: 1000 - chartData[i].value,
							      name: chartData[i].name,
							      itemStyle: {
								      color: 'rgba(0,0,0,0)',
								      borderWidth: 0,
							      },
							      tooltip: {
								      show: false,
							      },
							      label: {
								      show: false,
							      },
							      hoverAnimation: false,
							},
						],
					})
					res.yAxis.push(chartData[i].name)
				}
				return res
			}

			let option = {
				color: color[0],
				legend: [
					{
					      orient: 'vertical',  // 圖例列表的布局朝向
					      icon: 'none', // 標記類型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'，支持自定義
					      left: '8%',
					      top: '25%',
					      align: 'center',
					      itemGap: 20, // 圖例之間的間隔，橫向布局時為水平間隔，縱向布局時為縱向間隔
					      formatter: function(name) {
						      let res = chartData.filter((v) => v.name === name)
						      let percent = ((res[0].value * 100) / total).toFixed(0)
						      return '{a|' + percent + '%}' + '\n' + '{b|' + name + '}'
					      },
					      textStyle: {
						      rich: {
							      a: {
								      fontSize: 18,
								      fontWeight: 500,
								      lineHeight: 30,
								      color: color[0],
							      },
							      b: {
								      fontSize: 12,
								      fontWeight: 500,
								      color: '#666666',
							      },
						      },
					      },
					      data: chartData.slice(0, 3),
				      },
				      {
					      orient: 'vertical',
					      icon: 'none',
					      left: '20%',
					      top: '25%',
					      align: 'center',
					      itemGap: 20,
					      formatter: function(name) {
						      let res = chartData.filter((v) => v.name === name)
						      let percent = ((res[0].value * 100) / total).toFixed(0)
						      return '{a|' + percent + '%}' + '\n' + '{b|' + name + '}'
					      },
					      textStyle: {
						      align: 'center',
						      rich: {
							      a: {
								      fontSize: 18,
								      fontWeight: 500,
								      lineHeight: 30,
								      color: color[0],
							      },
							      b: {
								      fontSize: 12,
								      fontWeight: 500,
								      color: '#666666',
							      },
						      },
					      },
					      data: chartData.slice(3, 5),
					},
				],
				grid: { // name顯示的位置
					top: '10%',
					bottom: '52%',
					left: '50%',
					containLabel: false,
				},
				yAxis: [
					{
					      type: 'category',
					      inverse: true,
					      axisLine: {
						      show: false,
					      },
					      axisTick: {
						      show: false,
					      },
					      axisLabel: {
						      interval: 0,
						      inside: false,
						      textStyle: {
							      color: '#666666',
							      fontSize: 12,
						      },
					      },
					      data: optionData.yAxis,
					},
				],
				xAxis: [
					{
					      show: false,
					},
				],
				series: optionData.series,
			}
			let preChart = echarts.init(this.$refs.preChart)
			preChart.setOption(option)
		},
	},
}
</script>

<style lang="scss" scoped>
.chart {
	width: 100%;
	height: 500px;
}
</style>