vue中echars二次封装

最新推荐文章于 2024-03-27 16:37:41 发布

未来可期wlkq

最新推荐文章于 2024-03-27 16:37:41 发布

阅读量129

点赞数

分类专栏： echarts vue 文章标签： vue.js echarts 前端

本文链接：https://blog.csdn.net/qq_43631129/article/details/129503807

版权

vue 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

echarts

1 篇文章 0 订阅

订阅专栏

<template>
  <div :class="className" :style="{height:height,width:width}"></div>
</template>

<script>
import * as echarts from 'echarts'
// require('echarts/theme/macarons') // echarts theme
import { debounce } from '@/utils'

export default {
	props: {
		className: {
			type: String,
			default: 'chart'
		},
		width: {
			type: String,
			default: '100%'
		},
		height: {
			type: String,
			default: '300px'
		},
		option: {
			type: Object,
			default() {
				return {}
			}
		},
		hasClickEvent: {
			type: Boolean,
			default: false
		},
		themeType:{ // 主题类型 
			type: String,
			default: 'macarons'
		}
	},
	data() {
		return {
			chart: null
		}
	},
	watch: {
		option: {
			handler(val) {
				this.chart.setOption(val)
			},
			deep: true
		}
	},
	mounted() {
		this.initChart()
		this.__resizeHanlder = debounce(() => {
			if (this.chart) {
				this.chart.resize()
			}
		}, 100)
		window.addEventListener('resize', this.__resizeHanlder)
	},
	beforeDestroy() {
		if (!this.chart) {
			return
		}
		window.removeEventListener('resize', this.__resizeHanlder)
		this.chart.dispose()
		this.chart = null
	},
	methods: {
		initChart() {
			this.chart = echarts.init(this.$el, this.themeType)

			if (this.hasClickEvent) {
				this.chart.on('click', (param) => {
					this.$emit('handlePieChart', param);
				});
			}

			// this.chart.setOption({
			// 	tooltip: {
			// 		trigger: 'item',
			// 		formatter: '{a} <br/>{b} : {c} ({d}%)'
			// 	},
			// 	legend: {
			// 		orient: 'vertical',
			// 		left: 'left',
			// 		data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
			// 	},
			// 	series: [
			// 		{
			// 			name: '访问来源',
			// 			type: 'pie',
			// 			radius: '55%',
			// 			center: ['50%', '60%'],
			// 			data: [{ value: 335, name: '直接访问' }, { value: 310, name: '邮件营销' }, { value: 234, name: '联盟广告' }, { value: 135, name: '视频广告' }, { value: 1548, name: '搜索引擎' }],
			// 			emphasis: {
			// 				itemStyle: {
			// 					shadowBlur: 10,
			// 					shadowOffsetX: 0,
			// 					shadowColor: 'rgba(0, 0, 0, 0.5)'
			// 				}
			// 			}
			// 		}
			// 	]
			// })
		}
	}
}
</script>