Vue3中引入ECharts

安装Echarts

在项目的根目录下输入cmd，将下面指令输入，安装echarts。

npm install echarts --save

当你项目中的node_modules中有echarts包后，说明安装成功。 

创建容器

在template中创建一个dom元素，将图表内容放在dom中。

<template>
	<h1>Echarts图表</h1>
	<div ref="refContainer" class="chart" id="main"></div>
</template>

添加样式

给template中的dom元素添加宽度和高度，不然图表无法显示。(宽度和高度可以根据需要自行修改)

<style>
	.chart{
		width: 30%;
		height: 350px;
	}
</style>

定义图表内容

以下代码是setup语法糖写法，如果需要切换图表，只需要前往Echarts官网，将方法中的option的值改成你需要的图表的option的值即可。

<script setup>
import { onMounted, ref } from 'vue';
	import * as echarts from 'echarts';
	const refContainer = ref(null)
	const renderChart = ()=>{
		var myChart = echarts.init(refContainer.value);
		var option;
		option = {
		   xAxis: {
		      type: 'category',
		      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
		    },
		    yAxis: {
		      type: 'value'
		    },
		    series: [
		      {
		        data: [820, 932, 901, 934, 1290, 1330, 1320],
		        type: 'line',
		        smooth: true
		      }
		    ]
		};
		
		myChart.setOption(option);
	}
	
	onMounted(()=>{
		renderChart()
	})
	
</script>