uniapp_echarts_h5_vue2封装

最新推荐文章于 2025-06-07 14:30:58 发布

原创最新推荐文章于 2025-06-07 14:30:58 发布 · 495 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#uniapp

本文详细介绍了如何在uniapp_vue2开发的H5项目中安装并使用Echarts组件，包括组件结构、CSS样式、数据绑定以及父组件调用的方法，确保在小程序不支持的情况下实现图表展示。

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

该组件只适用于 uniapp_vue2 开发的 h5 项目，小程序均不支持

一、安装 echarts

npm install echarts
或
yarn add echarts

二、在 components 中新建 echartsH5 文件夹并新建 echartsH5.vue 文件

1、写入 html 代码

<template>
	<view>
		<view :id="domId" class="main"></view>
	</view>
</template>

2、写入 css 代码

.main {
	width: 100%;
	height: 100%;
}

3、写入 js 代码

export default {
	name:"echartsH5",
	data() {
		return {
			
		};
	},
	
	props: {
		option: {
			type: Object,
			default: ()=>{}
		},
		domId: {
			type: String,
			default: ''
		}
	},
	
	mounted() {
		this.init();
	},
	
	methods: {
		init(){
			let chartDom = document.getElementById(this.domId);
			let myChart = echarts.init(chartDom);
			let option;
			
			option = this.option;
			
			option && myChart.setOption(option);
			
			window.addEventListener('resize', () => {
				myChart.resize();
			})
		},
	},
}

三、父组件调用

组件 id 为父级传递的活值，防止 id 出现重复的情况

1、html 代码

<echartsH5 class="echarts-dom" :option="option" domId="domId"></echartsH5>

2、js 代码

import echartsH5 from '@/components/echartsH5/echartsH5.vue';
export default {
	data() {
		return {
			option: {
				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				},
				yAxis: {
					type: 'value'
				},
				series: [{
					data: [120, 200, 150, 80, 70, 110, 130],
					type: 'bar'
				}]
			},
		};
	},
	comments: {
		echartsH5
	},
}

3、css代码

.echarts-dom {
	width: 100%;
	height: 500rpx;
}

四、效果展示

效果图