小程序/移动端在echarts范围内点击或拖动时获取x轴下标(echart监听点击拖动)

const chart=echarts.init(canvas, null, {...略});

//在echarts初始化时调用chartOn函数
this.chartOn(chart)

//处理点击或拖动函数
chartOn(chart:any){
      const _this=this
      //监听点击‘click’并处理
      chart.getZr().on('click', function (param:any){
        // 所点击的像素坐标点
        const pointInPixel = [param.offsetX, param.offsetY]

        // 使用 convertFromPixel方法 将像素坐标值转换成逻辑坐标系上的点
        let pointInGrid = chart.convertFromPixel({ seriesIndex: 0 }, pointInPixel);

        // 所点击点的X轴坐标点所在X轴data的下标
        let xIndex = pointInGrid[0];

        //点击范围是否在grid逻辑坐标系内
        if(chart.containPixel('grid', pointInPixel)){
          //在逻辑坐标系内则保存数据,或进行其它逻辑处理
          _this.setData({
            index:xIndex
          })
        }

      })
      
      //监听拖动‘mouseup’并处理
      chart.getZr().on('mouseup', function (param:any){
        //同上述
      })
 },

ECharts中,为了实现当X滚动条被拖动Y自动显示而不是被隐藏的效果,你需要设置图表的一些属性来确保其交互性。以下是一个基本步骤: 1. **初始化配置**: 创建ECharts实例,并在配置中指定`responsive`属性,这将允许图表在容器大小改变动态调整布局。 ```javascript var myChart = echarts.init(document.getElementById('main'), 'macarons'); myChart.setOption({ responsive: true, }); ``` 2. **启用数据视图**: 数据视图(Data View) 可以帮助你在图表的某个部分进行聚焦,而不会隐藏其他部分。在配置选项中添加`dataView`。 ```javascript myChart.setOption({ dataView: { // 其他数据视图配置 autoShow: true, // 自动显示数据视图 }, }); ``` 3. **设置滚动事件监听**: ECharts 提供了 `resizeHandler` 和 `scrollbar` 相关的事件处理,可以监听 X 滚动条的变化。例如: ```javascript myChart.on('scrollbar dragging', function (params) { // params.event 里包含了滚动事件的信息,如 scrollLeft if (params.event.scrollLeft !== undefined) { // 根据需要调整 Y 的行为 myChart.axisPointer.axisIndex = 'y'; // 如果需要对Y指针操作 myChart.axisPointer.resize(); // 更新指向的位置 } }); ``` 4. **调整显示**: 如果你想控制Y的显示/隐藏,可以在的配置中设置 `show` 属性。例如,在 X 滚动更新后检查并设置 Y 的状态: ```javascript function updateAxisDisplay() { if (!myChart.barChartOption xAxisParams.showWhenScroll) { // 设置Y的 show 当 X不在滚动范围 myChart.setOption({ yAxis: { show: false } }); } else { // 显示Y myChart.setOption({ yAxis: { show: true } }); } } updateAxisDisplay(); // 初始加载后执行一次 myChart.on('scrollbar dragging', updateAxisDisplay); // 滚动事件触发更新 ``` 记得替换上述代码中的 `xAxisParams.showWhenScroll` 为你实际的需求条件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

秋月华星

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

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

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

打赏作者

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

抵扣说明:

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

余额充值