微信小程序使用echarts遇到的问题
2022/2/19 11:11:41
本文主要是介绍微信小程序使用echarts遇到的问题,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
问题1:ec-canvas出现上下滑动页面会漂移
解决方法:在标签内加 force-use-old-canvas="true"
问题2:echarts的tooltip会超出边界
解决方法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | // 1、封装的函数方法 export const setTooltipPosition = function (point, params, dom, rect, size) { // console.log(params, dom) //其中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]; } |
1 2 3 4 5 6 | // 2、使用方法 tooltip: { show: true, trigger: 'axis', position: setTooltipPosition, // 不超出边界 }, |
这篇关于微信小程序使用echarts遇到的问题的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
原文链接: https://www.cnblogs.com/elevens/p/15911947.html
- 2024-12-31苹果手机微信小程序底部有一条横线,页面如何兼容?-icode9专业技术文章分享
- 2024-12-31微信小程序如何获取页面高度?-icode9专业技术文章分享
- 2024-12-30uni-app微信小程序怎么修改默认导航栏的间距样式?-icode9专业技术文章分享
- 2024-12-30uni-app微信小程序全局配置自定义导航栏有哪些方法?-icode9专业技术文章分享
- 2024-12-30在Uni-app 微信小程序中怎么使用 Vant 组件库的导航栏组件?-icode9专业技术文章分享
- 2024-12-30微信小程序的 WXSS 中怎么实现单行文本超过部分显示省略号?-icode9专业技术文章分享
- 2024-12-24微信小程序资料入门指南
- 2024-12-20微信小程序开发入门指南
- 2024-12-20小程序 createCameraContext() 怎么实现识别条形码功能?-icode9专业技术文章分享
- 2024-11-22微信小程序的接口信息py可以抓到吗?-icode9专业技术文章分享