echarts_h5_vue3封装

renlmingj

2024 年 05 月 29 日

233 次浏览

暂无评论

1990字数

uniapp_v3

> 该组件只适用于 uniapp_vue3 开发的 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
import * as echarts from 'echarts';
import { onMounted } from 'vue';
const { option, domId } = defineProps({
	option: {
		type: Object,
		default: () => {}
	},
	domId: {
		type: String,
		default: ''
	}
})

const init = () => {
	let chartDom = document.getElementById(domId);
	let myChart = echarts.init(chartDom);
	let options;

options = option;

options && myChart.setOption(options);

window.addEventListener('resize', () => {
		myChart.resize();
	})
}

onMounted(() => {
	init();
})
```

##### 三、父组件调用

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

###### 1、html 代码

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

###### 2、js 代码

```js
import { ref } from 'vue';
const option = ref({
	tooltip: {
		trigger: 'item'
	},
	legend: {
		top: '5%',
		left: 'center'
	},
	series: [{
		name: 'Access From',
		type: 'pie',
		radius: ['40%', '70%'],
		avoidLabelOverlap: false,
		itemStyle: {
			borderRadius: 10,
			borderColor: '#fff',
			borderWidth: 2
		},
		label: {
			show: false,
			position: 'center'
		},
		emphasis: {
			label: {
				show: true,
				fontSize: 40,
				fontWeight: 'bold'
			}
		},
		labelLine: {
			show: false
		},
		data: [{
				value: 1048,
				name: 'Search Engine'
			},
			{
				value: 735,
				name: 'Direct'
			},
			{
				value: 580,
				name: 'Email'
			},
			{
				value: 484,
				name: 'Union Ads'
			},
			{
				value: 300,
				name: 'Video Ads'
			}
		]
	}]
});
```

###### 3、css代码

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

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

[1]: https://www.renlmingj.cn/usr/uploads/2024/05/3959425684.png

最后修改：2024 年 06 月 13 日