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

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 });
Logo

前往低代码交流专区

更多推荐