echarts 弹出放大_angular 实现 echarts 拖动区域进行放大 方法

要实现 echarts 拖动区域进行放大，可以使用 echarts 提供的 dataZoom 组件。具体实现方法如下：

1. 在 HTML 中添加 echarts 组件的容器：

<div id="chartContainer" style="width: 100%; height: 500px;"></div>

2. 在 TypeScript 中引入 echarts，并初始化 echarts 实例：

import * as echarts from 'echarts';

const chart = echarts.init(document.getElementById('chartContainer'));

3. 定义数据和配置项：

const data = {
  xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  yData: [820, 932, 901, 934, 1290, 1330, 1320],
};

const option = {
  xAxis: {
    type: 'category',
    data: data.xData,
  },
  yAxis: {
    type: 'value',
  },
  series: [{
    data: data.yData,
    type: 'line',
  }],
};

4. 添加 dataZoom 组件：

option.dataZoom = [{
  type: 'inside',
  start: 0,
  end: 100,
}, {
  start: 0,
  end: 100,
  handleSize: '80%',
  handleStyle: {
    color: '#fff',
    shadowBlur: 3,
    shadowColor: 'rgba(0, 0, 0, 0.6)',
    shadowOffsetX: 2,
    shadowOffsetY: 2,
  },
  textStyle: {
    color: '#fff',
  },
}];

chart.setOption(option);

5. 最后，监听 dataZoom 组件的事件，获取当前的缩放范围，并更新数据：

chart.on('dataZoom', (params: any) => {
  const start = params.batch[0].start;
  const end = params.batch[0].end;
  const startIndex = Math.round(data.xData.length * start / 100);
  const endIndex = Math.round(data.xData.length * end / 100);
  const newData = {
    xData: data.xData.slice(startIndex, endIndex),
    yData: data.yData.slice(startIndex, endIndex),
  };
  chart.setOption({
    xAxis: {
      data: newData.xData,
    },
    series: [{
      data: newData.yData,
    }],
  });
});

这样，当用户拖动 dataZoom 区域时，就会触发 dataZoom 事件，根据当前的缩放范围更新数据，并重新渲染 echarts 图表。