pie2.vue

<template lang="pug">
div(:id="id", :style="{ width: '100%', height: '90%' }")
</template>

<script>
import elementResizeDetectorMaker from 'element-resize-detector'

export default {
	props: ['data', 'id', 'legendData'],
	data() {
		return {
			list: {}
		}
	},
	watch: {
		data() {
			this.initPie2()
		}
	},

	mounted() {
		this.initPie2()
		const erd = elementResizeDetectorMaker()
		erd.listenTo(document.getElementById(this.id), () => {
			this.$nextTick(() => {
				//监听到事件后执行的业务逻辑
				this.initPie2()
			})
		})
	},
	destroyed() {
		window.onresize = null
	},
	methods: {
		initPie2() {
			let dom = document.getElementById(this.id)
			if (!dom) return
			let myCharts = this.$echarts.init(dom)
			let option = {
				color: ['skyblue', '#F2637B', '#8EE0E0', '#FFCC00', '#4ECB74'],
				tooltip: {
					trigger: 'item',
					formatter: '{a} <br/>{b} : {c} ({d}%)'
				},
				legend: {
					type: 'scroll',
					orient: 'vertical',
					right: 10,
					top: 20,
					bottom: 20,
					// data: ['风冷热泵机组', '室内机风柜', '水泵', '多联室内机']
					data: this.legendData
				},
				series: [
					{
						name: '',
						type: 'pie',
						radius: '55%',
						center: ['40%', '50%'],
						data: this.data,
						// data: [
						//   {
						//     name: '风冷热泵机组',
						//     value: '100',
						//     itemStyle: { color: 'skyblue' }
						//   },
						//   {
						//     name: '室内机风柜',
						//     value: '130',
						//     itemStyle: { color: '#F2637B' }
						//   },
						//   { name: '水泵', value: '400', itemStyle: { color: '#8EE0E0' } },
						//   {
						//     name: '多联室内机',
						//     value: '100',
						//     itemStyle: { color: '#FFCC00' }
						//   }
						// ],
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}
				]
			}
			myCharts.setOption(option)
			myCharts.resize()
			window.addEventListener('resize', function() {
				myCharts.resize()
			})
		}
	}
}
</script>

<style lang="scss" scoped></style>