小程序echarts缩放问题

已于 2023-06-28 14:43:58 修改
阅读量285 收藏
点赞数
文章标签： echarts
于 2023-06-28 14:36:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43258615/article/details/131436504
版权

小程序echarts版本5.4.x或5.3.x数据缩放有问题，请选择5.1.2版本的

下载引入之后,统计图缩放大小,才会起作用

dataZoom: [{ type: 'inside'}]

实现小程序,手指缩放统计图数据区域缩放

jojo~.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序canvas实现矩形缩放
01-09
微信小程序canvas实现矩形缩放
echarts 卡_小程序运行echarts 使用dataZoom 真机调试很卡
weixin_39612499的博客
12-19 933
微信使用echarts ec-canvas 区域缩放 真机调试不流畅 很卡// pages/study/study.jsimport * as echarts from '../../ec-canvas/echarts';function initChart(canvas, width, height) {const chart = echarts.init(canvas, null, {widt...
使用echarts进行创建中国地图---根据经纬度标记点数过大时，点的位置出现卡顿不随地图移动、放大而变化的优化方案
DL_jianglin的博客
03-14 2235
在我的一个项目中，出现了需要定义5000个坐标的数据量的展示，但是当数据量达到3000后时，点位初始位置没问题，但是地图在拖动变化时点位就固定在一个地方不动，最后发现下面的方法，希望对大家有用。 ...
uniapp/微信小程序解决echarts层次问题
qq_54864762的博客
07-09 2326
1.由于原生的canvas组件高于其他组件2.这样设置z-index没有用3.大部门解决办法是将echarts转化成图片看了微信小程序官方文档，官方提供了一种cover-view标签来覆盖canvas、video等层级过高问题 所以本次使用cover-view来解决层级问题一下以下是代码实现： ...
echarts 解决缩放引起漂移
falali162的博客
11-26 667
在使用setattribute函数时，style会覆盖原有状态，如果不指定高度，将导致还原时高度过大问题。当完成设置后echarts需要更新。
微信小程序结合echarts完美实现缩放折线图，圆环图，饼图
qq_44713087的博客
12-25 6704
今天做了折线图和饼图，作为一个后端程序员，做前端页面是真难受，在网上找了很多资料和代码，一路磕磕碰碰总算是写出来了。下面我分享给大家，大家直接粘贴就可以了。不用想我一样痛苦了，最起码比我好受点了。 引入echarts组件 为了兼容小程序 Canvas，echarts提供了一个小程序的组件，用这种方式可以方便地使用 ECharts。 首先，下载 GitHub 上的项目。点击进入github进行下载...
微信小程序 图片缩放拖动
08-21
微信小程序图片缩放 拖动，亲测可用（别人写的，拿来分享下）。因为小程序程序包大小有限制，把两个gif图片删除就行了，删除不影响使用
微信小程序自定义组件实现图片单指拖动双指缩放效果
03-18
一个小程序用的双指缩放组件，相关文章地址见博客《微信小程序使用自定义组件实现图片双指缩放效果》。(现在资源怎么不可以设置为不要积分了0.)
微信小程序canvas实现文字缩放
01-12
微信小程序canvas实现文字缩放，包含小程序项目所有文件，在小程序开发工具可直接打开，也可单独查看whml、wxss、js文件查看实现细节。
微信小程序手势缩放图片
10-30
微信小程序手势缩放图片,移动查看组件,简单的配置直接可以使用
echarts 放大与缩放的功能
热门推荐
u014678583的博客
07-28 4万+
// 内置型数据区域缩放组件（dataZoomInside）：内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。 // 滑动条型数据区域缩放组件（dataZoomSlider）：有单独的滑动条，用户在滑动条上进行缩放或漫游。 function getOption(titles, xData, legendDatta, series, top) { var option = { title: { text: titles, .
在微信小程序中使用echarts以及遇到的问题
深渊那支花的博客
10-28 6062
个人认为是小程序的canvas在加载的时候只展示页面可视区域的图表，在网上查了很多办法都没有解决，最后在一位大佬的建议下自己摸索出来了。其中 ec 是一个我们在 index.js 中定义的对象，它使得图表能够在页面加载后被初始化并设置。用scroll-view将echarts要显示的区域包裹，在每次页面滚动时触发bindscroll函数，重新加载echarts图表。但是手指滑动区域在Echarts图表上时，页面却不能滑动了。最终完美的解决了问题 ，在安卓和IOS都没问题，亲测有效如上图。
小程序 echarts进阶篇（四），手指缩放与放大
u014678583的博客
07-28 5601
只需要在你的option配置添加如下属性： legend: { // 显示图例组件 show: legendDatta ? true : false, data: legendDatta, bottom: '0', z: 100 }, // 重点，添加这个就可以了 dataZoom: { type: 'inside' }, xAxis: { type: 'category', .
微信小程序——Echarts使用（保姆式教程）
不迁怒，不贰过。小知识，大智慧。
06-17 9284
一、Echarts 简介 二、小程序中引入 Echarts 1、下载echarts插件 2、定制图形，生成 echarts.min.js 文件 3、替换 echarts.js 文件 三、小程序中使用 Echarts
echarts 地图拖拽和缩放
weixin_45328041的博客
07-13 5578
禁止拖拽和缩放 在配置中roam设置为false,开启为true 只拖拽或只缩放 缩放 roam设置为’scale’，拖拽roam设置为’move’
echarts地图移动缩放卡顿问题
mgdj25的博客
01-13 2758
echarts地图卡顿
小程序 echarts进阶篇（三），减少echarts的体积
u014678583的博客
07-28 2687
如果是从官网下载下来的echarts会有900多KB的大小，小程序开发不采用分包，然后你那个图片又多，很容易就超出小程序限制的2M大小，所以我们可以借用官网的自定义构建来自定义需求， echarts在线构建 选择好配置之后点击下载，如果勾选了代码压缩就会下载echarts.min.js，没有勾选的话是echarts.js，建议正式发布版是下载压缩过后的，要不然文件还是会很大。 2、下载压缩版好后，把echarts.min.js修改成echarts.js，然后覆盖你项目中的echar..
小程序echarts地图放大缩小
最新发布
04-18
在小程序中使用echarts地图进行放大缩小操作，可以通过以下步骤实现： 1. 引入echarts库：在小程序的页面中引入echarts库，可以通过npm安装或者直接引入CDN链接。 2. 创建canvas：在小程序的wxml文件中创建一个canvas标签，并设置宽高和id属性。 3. 获取canvas实例：在小程序的js文件中，通过wx.createCanvasContext方法获取canvas的上下文对象。 4. 初始化echarts：使用echarts.init方法初始化echarts实例，并将canvas的上下文对象传入。 5. 设置地图配置：通过echarts.setOption方法设置地图的配置项，包括地图类型、数据等。 6. 监听手势事件：通过canvas的touchstart、touchmove、touchend事件监听用户的手势操作。 7. 处理手势事件：根据用户手势的变化，调用echarts实例的setOption方法更新地图的缩放比例。 下面是一个示例代码： ```javascript // wxml文件 <canvas id="map" style="width: 100%; height: 100%;"></canvas> // js文件 const echarts = require('echarts'); Page({ onLoad: function () { const ctx = wx.createCanvasContext('map'); const chart = echarts.init(ctx); // 设置地图配置 const option = { // 地图配置项 }; chart.setOption(option); // 监听手势事件 let touchStartDistance = 0; let touchMoveDistance = 0; let scale = 1; let lastScale = 1; wx.onTouchStart((e) => { if (e.touches.length === 2) { touchStartDistance = this.getDistance(e.touches); } }); wx.onTouchMove((e) => { if (e.touches.length === 2) { touchMoveDistance = this.getDistance(e.touches); scale = touchMoveDistance / touchStartDistance * lastScale; chart.setOption({ geo: { zoom: scale } }); } }); wx.onTouchEnd(() => { lastScale = scale; }); }, // 计算两个触摸点之间的距离 getDistance(touches) { const x1 = touches.clientX; const y1 = touches.clientY; const x2 = touches.clientX; const y2 = touches.clientY; return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); } }); ``` 这样就可以在小程序中使用echarts地图进行放大缩小操作了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值