小程序 echarts进阶篇(四),手指缩放与放大

关于不能放大和缩放问题(小程序)

实测是echarts版本的问题,5.4.x,5.3.x都有问题,当我选择用5.1.2版本就可以双指放大缩小了!

只需要在你的option配置添加如下属性:

legend: { // 显示图例组件
      show: legendDatta ? true : false,
      data: legendDatta,
      bottom: '0',
      z: 100
    },
    // 重点,添加这个就可以了
    dataZoom: {
      type: 'inside'
    },

    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisLabel: {
        showMinLabel: true
      },
      data: xData,
    },

 tooltip文字有黑色阴影的设置tooltip.shadowBlur = 0

tooltip: {
            show: true,
            trigger: 'axis',
            shadowBlur: 0, // 去除文字阴影
            backgroundColor: 'rgba(0,0,0,0.4)',
            textStyle: {
                color: '#fff'
            },
        },

小程序 echarts图表开发基础篇(一)

小程序 echarts图表开发项目篇(二)

小程序 echarts进阶篇(三),减少echarts的体积

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
小程序中使用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地图进行放大缩小操作了。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

余温无痕

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值