vue3怎么使用ECharts做图表，其实很简单

图表现在在后台管理系统中也是非常非常常见的，所以自己的alone-admin后台管理系统怎么会少的了图表数据可视化呢，最后看了一下还是决定使用apache的ECharts，看了一下现在网上搜的一些vue3使用ECharts的文章，感觉都很乱，所以还是打算自己整理一下，方便自己后续再使用的时候能快速拷贝。。。

一、安装ECharts

npm install echarts --save

二、引入使用ECharts

ECharts的使用方式其实有两种，一种是直接完全引入echarts，不过这种方式会导致最后打包出来的文件有点大，不过我们还是先来看看两种方式分别都是怎么实现的：

1、完全引入ECharts

<template>
	<div id="main" style="height: 300px;"></div>
</template>
<script setup>
	import {
		onMounted
	} from "vue";
	import * as echarts from 'echarts'
	onMounted(() => {
		let myChart = echarts.init(document.getElementById("main"));
		myChart.setOption({
			title: {
				text: "总用户量"
			},
			tooltip: {},
			xAxis: {
				data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
			},
			yAxis: {},
			series: [{
				name: "用户量",
				type: "line",
				data: [5, 20, 36, 10, 10, 20],
			}, ],
		});
		window.onresize = function() {
			myChart.resize();
		};
	})
</script>

2、按需引入ECharts

<template>
	<div id="main" style="height: 300px;"></div>
</template>
<script setup>
	import {onMounted} from "vue";
	// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口
	import * as echarts from 'echarts/core';
	// 引入折线图图表，图表后缀都为 Chart
	import { LineChart  } from 'echarts/charts';
	// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
	import {
	  TitleComponent,
	  TooltipComponent,
	  GridComponent,
	  DatasetComponent,
	  TransformComponent
	} from 'echarts/components';
	// 标签自动布局，全局过渡动画等特性
	import { LabelLayout, UniversalTransition } from 'echarts/features';
	// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
	import { CanvasRenderer } from 'echarts/renderers';
	// 注册必须的组件
	echarts.use([
	  TitleComponent,
	  TooltipComponent,
	  GridComponent,
	  DatasetComponent,
	  TransformComponent,
	  LineChart,
	  LabelLayout,
	  UniversalTransition,
	  CanvasRenderer
	]);
	onMounted(() => {
		let myChart = echarts.init(document.getElementById("main"));
		myChart.setOption({
			title: {
				text: "总用户量"
			},
			tooltip: {},
			xAxis: {
				data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
			},
			yAxis: {},
			series: [{
				name: "用户量",
				type: "line",
				data: [5, 20, 36, 10, 10, 20],
			}, ],
		});
		window.onresize = function() {
			myChart.resize();
		};
	})
</script>

上面的按需导入，是安装ECharts官网上的方法写的，具体的还需要按照自己的需要去封装。这两种方式都是用vue3的组合式api实现的折线图图表，但是你会看到打包出来的文件大小是不一样的，具体可以自己实践噢。