vue绘制折线图可以选择横坐标范围

Vue可以使用第三方图表库来绘制折线图，比如ECharts、Highcharts等。这些图表库通常都支持设置横坐标轴的范围。

以ECharts为例，可以使用xAxis.min和xAxis.max属性来设置横坐标轴的最小值和最大值。示例代码如下：

<template>
  <div>
    <div ref="chart" style="width: 600px; height:400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const myChart = echarts.init(this.$refs.chart);

      // 模拟数据
      const data = [];
      for (let i = 0; i <= 100; i++) {
        data.push([i, Math.random() * 100]);
      }

      const option = {
        xAxis: {
          type: 'value',
          min: 20, // 设置最小值
          max: 80, // 设置最大值
        },
        yAxis: {
          type: 'value',
        },
        series: [{
          type: 'line',
          data: data,
        }],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  }
};
</script>

在上面的代码中，我们使用了ECharts绘制了一个折线图，并通过xAxis.min和xAxis.max属性设置了横坐标轴的范围为20到80。你可以根据自己的需求来调整这个范围。