微信小程序使用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折线图 所以不需要把 ...
随机推荐
- A小程序与B小程序相互跳转的一点记录
要点速览: A小程序和B小程序关联同一个公众号 B程序的用户授权 A小程序和B小程序的用户关联 诸葛 io 统计用户访问信息 需求:微信放开小程序互跳的 API 后,一些导流和拉新等活动可以在新的小程 ...
- Graphics 与 DisplayObject 的关系
在原生 Canvas 中,其实并没有 DisplayObject 的概念,它只有绘制图像的概念. 大部分的原生绘制图形或图像的 API 一般是这样的: api(x, y, ...) 例如 rect 就 ...
- mysql find_in_set在oracle下的解决方案
比如一张表: artile (id,type,content); type:1表示文艺类,2表示小说类,3表示传记,4表示传说,等等5,6,7,8 表数据: id type content 1 3,1 ...
- 微信小程序插件组件-Taro UI
微信小程序组件使用以下官网查看 ↓ ↓ ↓ https://taro-ui.jd.com/#/docs/fab
- nodejs全局对象简析
Global:全局变量 定时器.控制台输出.事件 模块化相关的一些全局变量 path/url相关的一些全局变量 编码相关的 buffer:缓存(简单介绍) Process:进程(重点解析) 一.Glo ...
- 拼凑一个ABP VNext管理后台
介绍 本项目前后端分离,后端采用ABP VNext框架,前端Vue. 项目地址: https://github.com/pojianbing/AuthCenter 目前包含的模块有: 身份认证管理 I ...
- Java基础之浅谈接口
前言 前几篇文章我们已经把Java的封装.继承.多态学习完了,现在我们开始比较便于我们实际操作的学习,虽然它也是Java基础部分,但是其实入门容易,精通很难. 我认真的给大家整理了一下这些必须学会.了 ...
- 帝国CMS灵动标签调用包含指定短语关键词关键字文章的语法
[e:loop={"select * from phome_ecms_news where title like '%这里是关键词%' and checked=1 order by news ...
- 高精度加法(C++实现)
高精度加法 简介 用于计算含有超过一般变量存放不下的非负整数 高精度加法这个过程是模拟的小学竖式加法计算 步骤 以下有顺序之分 数组清零 输入 获取长度 逆置 字符型数字转成对应的整型数字 计算并输出 ...
- 2021.07.19 P2624 明明的烦恼(prufer序列,为什么杨辉三角我没搞出来?)
2021.07.19 P2624 明明的烦恼(prufer序列,为什么杨辉三角我没搞出来?) [P2624 HNOI2008]明明的烦恼 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn ...