【vue项目问题解决】echarts,使用中提示undefined问题及重绘问题
记录在项目开发过程中遇到的小问题,欢迎大家一起留言探讨1、问题 :引入echars,使用中提示undefined问题问题描述cnpm安装了echars,在main.js中全局引入,之后提示echarsundefined期望效果可以在组件中直接通过this.$echarts使用正确引入方式局部引入,组件中直接引入 import echarts from "echarts";安装cnpm instal
·
记录在项目开发过程中遇到的小问题,欢迎大家一起留言探讨
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 });
更多推荐
已为社区贡献4条内容
所有评论(0)