在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
微信小程序使用echarts,总结了如下两大坑点
如何使用?在echars官网,官方给出了实例,这就是最基本的使用 如何在page中定义呢?如何异步获取数据,渲染?下面代码才是重点import * as echarts from '../../ec-canvas/echarts'; var chart = null; var chartObj, chartPromise; Page({ data: { ec: { onInit: function (canvas, width, height, dpr) { chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr // new }); canvas.setChart(chart); chartObj(chart) return chart; }, // lazyLoad: true }, }, onLoad() { chartPromise = new Promise((r,j) => { chartObj = r }) this.drawChart(data);//在这里异步获取数据,渲染echarts },
drawChart(data){
const option = {
这里是你的option配置
};
chartPromise.then(chart => {
chart.setOption(option);
//这里可以转成图片,解决层级问题
setTimeout(()=>{
this.handleCanvarToImg(this)//这个方法在下面
},2000)
return chart
})
},
})
如何解决层级关系呢?如何进行canvas转成图片?可以把echarts生成的图片,然后需要层级的时候,转成图片,ec-canvas设置透明度为0 <view class="ec-box"> <ec-canvas id="mychart" canvas-id="mychart-bar" ec="{{ ec }}" style="opacity:{{show ? 0 : 1}}"></ec-canvas> <image wx:if="{{show}}" src="{{chartImg}}"></image> </view> // 转图片 handleCanvarToImg(that) { let canvas = this.selectComponent('#mychart') if(!canvas){ return } canvas.canvasToTempFilePath({ x: 0, y: 0, width: 369, height: 253, canvasId: 'mychart', success: function(res) { that.setData({ chartImg: res.tempFilePath,showCanvas:true}); } },that); }, 这就能解决上面的两大坑了 对了还有一个小点要注意,ec-canvas引用的echarts.js比较大,在小程序开发者工具里面,大于500k,es6转es5就会报错,所以可以从官网自定义构建以减小文件大小
|
请发表评论