在SpringBoot项目引入Echarts

项目导入依赖

Echarts官网教程

1. 在项目中添加jar包依赖参数，npm install echarts --save (后面加上参数–save是什么意思)
2. 在.vue文件的中加入ecahrts的图标呈现div

<div id="main" style="width: 850px;height:400px;"></div>

3. 在.vue文件的中import的echarts

import * as echarts from "echarts" ;  

Echarts 初始化TypeError Cannot read properties of undefined (reading ‘init‘)

4. 引入js代码：初始化echarts实例

// 基于准备好的dom，初始化echarts实例
data() {
      return {
		myChart:"",
	}
}
initFun(){//初始化方法
this.myChart = echarts.init(document.getElementById('main'));
//加入其它具体代码
}

Echarts图表的官方教程

5. 不重复初始化Echarts，用完就销毁echarts.init返回的对象（生成的图片依然保存）
   There is a chart instance already initialized on the dom
   
6. Echarts饼图相关
   Ecahrts的饼状图官方教程
   饼图的大小如何调节
   在Echarts扇形图中添加点击事件