微信小程序使用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折线图 所以不需要把 ...
随机推荐
- ES6-11学习笔记--模块化
模块化规范有: CommonJS:Node.js AMD:require.js CMD:sea.js ES6:Module ES6模块化使用: 关键词:export.import.as.exp ...
- java中类变量和实例变量的实质区别?
类变量和实例变量的区别 相对于static(静态的)或说类的, 本章开始提到的都是instance(实例的)或说对象的. 每个对象都有自己的一份儿对象域或实例域,相互之间没关系, 不共享. 我们可以从 ...
- number(10,6)正则表达式
/** * 判断number(10,6) * @param dateStr * @return */ public boolean isNumJW(String ...
- 在Wireshrak中使用过滤器——捕获过滤器
过滤器可以让你找出你所希望进行分析的数据包.简单来说,一个过滤器就是定义了一定条件,用来包含或者排除数据包的表达式.如果你不希望看到一些数据包,你可以写一恶搞过滤器来屏蔽它们.如果你希望只看到某些数据 ...
- Python入门-分支循环结构
编写代码的过程中,除了基本的变量,数据类型,在实际开发中,大量代码是根据判断条件,进而选择不同的的向前运行方式. 这些向前的运行方式基本分为两种:分支结构,循环结构 1.分支结构 if单分支结构 # ...
- 阿里云-部署-服务-Docker
目录 ♫ MusicPlayer Naiveboom - 比较安全 个人阿里云部署的小服务,欢迎使用,服务器资源有限,如果遇到卡顿还请谅解~ 索引: 在线音乐播放器 阅后即焚 ♫ MusicPlaye ...
- vim 下几种比较省劲的方式(vi结合着用)
Vim的几种模式 正常模式:可以使用快捷键命令,或按:输入命令行. 插入模式:可以输入文本,在正常模式下,按i.a.o等都可以进入插入模式. 可视模式:正常模式下按v可以进入可视模式, 在可视模式下, ...
- python的for循环基本用法
for循环 for循环能做到的事情 while循环都可以做到 但是for循环语法更加简洁 并且在循环取值问题上更加方便 name_list = ['jason', 'tony', 'kevin', ' ...
- springboot项目找不到符号问题以及模块聚合项目maven插件使用的相关问题
问题如图 更换maven,清空缓存重新导入依赖依然无效后 解决方法: 方式一:删除项目中.idea文件夹,重新打开项目,选中jdk版本 ,重新导入依赖即可. 最近又遇到找不到符号问题,本地运行没问题, ...
- [已解决] npm ERR! code EINVALIDPACKAGENAME Invalid package name "": name cannot start with an underscore;
打开 cmd 输入 `npm update -g` 等待更新完成即可