pie.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'],
	watch: {
		data() {
			this.initPie()
		}
	},
	mounted() {
		this.initPie()
		const erd = elementResizeDetectorMaker()
		erd.listenTo(document.getElementById(this.id), () => {
			this.$nextTick(() => {
				//监听到事件后执行的业务逻辑
				this.initPie()
			})
		})
	},
	destroyed() {
		window.onresize = null
	},
	methods: {
		initPie() {
			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'
				},
				legend: {
					orient: 'horizontal',
					top: '1%'
				},
				series: [
					{
						type: 'pie',
						radius: '50%',
						data: this.data
						// data: [
						//   {
						//     value: 1048,
						//     name: '风冷热泵机组',
						//     itemStyle: { color: 'skyblue' }
						//   },
						//   {
						//     value: 735,
						//     name: '室内机风柜',
						//     itemStyle: { color: '#F2637B' }
						//   },
						//   { value: 580, name: '水泵', itemStyle: { color: '#8EE0E0' } },
						//   {
						//     value: 484,
						//     name: '多联室内机',
						//     itemStyle: { color: '#4ECB74' }
						//   },
						//   { value: 300, name: '排风机', itemStyle: { color: '#FFCC00' } }
						// ]
					}
				]
			}
			myCharts.setOption(option)
			myCharts.resize()
			window.addEventListener('resize', function() {
				myCharts.resize()
			})
		}
	}
}
</script>

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