<template> <div ref="chart" style="width: 100%;height: 50%;" @click=""/> </template> <script> import * as echarts from "echarts"; export default { name:"RingPieChart", data() { return { option:{ tooltip: { trigger: 'item' }, series: { name: this.name, type: 'pie', radius: ['40%', '70%'], avoidLabelOverlap: false, tooltip: { valueFormatter: this.valueFormatter }, label: { show: true, // position: 'center', fontSize: 12, color: '#5eeef4', formatter:this.formatter }, emphasis: { label: { show: true, fontSize: 12, fontWeight: 'bold', color: '#5eeef4', } }, data: this.data } }, chart: null, } }, watch: { data(n, o){ this.refresh(); }, name(n, o){ this.refresh(); } }, methods: { resizeChart() { if (this.chart) { this.chart.resize(); } }, refresh(){ this.option.series.data = this.data; this.option.series.name = this.name; if (this.chart){ this.chart.setOption(this.option); } } }, mounted() { setTimeout(() => { let chartDom = this.$refs.chart; this.chart = echarts.init(chartDom); this.refresh(); window.addEventListener('resize', this.resizeChart); }, 500) }, beforeDestroy() { window.removeEventListener("resize", this.resizeChart); }, props:{ name: { type: String, default: "环形饼图", }, data: { type: Array, default: function () { return [ {value: 500, name: '值1'}, {value: 2500, name: '值3'}, {value: 1100, name: '值2'}, ]; }, }, formatter:{ type: Function, default: function (param) { return param.name + '\r\n' + param.value; }, }, valueFormatter:{ type: Function, default: function (param) { return param.value }, } } } </script> <style scoped> </style>