vue echarts饼状图百分比展示

谁践踏了优雅 2022-10-13 05:24 601阅读 0赞

设置label的formatter。

label: {
    	show: true,
    	formatter: '{b} : {d}%'
    },

已封装好，可直接复制使用。

<template>
    	
    	<div ref="echart" :class="className" :style="{height:height,width:width}" />
    </template>
    
    <script>
    	import * as echarts from 'echarts';
    	export default {
    		props: {
    			className: {
    				type: String,
    				default: 'chart'
    			},
    			width: {
    				type: String,
    				default: '500px'
    			},
    			height: {
    				type: String,
    				default: '300px'
    			},
    			chartData: {
    				type: Array,
    				required: true
    			},
    		},
    		data() {
    			return {
    				chart: null,
    			}
    		},
    		watch: {
    			chartData: {
    				deep: true,
    				handler(val) {
    					this.setOptions(val)
    				}
    			}
    		},
    		mounted() {
    			this.$nextTick(() => {
    				this.initChart()
    			})
    		},
    		beforeDestroy() {
    			if (!this.chart) {
    				return
    			}
    			this.chart.dispose()
    			this.chart = null
    		},
    		methods: {
    			initChart() {
    				this.chart = echarts.init(this.$refs.echart);
    				this.setOptions(this.chartData)
    			},
    			setOptions(data) {
    				this.chart.setOption({
    					tooltip: {
    						trigger: 'item',
    						formatter: '{b} : {d}%'
    					},
    					legend: {
    						orient: 'vertical',
    						left: 'right',
    						top: 'bottom'
    					},
    					series: [{
    						type: 'pie',
    						radius: '50%',
    						data: data,
    						itemStyle: {
    							normal: {
    								label: {
    									show: true,
    									formatter: '{b} : {d}%'
    								},
    							}
    						},
    						emphasis: {
    							itemStyle: {
    								shadowBlur: 10,
    								shadowOffsetX: 0,
    								shadowColor: 'rgba(0, 0, 0, 0.5)'
    							},
    						}
    					}]
    				})
    			}
    		}
    	}
    </script>