vue2+echarts根据动态数组数据下拉框选折线图，点线图和另外一个下拉框单y轴和双y轴之后可以动态修改x轴和y轴的坐标轴范围

在Vue2中结合ECharts绘制图表，特别是在处理动态数组数据时，你需要通过以下几个步骤来实现下拉框选择不同类型图形并动态调整X轴和Y轴范围：

1. **初始化ECharts实例**:
首先，在Vue组件中创建一个ECharts实例，并配置基本的容器元素。

import ECharts from 'echarts';

export default {
  data() {
    return {
      chart: null,
      options: {},
      seriesData: [],
      xAxisData: [], // 动态X轴数据
      yAxisOptions: [{}, {}], // 单/双Y轴配置
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const myChart = echarts.init(this.$refs.chartContainer);
      this.chart = myChart;
      this.renderChart(); // 初始渲染
    },
    renderChart() {
      // 根据选中的系列和轴选项更新图表配置
      //...
    },
    handleDropdownChange(event) {
      // 下拉框变化事件处理，更新图表
      this.updateChartBasedOnSelection(event);
    },
  },
};

2. **响应式数据绑定**:
将动态数组数据绑定到图表的数据源，以便在下拉框选择后立即反映在图表上。

methods: {
  updateChartData(seriesType, yAxisOption) {
    this.chart.setOption({
      series: [{
        type: seriesType,
        data: this.seriesData,
      }],
      xAxis: {
        data: this.xAxisData,
      },
      yAxis: yAxisOption,
    });
  },
  updateChartBasedOnSelection(event) {
    // 根据event获取当前选择的系列类型和轴选项
    const selectedSeries = ...;
    const yAxisOption = this.yAxisOptions[event.value];
    
    this.updateChartData(selectedSeries, yAxisOption);
    this.chart.resize(); // 更新图表大小适应新范围
  },
},

3. **动态设置轴范围**:
在`updateChartData`函数中，你可以根据需要设置X轴和Y轴的范围，比如：

updateChartData(selectedSeries, yAxisOption) {
  this.chart.setOption({
    // ...
    xAxis: {
      data: this.xAxisData,
      // 设置X轴的范围
      range: [minXValue, maxXValue],
    },
    yAxis: yAxisOption,
    // 如果是双Y轴，则分别设置
    yAxis: [
      { ...yAxisOption[0], range: [minY1Value, maxY1Value] },
      { ...yAxisOption[1], range: [minY2Value, maxY2Value] },
    ],
  });
}