半个月前本来在家写着一个项目，还没来得及提测，领导突然一个电话，需要立刻去支援另一个项目，一打听，一个烂尾半年的项目，纵使内心不愿意，还是要去啊。因为鲁迅说过，生活就像强*，既然不能反抗，那就好好享受吧。
这个项目分为pc端、用户端小程序和商家端小程序，这里主要讲讲在商家端中的某个模块，需要用到数据统计图表，当时觉得有两个插件不错：
百度 echarts
阿里 antv
因为之前在项目中使用echarts比较多，所以最终选择了echarts作为项目中的图表插件
echarts的引入
我是按照echarts官网教程来引入的，很简单，不多说。传送门
echarts中使用多个图表
wxml代码如下：
<!--图表1--><view class="echarts-container" hidden="{{!isshoweyes || !echartsdata.totalrecentransactions.alltotalmoney}}"> <ec-canvas id="mychart-dom-turnover" canvas-id="mychart-turnover" ec="{{ turnoverec }}"></ec-canvas></view><!--图表2--><view class="echarts-container" hidden="{{!isshoweyes || !echartsdata.shopnewcustomerrespvo.allnewcustomer}}"> <ec-canvas id="mychart-dom-customer" canvas-id="mychart-customer" ec="{{ customerec }}"></ec-canvas></view><!--图表3--><view class="echarts-container" hidden="{{!isshoweyes || !echartsdata.customerorderaveragerespvo.customeraverage}}"> <ec-canvas id="mychart-dom-price" canvas-id="mychart-price" ec="{{ priceec }}"></ec-canvas></view>
js代码如下
<!--通过lazyload设置图表懒加载-->data: { isshoweyes: true, turnoverec: { lazyload: true, }, customerec: { lazyload: true, }, priceec: { lazyload: true, }, echartsdata: {} }, <!--页面加载时创建对应的canvas面板-->onload: function (options) { this.echartscomponnet1 = this.selectcomponent('#mychart-dom-turnover'); this.echartscomponnet2 = this.selectcomponent('#mychart-dom-customer'); this.echartscomponnet3 = this.selectcomponent('#mychart-dom-price'); }, <!--获取到数据后，初始化报表--> getdata: function () { // .... 获取数据 <!--此用循环初始化几个图表--> for (let i = 1; i < 4; i++) { if (!chart[i]) { this.initecharts(i); //初始化图表 } else { this.setoption(i); //更新数据 } } }, <!--//初始化图表--> initecharts: function (i) { this['echartscomponnet' + i].init((canvas, width, height) => { // 初始化图表 chart[i - 1] = echarts.init(canvas, null, { width: width, height: height }); this.setoption(i); // 注意这里一定要返回 chart 实例，否则会影响事件处理等 return chart[i - 1]; }); }, setoption: function (i) { chart[i - 1].clear(); // 清除 chart[i - 1].setoption(this['getoption' + i]()); //获取新数据 }, <!--设置报表需要的配置项--> getoption1() { let { echartsdata } = this.data; return { color: ['#0179ff'], tooltip: { trigger: 'axis', axispointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow', // 默认为直线，可选为：'line' | 'shadow' shadowstyle: { opacity: 0.8 } }, formatter: this.formattertooltip, position: this.settooltippositionfunction }, grid: { left: 20, right: 20, bottom: 15, top: 40, containlabel: true }, xaxis: [{ type: 'category', axisline: { linestyle: { color: '#999', } }, axislabel: { color: '#666', }, data: echartsdata.totalrecentransactions.dates, } ], yaxis: [{ type: 'value', axistick: { show: false }, axisline: { show: false, linestyle: { color: '#999', } }, axislabel: { color: '#666', fontsize: 13 } }], series: [{ name: '订单总额', type: 'line', label: { normal: { show: true,// 是否在折线点上显示数值 position: 'inside' } }, data: echartsdata.totalrecentransactions.alltotalmoney }] }; }遇到的坑1.tooltip支持不好虽然官网上echarts暂时不支持tooltip，但是经过试验，还是tooltip还是有效果的，但是，x轴对应的坐标值并不会显示在tooltip中，需要使用tooltip的formatter函数，自己处理需要展示的数据，代码如下：// 格式化tooltip formattertooltip(param) { return "日期：" + param[0].name + "\n" + param[0].seriesname + ": " + param[0].data },2.当点击靠近屏幕右侧或者底部的item项时，tooltip会溢出边界，解决办法：给tooltip的position函数返回一个根据点击位置计算的坐标点，（也可以给一个固定的位置，但是体验不好） // 更改tooltip的位置，处理边界超出的情况 settooltippositionfunction(point, params, dom, rect, size) { //其中point为当前鼠标的位置，size中有两个属性：viewsize和contentsize，分别为外层div和tooltip提示框的大小 // 更改提示框的显示位置 let x = point[0];// let y = point[1]; // size: 包括 dom 的尺寸和 echarts 容器的当前尺寸，例如：{contentsize: [width, height], viewsize: [width, height]} let boxwidth = size.contentsize[0]; // let boxheight = size.contentsize[1]; // size里面此处获取不到dom的高度，值为nan，所以下面指定了一个固定值 let boxheight = 50; let posx = 0;//x坐标位置 let posy = 0;//y坐标位置 if (x < boxwidth) {//左边放不开 posx = 5; } else {//左边放的下 posx = x - boxwidth; } if (y < boxheight) {//上边放不开 posy = 5; } else {//上边放得下 posy = y - boxheight; } return [posx, posy]; },
上面需要注意的是，获取dom的高度，官方上说的是可以从position回调函数的size参数中获取到dom的高度，但是我打印出来却是nan。
打印出来结果：
后来发现参数params中outerwidth的值和参数size中contentsize的宽度值相同，所以果断取参数params中的outerheight作为dom的高度，最后运行的效果确实没有问题。
3.左右滑动柱状图时，柱状图画板会变空白，点一下空白又会出现柱状图，而且这个问题只有在柱状图上出现！
刚开始以为是自己代码的问题，后来自己检查了几遍，确实没什么问题，然后扫码体验了官方的小程序demo，发现也有这个问题，顿时只想对它口吐芬芳。既然是官方代码自身的问题，于是去看了下源码，如下：
<canvas class="ec-canvas" canvas-id="{{ canvasid }}" bindinit="init" bindtouchstart="{{ ec.disabletouch ? '' : 'touchstart' }}" bindtouchmove="{{ ec.disabletouch ? '' : 'touchmove' }}" bindtouchend="{{ ec.disabletouch ? '' : 'touchend' }}"></canvas>
官方代码给画布绑定一个bindtouchmove事件
touchmove(e) { if (this.chart && e.touches.length > 0) { var touch = e.touches[0]; var handler = this.chart.getzr().handler; handler.dispatch('mousemove', { zrx: touch.x, zry: touch.y }); handler.processgesture(wraptouch(e), 'change'); } },
这里面又去调用了echarts.js中的方法，最后想了一个粗暴的解决办法：
删掉源码中的bindtouchmove事件
完美解决，哈哈或或红红火火恍恍惚惚~~~
以上就是我在小程序中使用echarts遇到的坑，希望能帮到后来踩坑的人。
最终效果图片
demo源码
点 这 里
推荐教程：《js教程》
以上就是微信小程序中使用echarts的详细内容。