h5下echarts roam不生效

5 篇文章 0 订阅

背景:使用uni-app开发h5,其中一个页面含有echarts-关系图,需要可拖拽与缩放

问题:在h5下不能拖拽与缩放,在pc下正常

问题排查:

1、官网模板代码在h5下能拖拽与缩放 => 怀疑是echarts版本问题 更换为模板代码使用的版本 =>依旧不生效

2、将相同的代码放在新开的html页面 能拖拽与缩放 => 不是代码的问题

3、上网查找解决办法 发现https://ask.dcloud.net.cn/question/88473

原因:echarts自带运行环境的判断,而在h5环境中,存在全局变量wx。在引用echarts前设置wx为undefined

 init() {
        window.wx = undefined; // echarts自带运行环境的判断,而在h5环境中,存在全局变量wx。在引用echarts前设置wx为undefined
        const echarts = require("@/common/js/plugins/echarts.min.js");        
        const myChart = echarts.init(this.$refs.pieEcharts);
        .....
}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
可以通过 echarts 的事件处理来实现树图单击不缩放,双击缩放的效果。具体实现如下: 1. 设置 echarts 的 option,将 `roam` 属性设置为 `'scale'`,表示支持缩放操作。 2. 通过 `chart.on` 方法监听 `click` 和 `dblclick` 事件。 3. 在 `click` 事件回调函数中,获取当前的缩放比例 `zoom`,如果缩放比例为 1,则返回,不做任何操作。 4. 在 `dblclick` 事件回调函数中,获取当前的缩放比例 `zoom`,如果缩放比例不为 1,则将缩放比例设置为 1,即恢复初始状态。 以下是示例代码: ```javascript // 设置 echarts 的 option var option = { roam: 'scale', // 设置支持缩放操作 // 其他配置项 }; // 初始化 echarts 实例 var chart = echarts.init(document.getElementById('chart')); // 设置 option chart.setOption(option); // 监听 click 和 dblclick 事件 chart.on('click', function (params) { // 获取当前缩放比例 var zoom = chart.getOption().dataZoom[0].zoom; // 如果缩放比例为 1,则返回,不做任何操作 if (zoom === 1) { return; } // 其他操作 }); chart.on('dblclick', function (params) { // 获取当前缩放比例 var zoom = chart.getOption().dataZoom[0].zoom; // 如果缩放比例不为 1,则将缩放比例设置为 1,即恢复初始状态 if (zoom !== 1) { chart.dispatchAction({ type: 'dataZoom', start: 0, end: 100, }); } }); ``` 以上代码中,`dispatchAction` 方法用于触发 echarts 的行为,这里用于将缩放比例设置为 1。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值