Vue中Echarts扇形图legend实现文字百分比整齐排列

深藏阁楼爱情的钟 2022-09-02 01:10 570阅读 0赞

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70][]

主要实现两个功能，左侧文字后增加百分比，环形图中间，默认显示文字及百分比，鼠标滑过切换。

echarts安装和引入

**npm install echarts --save**

**import \* as echarts from "echarts"**

完整代码

<template>
    	<div id="app">
    		<div class="chart_content">
    			<div>环形图</div>
    			<chartThree :data="chart_two_data" :legend="legendData" @loadedChart="clickShow"></chartThree>
    		</div>
    	</div>
    </template>
    
    <script>
    	import chartThree from './components/chart/chart_three.vue'
    
    	export default {
    		name: 'app',
    		components: {
    			chartThree
    		},
    		data() {
    			return {
    chart_two_data: [{
    						value: 1048,
    						name: '火影'
    					},
    					{
    						value: 735,
    						name: '海贼'
    					},
    					{
    						value: 580,
    						name: '死神'
    					},
    					{
    						value: 484,
    						name: '龙珠'
    					},
    					{
    						value: 300,
    						name: '幽游白书'
    					},
    					{
    						value: 300,
    						name: '猫和老鼠'
    					}
    				],
    				legendData: {
    					orient: 'vertical',
    					left: '5%',
    					top: 'middle',
    					icon: 'circle',
    					selectedMode: false,
    					textStyle: {
    						rich: {
    							a: {
    								align: "left",
    								width: 50
    							},
    							b: {
    								align: "left",
    								fontWeight: "bold",
    								width: 40
    							}
    						}
    					}
    				}
    			}
    		},
    		computed: {
    
    		},
    		mounted() {
    			// 设置环形图左侧legend的百分比
    			const that = this;
    			this.legendData.formatter = function(name) {
    				//该函数用于设置图例显示后的百分比
    				var list = that.chart_two_data;
    				var total = 0;
    				var value;
    				if (list && list.length) {
    					list.forEach(item => {
    						total += item.value;
    						if (item.name === name) {
    							value = item.value;
    						}
    					});
    				}
    				var p = (value / total) * 100;
    				p = p.toFixed(2);
    				return `{a|${name}}  {b|${p}%}`;
    			};
    		},
    		methods: {
    			clickShow(dom) {
    				dom.dispatchAction({
    					type: "downplay"
    				});
    				// 默认设置第一个值得区域高亮
    				dom.dispatchAction({
    					type: "highlight",
    					seriesIndex: 0,
    					dataIndex: 0
    				});
    				dom.on("click", e => {
    					// 这里执行点击后的操作
    					console.log("点击触发", e)
    				});
    				dom.on("mouseover", e => {
    					// 关闭高亮
    					dom.dispatchAction({
    						type: "downplay"
    					});
    					// 设置当前进入的区域内容高亮
    					dom.dispatchAction({
    						type: "highlight",
    						seriesIndex: 0,
    						dataIndex: e.dataIndex
    					});
    				});
    			}
    		}
    	}
    </script>
    
    <style>
    	#app {
    		display: flex;
    		flex-wrap: wrap;
    	}
    
    	.chart_content {
    		border: 1px solid #ededed;
    		width: calc((100% - 30px)/3);
    		height: 400px;
    		margin: 0 10px 10px 0;
    	}
    
    	.chart_content:nth-child(3n) {
    		margin-right: 0;
    	}
    
    
    
    </style>

组件代码

<template>
    	<div class="chart" v-resize="resizeCharts" ref="barChart"></div>
    </template>
    <script>
    	import * as echarts from "echarts";
    	export default {
    		name: "barChart",
    		props: {
    			data: {
    				type: Array,
    				default () {
    					return [];
    				},
    			},
    			legend: {
    				type: Object,
    				default () {
    					return {};
    				},
    			},
    		},
    		data() {
    			return {
    				charts: null,
    			};
    		},
    		computed: {},
    		methods: {
    			resizeCharts() {
    				this.charts.resize();
    			},
    			initCharts() {
    				this.$nextTick(() => {
    					this.charts = echarts.init(this.$refs.barChart);
    					this.charts.clear();
    					this.setOption();
    					this.$emit("loadedChart", this.charts);
    				});
    			},
    			setOption() {
    				const option = this.getOption();
    				this.charts.setOption(option, true);
    			},
    			getOption() {
    				const option = {
    					tooltip: {
    						trigger: 'item'
    					},
    					legend: this.legend,
    					series: [{
    						name: '访问来源',
    						type: 'pie',
    						radius: ['60%', '80%'], //圆环的大小
    						center: ['60%', '50%'], //圆环的位置
    						avoidLabelOverlap: false,//开启后可以防止标签之间的重叠
    						label: {
    							show: false,//是否默认显示中间文字  如果设置为true会有文字重叠的问题
    							position: 'center',
    							formatter: `{d|{d}%} \n {b|{b}}`,  //显示圆环中间的文字和百分比
    							rich: {
    								d: {
    									fontSize: 28,
    									lineHeight: 30,
    									fontWeight: "bold",
    									color: "#333333",
    									align: "center"
    								},
    								b: {
    									fontSize: 14,
    									color: "#666666",
    									align: "center"
    								}
    							}
    						},
    						emphasis: {
    							label: {
    								show: true,
    								fontSize: '20',
    								fontWeight: 'bold'
    							}
    						},
    						labelLine: {
    							show: false
    						},
    						data: this.data
    					}]
    				};
    				return option;
    			},
    		},
    		mounted() {
    			this.initCharts();
    		},
    		beforeDestroy() {
    			this.charts && this.charts.dispose();
    			this.charts = null;
    		},
    		watch: {
    			data: {
    				handler() {
    					this.setOption();
    				},
    			},
    			yAxis: {
    				handler() {
    					this.setOption();
    				},
    			},
    		},
    		components: {},
    	};
    </script>
    
    <style scoped>
    	.chart {
    		width: 100%;
    		height: 100%;
    	}
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70]: /images/20220829/1f4ce6b89d5e4008b505818de7941a68.png