主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情! |
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作 |
当人们坐在家里的时候,罐子就会从天上掉下来。
半个月前我正在家里写一个项目,还没来得及测试,领导突然打电话给我,让我立即支持另一个项目。 当我询问时,我发现这是一个推出不到半年的项目。 即使你内心感到不舒服。 如果你喜欢请。 鲁迅说:“人生如强奸”。 你无法抗拒它,所以就享受它吧。
本项目分为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教程》
下载微信客户端
微信可以通过手机网络发送语音消息、视频、照片和文字。支持手机通讯软件。 。 微信带来了全新的移动通信体验,您可以单独或群组聊天,还可以根据您的地理位置查找附近的人。 有需要的朋友,请快来保存您的下载体验吧!
这几篇文章你可能也喜欢:
本文由主机参考刊发,转载请注明:在微信小程序中使用echart https://zhujicankao.com/124051.html
评论前必须登录!
注册