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) => {
          let str = '公里数：<br />';
          params.forEach((item: { color: string; name: string; data: string[]; }) => {
            str += '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:'
              + item.color + '"></span>' + item.name + ' : ' + item.data + '<br />';
          });
          return str;
        }
      },
      grid: [{
          // 是否显示直角坐标系网格
          show: false,
          // grid 组件的宽度
          height: 0,
          top: 40,
          left: 70,
          right: 10,
        }],
      xAxis: [{
          gridIndex: 0,
          type: 'category',
          data: this.chartList.stateMileageArr,
          // 坐标轴次刻度线
          minorTick: {
            show: false
          },
          // 坐标轴刻度
          axisTick: {
            show: false,
          },
          axisLabel: {
            formatter: (value: string, index: any) => {
              return this.chartList.stateNameArr[index];
            }
          }
        }],
      yAxis: [{
          gridIndex: 0,
          show: false,
          type: 'value'
        }],
      series: [{
          type: 'scatter',
          xAxisIndex: 0,
          yAxisIndex: 0,
          data: this.chartList.stateMileageArr
        }]
    };

2.html配置：(chartDataZoom)触发datazoom滚动事件，事件参考可看github官网：

https://github.com/xieziyu/ngx-echarts/blob/master/src/app/pages/demo-basic/basic/basic-events/basic-events.component.html

  <div id="ostchart" echarts [options]="alignOption" (chartDataZoom)="onChartEvent($event, 'chartDataZoom')"></div>

3.ts事件监听方法

onChartEvent(event: any, type: string) {
    const ostchart = getInstanceByDom(document.getElementById('ostchart') as HTMLElement); // 根据id获取 dom 容器上的实例
    const op = ostchart.getOption() as EChartsOption; // angular严格模式需要做数据转换
    const startValue = (op.dataZoom as Array<any>)[0].startValue; // dataZoom开始值
    const endValue = (op.dataZoom as Array<any>)[0].endValue; // dataZoom开始值
    const start =  (op.xAxis as Array<any>)[0].data[startValue]; // 起始X轴的值
    const end =  (op.xAxis as Array<any>)[0].data[endValue]; // 结束X轴的值
    console.log('chart event:', type, event);
    console.log('chart value:', startValue, endValue, start, end);
  }

 4.页面及输出