微信小程序使用echarts遇到的问题
问题1:ec-canvas出现上下滑动页面会漂移
解决方法:在标签内加 force-use-old-canvas="true"
问题2:echarts的tooltip会超出边界
解决方法:
// 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];
}
// 2、使用方法
tooltip: {
show: true,
trigger: 'axis',
position: setTooltipPosition, // 不超出边界
},
微信小程序使用echarts遇到的问题的更多相关文章
- 微信小程序使用 ECharts 实现数据可视化
微信小程序使用 ECharts 显示图表 首先创建微信小程序 这里就不再赘述 下载 GitHub 上的 ecomfe/echarts-for-weixin 下载后解压,打开文件夹,里面的 ec-can ...
- 微信小程序引入ECharts组件
首先打开ECharts网页 https://echarts.apache.org/zh/tutorial.html#%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8 ...
- 微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题
1.微信小程序使用echarts,首先下载echarts并导入小程序项目中,因小程序后期上线对文件大小有要求,所以建议进行定制下载导入可减少文件大小占比,也可以下载以前旧版本文件比较小的应付使用 下载 ...
- 微信小程序遍历Echarts图表,实现多个饼图
如何在微信小程序中使用Echarts可以看我的另一个教程:点击查看 首先看一个简单的例子 1.wxml文件 <view style='width:100%;height:200rpx'> ...
- 微信小程序使用 ECharts
echarts-for-weixin 是 ECharts 官方维护的一个开源项目,提供了一个微信小程序组件(Component),我们可以通过这个组件在微信小程序中使用 ECharts 绘制图表. e ...
- 微信小程序 Echarts 异步数据更新
微信小程序 Echarts 异步数据更新的练习,被坑了很多次,特作记录. 作者:罗兵 地址:https://www.cnblogs.com/hhh5460/p/9989805.html 0.效果图 ...
- 微信小程序中使用ECharts 异步加载数据 实现图表
<!--pages/bar/index.wxml--> <view class="container"> <ec-canvas id="my ...
- 微信小程序在ios下Echarts图表不能滑动的解决方案
问题现象 这个问题的现象说起来很简单. 小程序页面中有一篇很长的文章,内部有一个Echarts图表,手指上下滑动观看内容. 但是手指滑动区域在Echarts图表上时,页面却不能滑动了. 如下图: 追踪 ...
- 在微信小程序中使用 echarts 图片-例 折线图
首先进入echarts官方[https://echarts.apache.org/handbook/zh/get-started/].这边只需要在小程序中简单应用一下echarts折线图 所以不需要把 ...
随机推荐
- CSS 常用的定位和布局方法汇总(已添加源码地址)
CSS-Layout 旨在打造详尽的前端布局代码学习库(自从用了框架开发,CSS生疏了不少,所以开这个库练练手)SF不能正确解析含有中文的网址,所以某些预览链接无法跳转,请访问我的博客阅读此文 常见定 ...
- 微信小程序黑客马拉松即将开始,来做最酷的 Mini Program Creators!
微信小程序黑客马拉松正式启动 近日,小程序斩获一项世界级殊荣--作为一项全新的技术和应用创新,小程序首次获选世界互联网领先科技成果.目前小程序应用数量已超过 100 万,覆盖了 200 多个细分行业, ...
- Python使用逻辑回归估算OR值
第一种是统计学方法,需要用到 statsmodels包 statsmodels是统计和计量经济学的package,包含了用于参数评估和统计测试的实用工具 第二种是机器学习,需要使用sklearn中的L ...
- Docker操作容器2
Docker操作容器1:https://blog.csdn.net/Kevinnsm/article/details/ 1.如何更改docker容器中的配置文件(如nginx容器中的nginx.con ...
- Filebeat和logstash 使用过程中遇到的一些小问题记录
一.filebeat 收集软链文件日志 1.1.场景 由于我们新部署的Nginx 日志都是采用的软链的形式. lrwxrwxrwx 1 root root 72 Apr 6 00:00 jy.baid ...
- docker将jar打包镜像文件
1.首先需要编写dockerfile文件,通过dockerfile文件将jar包打成镜像 编写dockerfile文件 # 定义父镜像 FROM java:8 # 维护者信息 MAINTAINER c ...
- uniapp中添加vant组件
首先是npm i vant@2 -S 下载vant包 接下来就是找到main.js引入vant 然后就是在页面中直接使用 会发现没有样式 最后再找到app.vue再style里面全局引入vant的样式 ...
- SpringBoot 入门及配置
1.首先创建Maven文件,右键单击鼠标,others搜索Maven,点击Maven Project 2.点击下一步,打上勾下一步,输入包名和项目名称 3.第三步修改pom.xml导入Maven依赖M ...
- 比较爽的导航查询 功能 - SqlSugar ORM
1.导航查询特点 作用:主要处理主对象里面有子对象这种层级关系查询 1.1 无外键开箱就用 其它ORM导航查询 需要 各种配置或者外键,而SqlSugar则开箱就用,无外键,只需配置特性和主键就能使用 ...
- android软件简约记账app开发day08-时间对话框的书写+改bug,改bug
android软件简约记账app开发day08-时间对话框的书写+改bug,改bug 绘制对话跨页面 在添加记账信息功能中,我提供了用户添加备注添加事件的功能,设计是点击时间会弹出一个时间对话框供用户 ...