【vue项目问题解决】echarts，使用中提示undefined问题及重绘问题

记录在项目开发过程中遇到的小问题，欢迎大家一起留言探讨

1、问题 ：引入echars，使用中提示undefined问题

问题描述

cnpm安装了echars,在main.js中全局引入，之后提示echarsundefined

期望效果

可以在组件中直接通过this.$echarts使用

正确引入方式

局部引入,组件中直接引入 import echarts from "echarts";或者import * as echarts from "echarts"视版本而定

安装

cnpm install echars -S

引入

// 引入echarts
import echarts from 'echarts'
// 2022-06-13修改--注意：版本不同，引入方式略有不同，echarts 5版本，项目引入使用下述方式
//import * as echarts from "echarts"
Vue.prototype.$echarts = echarts

使用

// 数据定义
data () {
	return {
		divHeight: 700,
	}
}

//绘画图表--可以获取自定义的值，也可以直接写死宽高
<div id="main1" ref="main" :style="{ height: divHeight + 'px' }"></div>

var chartDom = document.getElementById("main");
// 保存mychart
this.myChart = this.$echarts.init(chartDom);

2、问题 ：echarts重绘

在开发过程中，难免会遇到改变图表的宽高并且重绘的功能，直接修改高度，我们会发现并不会进行重绘，使用以下命令即可：

this.myChart.resize({ height: this.divHeight });