在微信小程序中使用echart

当人们坐在家里的时候，罐子就会从天上掉下来。

半个月前我正在家里写一个项目，还没来得及测试，领导突然打电话给我，让我立即支持另一个项目。 当我询问时，我发现这是一个推出不到半年的项目。 即使你内心感到不舒服。 如果你喜欢请。 鲁迅说：“人生如强奸”。 你无法抗拒它，所以就享受它吧。

本项目分为PC端、用户端小程序、卖家端小程序。 本文主要介绍商户侧需要用到统计图表的具体模块。 当时我以为有两个插件。 还不错：

百度echarts

阿里蚂蚁V

我的项目中已经大量使用了echarts，所以我最终决定使用echarts作为图表插件。 项目

p>

介绍echarts

我按照官网教程介绍一下的 echarts 。 很简单，没什么好说的。 门户

下面是echarts使用多个图表的wxml代码：

js代码为：

onLoad: function (options) { this.echartsComponnet1 = this.selectComponent(' # mychart - ]dom-Sales'); this.echartsComponnet2 = this.selectComponent('#mychart-dom-customer'); this.echartsComponnet3 = this.selectComponent(& #39;#mychart -dom[ k3]price'); }, getData: function () { // ... 获取数据 for (let i = 1; i < 4; i++) { if (! Chart[i]) { this.initEcharts(i); the Chart} 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); / 注意，这里我们需要返回图表实例。 如果不返回，将会影响事件处理等。 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'], toolstip: {trigger: 'axis' , axisPointer: { // 轴指示器，轴触发器的有效类型: 'shadow', // 默认为直线，选项: 'line' | Shadow' 阴影样式: { 不透明度：0.8} }，格式化程序：this.formatterTooltip，位置：this.setTooltipPositionfunction }，网格：{左：20，右：20，底部：15，顶部：40，containLabel：true}，xAxis：[{类型：'类别'， axisLine: { lineStyle: { color: '#999', } }, axisLabel: { color: '#666', }, data: echartsData.totalRecentRansactions.dates , } ], yAxis: [{ type: 'value', axisTick : { 显示: false }, axisLine: { 显示: false, lineStyle: { 颜色: '#999', } }, axisLabel: { 颜色: '#666', fontSize: 13 } }], series: [{ name: '订单总金额', type: 'line', label: {normal: { show: true,//是否显示数量Please Polyline Point Position: 'Inside' } }, Data: echartsData.totalRecentRansactions.allTotalMoney }] }; 遇到的坑 1. 工具提示支持不佳 官网 Echarts 暂时不支持工具提示 但经过测试工具提示仍然有效。 但X轴对应的坐标值并不会显示在工具提示中。 您必须使用工具提示格式化程序功能来处理自己显示所需的数据。 这是代码： // 格式化工具提示 formatterTooltip(param) { return "Date:" + param[0].name + "\n" + param[0].seriesName + ": " + param[0].data }, 2 .当您单击屏幕右侧或底部附近的项目时，工具提示会超出其边界。 解决方案：将根据点击位置计算出的坐标点返回给tooltip的位置函数。 （也可以给出固定位置，但体验不太好。） // 改变tooltip的位置，处理跨越边界的情况 setTooltipPositionfunction(point, params, dom, rect, size) { //其中point是当前鼠标位置，size有两个属性：viewSize和contentSize，分别是外层div和tooltip提示框的大小 //改变显示提示框的位置。 让 x = 点[0]; // 让 y = 点[1]。 // size：包含dom的大小和echarts容器当前的大小。 示例： {contentSize: [宽度, 高度], viewSize: [宽度, 高度]} let boxWidth = size.contentSize[0]; // boxHeight = size.contentSize[1]; // 这里，dom的高度无法通过size获取，值为NAN，所以在Value下面指定一个固定值 let boxHeight = 50; //x坐标位置 let posY = 0;//y坐标位置 if (x < boxWidth) {//无法在左侧打开 posX = 5; } else {//位于左侧下方 posX = x - boxWidth } if (y < boxHeight) { //顶部边不适合 posY = 5。 } else { //顶边适合 posY = y - boxHeight; 返回 [posX, posY]。 },

上面需要注意的是计算dom的高度，官方说可以通过position回调函数的size参数获取dom的高度，但是如果你把这个打印出来 当我把它拿出来时，是南。

输出结果。

后来发现参数params的outerWidth值和参数size的contentSize宽度值是一样的，于是就一试，得到了outerHeight参数 params 做到了。 dom的高度和最终的运行效果当然是没问题的。

3。 向左或向右滑动直方图，直方图画板将变为空白。 如果我点击空白处，直方图会再次出现，但只有直方图才会出现此问题。 ！

起初我以为我的代码可能有问题。 之后又检查了几次，发现没有问题。 然后我扫码试用了官方的小程序demo。 我意识到这个问题也存在，想发泄一下。 香味。 由于这是官方代码本身的问题，所以我查看了源码如下图。

官方代码将bindtouchmove事件绑定到canvas

touchMove(e) { if (this.chart && e.touchs.length > 0 ) { var touch = e.touches[0]; var handler = this.chart.getZr().handler; handler.dispatch('mousemove', { zrX: touch.x, zrY: touch.y }); '); } },

又调用了echarts.js方法，终于得出了一个粗略的解决方案。

源码中的bindtouchmove事件

完美。解决，哈哈，或者蓬勃发展，恍惚~~~

最终效果图

演示源代码

点击此处

推荐教程：《JS教程》

下载微信客户端

微信可以通过手机网络发送语音消息、视频、照片和文字。支持手机通讯软件。 。 微信带来了全新的移动通信体验，您可以单独或群组聊天，还可以根据您的地理位置查找附近的人。 有需要的朋友，请快来保存您的下载体验吧！

这几篇文章你可能也喜欢：

• 微信小程序中echarts的用法以及你可能遇到的坑，快来收藏避雷吧！！（微信小程序echarts降低等级）
• 详细讲解如何在微信小程序中安装和引用ECharts。(如何安装小程序示例)
• 详细讲解如何在微信小程序中安装和引用ECharts。(微信小程序安装包)

本文由主机参考刊发，转载请注明：在微信小程序中使用echart https://zhujicankao.com/124051.html