vue3中echarts封装

安城无殇

已于 2024-05-31 16:28:58 修改

阅读量664

点赞数 8

CC 4.0 BY-SA版权

文章标签： echarts

于 2024-02-20 10:28:04 首次发布

本文链接：https://blog.youkuaiyun.com/m0_73205039/article/details/136184084

文章介绍了如何在Vue应用中使用ECharts组件，并实现高度自定义，包括主题风格的自动切换、图表选项的实时更新以及鼠标点击事件的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
	<div :style="'height:' + height" ref="echartRef"></div>
</template>

<script lang="ts">
import { reactive, toRefs, getCurrentInstance, onMounted, computed, watch, nextTick } from 'vue';
import * as echarts from 'echarts';
import _ from 'lodash';
import { useStore } from '/@/store/index';

export default {
	name: 'echarts',
	props: {
		height: {
			type: String,
			default: '400px',
		},
		ecoptions: {
			type: Object,
			default: {},
			required: true,
		},
	},
	emits: ['echartSelected'],
	setup(props, { emit }) {
		const { proxy } = getCurrentInstance() as any;
		const store = useStore();
		let echart: any = {};
		const state = reactive({
			options: {},
		});
		// 获取布局配置信息
		const getThemeConfig = computed(() => {
			return store.state.themeConfig.themeConfig;
		});
		watch(
			() => getThemeConfig.value.isIsDark,
			(newOption) => {
				echart.dispose();
				echart = echarts.init(proxy.$refs.echartRef, newOption ? 'dark' : '');
				echart.setOption(props.ecoptions, true);
				console.log('监听主题风格', echart, newOption, props.ecoptions);
			},
			{ deep: true }
		);
		watch(
			() => props.ecoptions,
			(newOption) => {
				echart.setOption(props.ecoptions, true);
				console.log('监听折线图', newOption, props.ecoptions);
			},
			{ deep: true }
		);

		onMounted(() => {
			console.log('主题配置', props.ecoptions.themeConfig, getThemeConfig.value.isIsDark);
			echart = echarts.init(proxy.$refs.echartRef, getThemeConfig.value.isIsDark ? 'dark' : '');
			console.log('echart', echart, props.ecoptions);
			echart.setOption(props.ecoptions, true);
			/* echart.on('click',params=>{
					emit("echartClick", params);
				}); */
			echart.getZr().on('click', (params) => {
				let pointInPixel = [params.offsetX, params.offsetY];
				if (echart.containPixel('grid', pointInPixel)) {
					let pointInGrid = echart.convertFromPixel({ seriesIndex: 0 }, pointInPixel);
					console.log(pointInGrid);
					emit('echartSelected', pointInGrid);
				}
			});
			window.addEventListener('resize', chartResize);
		});
		const chartResize = () => {
			console.log('窗口变化');
			echart.resize(true);
		};
		return {
			getThemeConfig,
			...toRefs(state),
		};
	},
};
</script>