echart柱状图点击柱状触发一个事件

收藏个项目中遇到的问题: echart柱状图点击柱状触发一个事件

 // 方式一:点击有数据的条形柱体查询相关U盘id,获取对应U盘id的列表数据

      myChart.on("click", params => {
        // console.log(params);
        let year = params.name;
        let dateLinkage = {};
        this.sideMenu.map(item => {
          item.children.map(itemChild => {
            if (itemChild.value === year) {
              dateLinkage = item;
              dateLinkage.children = [{ ...itemChild }];
            }
          });
        });
        console.log(dateLinkage, dateLinkage.children[0]);
        this.selectSideMenuItem(dateLinkage, dateLinkage.children[0]);
      });
      // 方式二:整条柱体的点击事件(如果要实现获取id的效果,则需要拿到series的数组,再通过index拿到对应的数据对象)
      // myChart.getZr().on("click", params => {
      //   console.log(params);
      //   const pointInPixel = [params.offsetX, params.offsetY];
      //   if (myChart.containPixel("grid", pointInPixel)) {
      //     let xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [
      //       params.offsetX,
      //       params.offsetY
      //     ])[0];
      //     this.getAlertList(parseFloat(this.risk_value), this.date_x[xIndex]);
      //   }
      // });
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 ECharts 柱状图中设置显示鼠标位置的数据信息,你可以使用 ECharts 提供的 tooltip 组件。tooltip 组件可以在鼠标悬浮在数据项上时,自动显示该数据项的详细信息。 为了启用 tooltip 组件,你需要在 ECharts 的 option 配置对象中添加一个 tooltip 属性。下面是一个示例: ```javascript option = { // ... 其他配置项 tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' // 鼠标悬浮在柱状图上时,显示一个阴影 } }, series: [{ type: 'bar', data: [10, 20, 30, 40, 50], // ... 其他配置项 }] }; ``` 在上面的示例中,我们通过 trigger 属性设置 tooltip 组件的触发方式为 'axis',表示鼠标悬浮在轴上时触发 tooltip。同时,我们设置了 axisPointer 属性的 type 为 'shadow',表示当鼠标悬浮在柱状图上时,显示一个阴影。在 series 中的 data 属性中,我们定义了柱状图数据。 如果你想要在 tooltip 中显示更详细的信息,可以通过 formatter 属性来自定义 tooltip 的显示内容。例如: ```javascript option = { // ... 其他配置项 tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, formatter: function(params) { var dataIndex = params[0].dataIndex; var value = params[0].value; return '数据项 ' + dataIndex + ': ' + value; } }, series: [{ type: 'bar', data: [10, 20, 30, 40, 50], // ... 其他配置项 }] }; ``` 在上面的示例中,我们通过 formatter 函数自定义了 tooltip 的显示内容。在函数中,我们可以通过 params 参数获取到当前鼠标悬浮的数据项的信息,例如 dataIndex 和 value。然后,我们可以根据这些信息来自定义 tooltip 的显示内容。在这个示例中,我们只显示了当前数据项的索引和数值。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值