1、安装echarts

npm install echarts --save
// 或
yarn add echarts

2、在相应组件中通过import * as echarts from 'echarts'引入，如下图：

3、在页面结构中准备一个容器，用于承载echarts实例

• 一定要记得设置容器的高度，否则页面不显示

<div id="myEcharts" ref="myEchartsRef" style="width: 26vw; height: 50vh;"></div>

4、基于准备好的实例，初始化echarts实例

注意：从获取DOM到配置完成都需要在实例挂载完毕后进行，即mounted中

vue2/3仅dom处理有变化，其余操作基本一致。

• vue2使用this.$refs.myEchartsRef.value获取dom

• vue3使用const myEchartsRef=ref()获取dom

• 通过原生JSdocument.getElementById('myEcharts')获取也可以

//在初始化之前，移除上一个实例，避免出现切换页面返回不显示问题
document.getElementById("myEcharts").removeAttribute('_echarts_instance_');
//初始化
const myEcharts = echarts.init(document.getElementById("myEcharts"))

5、配置项和动态数据

• 声明配置项，结合官网配置文档进行配置。
• 例如通过option.title.text、option.xAxis.axisTick.show可以访问或修改对应属性，使其变为动态数据,依据具体业务灵活应用。

let option = {
		title: {
			text: ""
		},
		xAxis: {
			axisTick: {
				show: false
			},
			type: "value",
		},
		yAxis: {
			axisTick: {
				show: false
			},
			type: "category",
			data: []
		},
		series: []
	};

6、使用配置数据显示图表

myEcharts.setOption(option);