echarts_h5_vue2封装

renlmingj

2024 年 06 月 04 日

229 次浏览

暂无评论

1622字数

uniapp_v2

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

##### 一、安装 echarts

```json
npm install echarts
或
yarn add echarts
```

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

###### 1、写入 html 代码

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

###### 2、写入 css 代码

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

###### 3、写入 js 代码

```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 代码

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

###### 2、js 代码

```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代码

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

##### 四、效果展示
![效果图][1]

[1]: https://www.renlmingj.cn/usr/uploads/2024/06/3560900045.png

最后修改：2024 年 06 月 13 日