小程序多个echars_微信小程序中使用echarts以及踩坑总结
人在家中坐,锅从天上来。
半个月前本来在家写着一个项目,还没来得及提测,领导突然一个电话,需要立刻去支援另一个项目,一打听,一个烂尾半年的项目,纵使内心不愿意,还是要去啊。因为鲁迅说过,生活就像强*,既然不能反抗,那就好好享受吧。
这个项目分为PC端、用户端小程序和商家端小程序,这里主要讲讲在商家端中的某个模块,需要用到数据统计图表,当时觉得有两个插件不错:
因为之前在项目中使用echarts比较多,所以最终选择了echarts作为项目中的图表插件。
echarts的引入
我是按照echarts官网教程来引入的,很简单,不多说。传送门
echarts中使用多个图表
wxml代码如下:
js代码如下
data: {
isShoweyes: true,
turnoverEc: {
lazyLoad: true,
},
customerEc: {
lazyLoad: true,
},
priceEc: {
lazyLoad: true,
},
echartsData: {}
},
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,发现也有这个问题,顿时只想对它口吐芬芳。既然是官方代码自身的问题,于是去看了下源码,如下:
官方代码给画布绑定一个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源码
小程序多个echars_微信小程序中使用echarts以及踩坑总结相关推荐
- python开发微信小程序-Python 开发者的微信小程序开发实践
导读 在知乎上,有人提问"如何使用 Python 开发微信小程序". 其实微信小程序作为一个前端的机制,Python 并不能插上边.只不过可以作为后端接口为微信小程序提供数据服务而 ...
- 万能门店小程序_超市门店微信小程序注册流程
现在超市门店商家利用小程序卖货已经非常普遍,小程序可以便捷地连接线上线下通道,让商家不再局限于门店周围的流量,能够从微信获取更多客户,从而提升销量和店铺知名度.超市要想有自己的线上电商小程序,就得先注 ...
- 小程序助手多功能微信小程序反编译工具
介绍: 小程序助手多功能微信小程序反编译工具,软件采用 VS 2017 编译,需安装.net 4.0 或以上版本方可运行,理论上 win7 .win10及以上系统 x86 x64 运行正常,条件有限未 ...
- 微量小程序联盟,如何实现微信小程序换量和微信小程序推广?
长期以来各位许多小程序运营者,一直在为小程序如何推广和烦恼!今天我就为大家推荐一个小程序换量推广平台,可以快速帮我们解决小程序粉丝增长难的问题! 微量小程序联盟--专注小程序换量推广 微量小程序联盟- ...
- mpvue微信小程序动画_mpvue 与微信小程序的火花
介绍 项目介绍 WeScale 定位为音乐训练小程序,初期规划了基础音阶的三个训练,以及他们的镜像模式. 数字简谱 字母简谱 数字简谱对字母简谱 后期看情况更新追加其他训练. 产品展示 扫描下方小程序 ...
- 微信小程序开发语言(微信小程序开发教程)详细步骤
微信小程序开发语言 开发微信小程序用什么语言 1.微信小程序开发所需要的语言比较特别,首先介绍一下需要使用到的文件类型大致分为:WXML(WeiXin Mark Language 微信标记语言).WX ...
- 微信小程序:去水印工具微信小程序源码
这是一个去水印小程序 支持各大平台短视频去水印 支持图集去水印 另外还有一个功能也就相当于抖音一样刷短视频 偷偷告诉你们哟,刷的短视频都是热门小姐姐哟!惊不惊喜意不意外 小程序源码下载地址: 微信小程 ...
- 微信小程序全选,微信小程序checkbox,微信小程序购物车
微信小程序,这里实现微信小程序checkbox,有需要此功能的朋友可以参考下. 摘要: 加减商品数量,汇总价格,全选与全不选 设计思路: 一.从网络上传入以下Json数据格式的数组 1.标题titl ...
- 从0开发《工程测绘大师》小程序之什么是微信小程序篇(一)
我们今天来讲讲如何从0开发<工程测绘大师>小程序之什么是微信小程序篇.先来说说什么是微信小程序,什么是微信小程序?为什么会有微信小程序诞生?它到底解决了什么痛点?与传统的网页开发和APP相 ...
最新文章
- linux java socket编程_linux下java程序与C语言程序通过SOCKET通信的简单例子
- 如何评价rcnn、fast-rcnn和faster-rcnn这一系列方法?
- 编程之美-电梯调度算法方法整理
- MySQL数据库在众多表中对表名的查询及预处理存储过程(变量做表名)
- ShuttleFlow 2.0版本跨链协议上线,同时支持OKExChain、Heco及BSC双向互操作
- php数组写杨辉三角java_用java实现杨辉三角的示例代码
- matlab 数字字母,MATLAB读取txt(包含字母和数字)
- cdt规约报文用程序解析_程序员必备的学习笔记《TCP/IP详解(二)》
- 照明灯智能控制器c语言编程,基于51单片机的智能照明灯控制系统设计(含电路图,原理图,程序)...
- [转]struct和class的区别 观察者模式 https连接 点击button收到点
- HEX、RGB颜色表
- WPF实现半圆形导航菜单
- 国产品牌积极布局,游戏手机会是行业增长新风口吗?
- ppt压缩文件怎么压缩最小,ppt无损压缩
- 万豪国际集团推出“双十一”多样化旅行套餐产品
- css眨眼效果,CSS3 精巧的笑脸/眨眼变形动画
- 高中数学公式必背的50条秒杀技巧(学霸必备)
- Ardupilot-链接汇总
- 【设计模式】我对设计模式的C语言解读(上)
- puppeteer 清空input原本的值
热门文章
- audio type多种类型_http content-type常见文件格式类型
- 【带你重拾Redis】Redis事务
- Python中的__name__和__main__含义详解
- flux服务器推消息,在Spring WebFlux响应式处理程序中发送JMS消息:它是否阻塞?
- 如果面试官问你 JVM,额外回答逃逸分析技术会让你加分!
- 小程序获取用户手机号_社区团购小程序应该如何推广才能获取更多用户?
- python怎么重启内核_解决jupyter运行pyqt代码内核重启的问题
- python numpy array最大长度_python 中 numpy array 中的维度
- springboot 优雅停机_Spring Boot 2.3 新特性优雅停机详解
- 计算机组成原理名词解释常用,2018考研408计算机组成原理名词解释(3)