angular2+监听echarts的dataZoom事件，并获取开始值和结束值

最新推荐文章于 2024-12-19 18:36:23 发布

原创

最新推荐文章于 2024-12-19 18:36:23 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #angular

本文介绍如何在Angular应用中使用ECharts时，监听dataZoom事件并获取开始和结束值。通过设置option中的dataZoom和xAxis配置，结合axisLabel的formatter实现特定需求。在HTML中使用 `(chartDataZoom)` 触发事件，并在TS文件中定义监听方法，从而在数据滚动时获取变化范围。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.option中dataZoom配置及xAxis配置：

因为我做的需求是需要lable展示与value值两个，所以我用了axisLabel的formatter

this.option = {
      dataset: {
        source: this.chartList.stateDataSet,
      },
      dataZoom: [
        {
          top: 100,
          type: 'slider',
          xAxisIndex: [1, 2, 3, 4, 5],
          realtime: false, // 只在拖拽结束的时候更新
          labelFormatter: (index: number) => {
            let str = '';
            console.log(this.chartList.stakeMileageArr);
            if (this.chartList.stakeMileageArr[index]) {
              // labelFormatter返回值是个string，需将数据转换为string
              str = this.chartList.stakeMileageArr[index].toString();
            }
            return str;
          }
        }
      ],
      axisPointer: {
        link: [{ xAxisIndex: 'all' }],
      },
      tooltip:
      {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          axis: 'y',
        },
        formatter: (params: any) =>