在uniapp微信小程序中使用mpvue-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,不然无法显示;
原文地址:https://blog.csdn.net/qq_18283943/article/details/100940800
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。