uniapp_echarts_h5_vue3封装

该组件只适用于 uniapp_vue3 开发的 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 代码

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

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

2、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代码

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

四、效果展示