echarts散点图缩放

要实现echarts散点图的缩放，可以使用echarts的dataZoom组件。该组件可以在散点图上添加滑块或按钮来控制缩放。具体步骤如下：

1. 引入dataZoom组件：

import 'echarts/lib/component/dataZoom';

2. 在echarts的option中配置dataZoom组件：

option = {
  ...
  dataZoom: [
    {
      type: 'slider', // 滑动条型数据区域缩放
      xAxisIndex: 0, // 操作x轴
      start: 0, // 起始位置
      end: 100 // 结束位置
    },
    {
      type: 'slider', // 滑动条型数据区域缩放
      yAxisIndex: 0, // 操作y轴
      start: 0, // 起始位置
      end: 100 // 结束位置
    }
  ],
  ...
};

其中，type可以选择'slider'或'inside'，分别表示滑块和按钮形式的缩放控件；xAxisIndex和yAxisIndex表示操作哪个轴；start和end表示缩放的起始和结束位置，范围为0-100。

3. 在散点图数据中添加值：

series: [
  {
    type: 'scatter',
    data: [
      [10.0, 8.04],
      [8.0, 6.95],
      ...
    ]
  }
]

4. 在页面中渲染echarts图表，并设置宽高：

<template>
  <div class="chart-container">
    <div ref="chart" class="chart"></div>
  </div>
</template>

<script>
import echarts from 'echarts';
import 'echarts/lib/component/dataZoom';

export default {
  mounted() {
    const chartDom = this.$refs.chart;
    const myChart = echarts.init(chartDom);
    const option = {
      ...
    };
    myChart.setOption(option);
    window.addEventListener('resize', () => {
      myChart.resize();
    });
  }
};
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 500px;
}
.chart {
  width: 100%;
  height: 100%;
}
</style>

以上就是基本的echarts散点图缩放的实现方法。