在vue2中使用Echarts的折线图，有多条线，为什么数值最小的线，在最上面

在Vue2中使用ECharts绘制折线图时，如果你有多条线条，并且发现数值最小的那条线位于图表上方，这通常是由于默认的Y轴（数值轴）设置导致的。ECharts会按照数据从大到小的顺序自动排序线条，如果你的数据数组里最小值排在前面，那么对应的线就会显示在顶部。

要解决这个问题，你可以手动设置`series.data`的顺序，确保数值最小的放在最后。此外，你还可以配置`series.sortName`属性，指定按名称或数值排序，以及`stack`属性来控制堆叠层级，这样可以调整线条的展示位置。

示例代码：

<template>
  <div id="chartContainer" style="height: 400px;"></div>
</template>

<script>
import ECharts from 'echarts';

export default {
  data() {
    return {
      chartData: [
        { name: '线1', value: [20, 30, 50, 70, 80] },
        { name: '线2', value: [10, 15, 25, 35, 45] }, // 最小值在这条线上
        { name: '线3', value: [90, 80, 60, 50, 40] }
      ]
    };
  },
  mounted() {
    this.createChart();
  },
  methods: {
    createChart() {
      const myChart = echarts.init(document.getElementById('chartContainer'));
      
      // 设置系列数据并手动排序
      let sortedData = this.chartData.sort((a, b) => a.value[0] - b.value[0]);
      myChart.setOption({
        series: [{
          name: '折线图',
          type: 'line',
          data: sortedData.map(item => item.value),
          stack: '总量' // 如果有堆叠需求，可以加上这个属性
        }]
      });
    }
  }
};
</script>