小程序在使用旧版的echarts图表时,图表会覆盖在一些组件上,在使用代替不太生效后,我把一些自定义组件换成了微信的原生组件,一定程度上缓解了这一问题,但总归不是长久之计。
最近同事@leo通过查看echarts的git的readme说明,发现新的echarts解决了这一问题,于是我们升级了echarts版本,最终解决了这一覆盖问题。
强烈建议按照https://github.com/ecomfe/echarts-for-weixin页面中的文档进行操作,它的步骤写的要比我好得多,如果嫌弃它写的太多的话,我这边的大体步骤如下(如有遗漏,还请指正~):
升级到最新echarts之后,在真机上没问题但是在开发者工具上有问题。 你用真机扫码看,不要在开发者工具上看,开发者工具做的还不完善
1.下载 ECharts 的微信小程序版本:
下载地址:https://github.com/ecomfe/echarts-for-weixin,因为我不希望echarts文件占的大小过大,所以我只把它的ec-canvas
文件夹复制到我的项目的根目录:
2.下载echarts.js文件
为减小文件大小,我只引入了我需要的echarts组件,并引入了压缩版本,按需引入地址:https://www.echartsjs.com/zh/builder.html,一版选默认即可,如果想在本地进行调试,可以选择不压缩。
改名文件:将下载好的文件改名成echarts.js文件,放到ec-canvas目录下:
3.编写代码
首先,在 pages/index/ 目录下新建以下几个文件:index.js、 index.json、 index.wxml、 index.wxss。并且在 app.json 的 pages 中增加 ‘pages/bar/index’。
index.json 配置如下:注意路径要配对,是以当前文件为起点,找到ec-canvas目录下
{
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}
}
这一配置的作用是,允许我们在 pages/bar/index.wxml 中使用 组件。注意路径的相对位置要写对,如果目录结构和本例相同,就应该像上面这样配置。
index.wxml 中,我们创建了一个 组件,内容如下:
<view class="container">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>
注意此处的 .container,新建小程序项目后,其中 app.wxss 中默认自动生成的此 class 与本 demo 中的可能不一致,导致图表不能正常显示,只显示空白。请注意参考 app.wxss 修改样式,保证图表的初始化的时候是有宽度和高度的。
其中 ec 是一个我们在 index.js 中定义的对象,它使得图表能够在页面加载后被初始化并设置。index.js 的结构如下:
function initChart(canvas, width, height, dpr) {
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // 像素
});
canvas.setChart(chart);
var option = {
...
};
chart.setOption(option);
return chart;
}
Page({
data: {
ec: {
onInit: initChart
}
}
});
这对于所有 ECharts 图表都是通用的,用户只需要修改上面 option 的内容,即可改变图表。option 的使用方法参见 ECharts 配置项文档。对于不熟悉 ECharts 的用户,可以参见 5 分钟上手 ECharts 教程: