在uniapp微信小程序中使用mpvue-echarts的总结

• 项目需求在uniapp中实现echarts地图
• 存在问题
• 针对修改以下几个地方

项目需求在uniapp中实现echarts地图

网上找了相关的方法:https://blog.csdn.net/CherryLee_1210/article/details/83016706

存在问题

1.在uniapp中使用echarts的时候发现H5页面不报错，但是图表不显示的问题；

2.在uniapp小程序中报:this.echarts.setCanvasCreator 找不到响应的函数；

如上描述的博客：
在项目终端中依次执行
npm init
npm install echarts --save
npm install mpvue-echarts --save
然后在页面中引入
import echarts from ‘echarts’
import mpvueEcharts from ‘mpvue-echarts’

针对修改以下几个地方

1.替换最新的 mpvue-echarts 组件， 源码地址：链接: https://github.com/dcloudio/hello-uniapp/blob/master/components/mpvue-echarts/src/echarts.vue .拷贝代码替换掉mpvue-echarts目录下的echarts.js中的内容

2.调用方式：<mpvue-echarts class=“ec-canvas” @onInit=“lineInit” canvasId=“line” ref=“lineChart” />
3.onInit函数参考：

// An highlighted block
lineInit(e) {
	let { width, height } = e;
	let canvas = this.$refs.lineChart.canvas;
	echarts.setCanvasCreator(() => canvas);
	let lineChart = echarts.init(canvas, null, {
	width: width,
	height: height
	});
	canvas.setChart(lineChart);
	lineChart.setOption(lineOption);
	this.$refs.lineChart.setChart(lineChart);
}

4.注意确保最外层父节点的宽高不为0，不然无法显示；

标签：uniapp,canvas,lineChart,mpvue,微信,let,echarts
来源： https://blog.csdn.net/qq_18283943/article/details/100940800