vue中使用echarts实现X轴动态时间（天）的折线图表

项目要求x轴以一天为间隔，时间是动态返回的数据，折线图平滑展示

实现代码如下：

<div class="echarts-main">
   <v-chart ref="echarts" :options="options" />
</div>



// 局部引入vue-echarts
import ECharts from 'vue-echarts';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/tooltip';

export default {
  components: {
    'v-chart': ECharts
  },
  data(){
    return {
        statisticsData: []
    }
  },
  computed: {
    options() {
      const options = {
        tooltip: {
          trigger: 'axis' // 显示横坐标值
        },
        xAxis: {
          type: 'time',
          boundaryGap: false,
          axisPointer: {
            type: 'shadow' // 阴影指示器
          },
          interval: 24 * 60 * 60 * 1000, // 固定x轴时间间隔 间隔24小时，也就是一天
          axisLabel: {
            // color: '#76EEC6'
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            type: 'line',
            smooth: true, // 平滑曲线显示
             areaStyle: {
              normal: {
                color: '#8cd5c2' //改变区域颜色
              }
            },
            itemStyle: {
              normal: {
                color: '#8cd5c2', //改变折线点的颜色
                lineStyle: {
                  color: '#8cd5c2' //改变折线颜色
                }
              }
            },
            data: this.statisticsData
          }
        ]
      };
      return options;
    }
  },
  mounted(){
    this.getApplicationInfoApi()
  },
  methods:{
    getApplicationInfoApi(){
        // 接口返回的数据格式
        const res = [
        {
          date: '2024-04-19 00:00:00',
          count: 6
        },
        {
          date: '2024-04-20 00:00:00',
          count: 21
        },
        {
          date: '2024-04-21 00:00:00',
          count: 34
        },
        {
          date: '2024-04-22 00:00:00',
          count: 20
        },
        {
          date: '2024-04-23 00:00:00',
          count: 5
        },
        {
          date: '2024-04-24 00:00:00',
          count: 11
        },
        {
          date: '2024-04-25 00:00:00',
          count: 4
        }
      ];
      let arr = [];
      res.forEach(item => {
        arr.push([dayjs(item.date).format('YYYY-MM-DD'), item.count]);
      });
      this.statisticsData = arr;
    }
  }
}

xAxis中 type：time，表示X轴为时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。

series中的 smooth设置为true，表示为平滑曲线显示。

series中的 data可以是一个二维数组。

例如：

series: [{
    data: [
        // 维度X   维度Y   其他维度 ...
        [  3.4,    4.5,   15,   43],
        [  4.2,    2.3,   20,   91],
        [  10.8,   9.5,   30,   18],
        [  7.2,    8.8,   18,   57]
    ]
}]