Vue3+Ts+Vite项目(第十二篇)——echarts安装与使用，vue3项目echarts组件封装

概述

技术栈：Vue3 + Ts + Vite + Echarts
简介：图文详解，教你如何在Vue3项目中引入Echarts，封装Echarts组件，并实现常用Echarts图例

文章目录

概述
一、先看效果
- - 1.1 静态效果
  - 1.2 动态效果
二、话不多数，引入 Echarts
三、使用
四、创作不易，点赞收藏不迷路！！！

一、先看效果

1.1 静态效果

在这里插入图片描述

1.2 动态效果

请添加图片描述

二、话不多数，引入 Echarts

2.1 安装 Echarts

npm:

npm i echarts --save

pnpm:

pnpm i echarts --save

2.2 main.ts 中引入

//引入echarts
import * as echarts from 'echarts';
app.config.globalProperties.$echarts = echarts;

2.3 Echarts 组件封装

/src/components/ReEcharts/index.vue 文件中写入如下代码

<script setup lang="ts">
import {
    
     ECharts, EChartsOption, init } from 'echarts';
import {
    
     ref, watch, onMounted, onBeforeUnmount } from 'vue';

// 定义props
interface Props {
    
    
	width?: string;
	height?: string;
	option: EChartsOption;
}
const props = withDefaults(defineProps<Props>(), {
    
    
	width: '100%',
	height: '100%',
	option: () => ({
    
    })
});

const myChartsRef = ref<HTMLDivElement>();
let myChart: ECharts;
// eslint-disable-next-line no-undef
let timer: string | number | NodeJS.Timeout | undefined;

// 初始化echarts
const initChart = (): void => {
    
    
	if (myChart !== undefined) {
    
    
		myChart.dispose();
	}
	myChart = init(myChartsRef.value as HTMLDivElement);
	// 拿到option配置项，渲染echarts
	myChart?.setOption(props.option, true);
};

// 重新渲染echarts
const resizeChart = (): void => {
    
    
	timer = setTimeout(() => {
    
    
		if (myChart) {
    
    
			myChart.resize();
		}
	}, 500);
};

onMounted(() => {
    
    
	initChart();
	window.addEventListener('resize', resizeChart);
});

onBeforeUnmount(() => {
    
    
	window.removeEventListener('resize', resizeChart);
	clearTimeout(timer);
	timer = 0;
});

watch(
	props.option,
	() => {
    
    
		initChart();
	},
	{
    
    
		deep: true
	}
);
</script>

<template>
	<div ref="myChartsRef" :style="{ height: height, width: width }" :option="option" />
</template>

三、使用

3.1 柱状图

实现效果：
在这里插入图片描述

全量代码：

<script setup lang="ts">
import {
    
     reactive } from 'vue';
import Echarts from '@/components/ReEcharts/index.vue';

const option = reactive({
    
    
	tooltip: {
    
    
		trigger: 'axis',
		axisPointer: {
    
    
			type: 'shadow',
			label: {
    
    
				show: true
			}
		}
	},
	grid: {
    
    
		left: '4%',
		top: '15%',
		right: '4%',
		bottom: '10%'
	},
	legend: {
    
    
		data: ['昨日总人数', '今日实时人数'],
		top: '4%',
		color: '#1FC3CE',
		fontSize: 14,
		selected: {
    
     昨日使用率: false } // 不需要显示的设置为false
	},
	xAxis: {
    
    
		data: [
			'会议室1',
			'会议室2',
			'会议室3',
			'会议室4',
			'会议室5',
			'会议室6',
			'会议室7',
			'会议室8',
			'会议室9'
		],
		axisLine: {
    
    
			show: true, //隐藏X轴轴线
			lineStyle: {
    
    
				color: '#eee',
				width: 1
			}
		},
		axisTick: {
    
    
			show: true, //隐藏X轴刻度
			alignWithLabel: true
		},
		axisLabel: {
    
    
			show: true,
			color: '#333', //X轴文字颜色
			fontSize: 14
		}
	},
	yAxis: [
		{
    
    
			type: 'value',
			name: '人数',
			nameTextStyle: {
    
    
				color: '#333',
				fontSize: 14
			},
			splitLine: {
    
    
				show: true,
				lineStyle: {
    
    
					width: 1,
					color: '#eee'
				}
			},
			axisTick: {
    
    
				show: false
			},
			axisLine: {
    
    
				show: false
			},
			axisLabel: {
    
    
				show: true,
				color: '#333',
				fontSize: 14
			}
		}
	],
	series: [
		{
    
    
			name: '昨日总人数',
			type: 'bar',
			barWidth: 18,
			itemStyle: {
    
    
				color: {
    
    
					type: 'linear',
					x: 0, // 右
					y: 1, // 下
					x2: 0, // 左
					y2: 0, // 上
					colorStops: [
						{
    
    
							offset: 0,
							color: '#F89898' // 0% 处的颜色
						},
						{
    
    
							offset: 1,
							color: '#F56C6C' // 100% 处的颜色
						}
					]
				}
			},
			data: [24, 45, 43, 35, 76, 154, 86, 42, 68]
		},
		{
    
    
			name: '今日实时人数',
			type: 'bar',
			barWidth: 18,
			itemStyle: {
    
    
				color: {
    
    
					type: 'linear',
					x: 0, // 右
					y: 1, // 下
					x2: 0, // 左
					y2: 0, // 上
					colorStops: [
						{
    
    
							offset: 0,
							color: '#52A7FF' // 0% 处的颜色
						},
						{
    
    
							offset: 1,
							color: '#409EFF' // 100% 处的颜色
						}
					]
				}
			},
			data: [133, 23, 114, 67, 89, 35, 67, 96, 90]
		}
	]
});
</script>

<template>
	<div :style="{ width: '1230px', height: '350px' }">
		<Echarts :option="option" />
	</div>
</template>

3.2 圆环图

实现效果：
在这里插入图片描述
全量代码：

<script setup lang="ts">
import {
    
     reactive } from 'vue';
import Echarts from '@/components/ReEcharts/index.vue';

const pieData = reactive([
	{
    
    
		name: '大一',
		value: 2100
	},
	{
    
    
		name: '大二',
		value: 2502
	},
	{
    
    
		name: '大三',
		value: 3156
	}
]);

const option = reactive({
    
    
	color: ['#18F6F8', '#288CFC', '#FFD91A'],
	legend: {
    
    
		top: '10px',
		icon: 'circle',
		color: '#555',
		itemWidth: 10,
		itemHeight: 10
	},
	tooltip: {
    
    
		confine: true,
		trigger: 'item',
		formatter: '{b} : {c}'
	},
	series: [
		{
    
    
			avoidLabelOverlap: false,
			type: 'pie',
			roseType: 'area', // 玫瑰图
			center: ['50%', '50%'],
			radius: ['30%', '60%'],
			label: {
    
    
				formatter: '{b}\n-------------\n{d}%\t{c}',
				fontSize: 16
			},
			labelLine: {
    
    
				length: 10,
				length2: 30
			},
			data: pieData
		}
	]
});
</script>

<template>
	<div :style="{ width: '568px', height: '360px' }">
		<Echarts :option="option" />
	</div>
</template>

3.3 词云图