vue使用echarts制作的散点图时间坐标间隔不均匀

我从父组件中传数据给子组件draw.vue，然后在draw中使用echarts做散点图，横坐标设置为时间轴。
但时间轴间隔和标签显示都不理想，我想间隔是一个月一格均匀分布，时间标签从传过来的数据中提取，然后格式设置成这样：2021-01，2021-02,2021-03，2021-04，2021-05。该怎么设置呢？

从父组件中传过来的数据格式为：
[ [ "2021-04-30", 2143 ], [ "2021-02-27", 5721 ], [ "2021-01-13", 245 ], [ "2021-03-13", 4982 ], [ "2021-01-22", 4439 ]]

我的draw.vue

<template>
  <div>
  <div
      class="chart-container"
      ref="chart1"
      :style="{ width: '800px', height: '460px' }"
    >
  </div>
    {{drawScatterData}}
  </div>>
</template>

<script>
export default {
  props: ['drawScatterData'],
  data(){
    return {
    }
  },
  watch: {
    drawScatterData: {
      handler(n,o) {
          this.drawScatter();
      },
      deep: true,
    }
  },
  mounted() {
    this.drawScatter();
  },
  methods: {
    drawScatter() {
      let myChart = this.$echarts.init(this.$refs.chart1);
      let option = {
        backgroundColor: '#fff',
        title: {
          text: 'CP8日期-里程分布',
          padding:[10,800,0,40],     // 四个数字分别为上右下左与原位置距离
        },
        grid: {
          top: 40,
          bottom: 20,
          left: 20,
          right: 20,
          containLabel: true
        },
        xAxis: {
          name: '生产日期(CP8Date)',
          type: 'time',
          nameTextStyle: {
            padding: [30, 0, -115, -400]    // [30, 0, -110, -400]四个数字分别为上右下左与原位置距离
          },
          splitLine: { show: true },
          axisLabel:{
            rotate:90,
            // formatter: function(params, index){
            //   let y = this.drawScatterData[0].getFullYear();
            //   let m = this.drawScatterData[0].getMonth();
            //   console.log(this.drawScatterData[0]);
            //   console.log(y + '-' +(m<10? '0'+m:m));
            //   return y + '-' +(m<10? '0'+m:m);
            //
            // },
          },
          data: this.drawScatterData[0]
        },
        yAxis: {
          name: '里程',
          nameTextStyle: {
            padding: [-60, 20, 0, -200]    // [-60, 0, -20, -220]四个数字分别为上右下左与原位置距离
          },
          nameRotate: 90,
          splitLine: { show: true }
        },
        series: [
          {
            symbolSize: 6,
            data: this.drawScatterData,
            type: "scatter",
          },
        ],
      };
      myChart.setOption(option);
      console.log(option.xAxis);
    },
  },
};
</script>

把数据转换一下呀。

let data = [ [ "2021-04-30", 2143 ], [ "2021-02-27", 5721 ], [ "2021-01-13", 245 ], [ "2021-03-13", 4982 ], [ "2021-01-22", 4439 ]];
let result = data.map(v=>{return [v[0].substr(0,7),v[1]]});
//注意这个时候result中会有重复的月份，因为之前是按照日期展开的，现在变成月份了，粒度大了，就有重复的了，需要进行合并
let merged={};
result.forEach(v=>{merged[v[0]] = merged[v[0]]? (merged[v[0]]+v[1]):v[1];});
let temp =[];
Object.keys(merged).forEach(v=>{temp.push([v,merged[v]])});
//之后再按照月份升序排一下
let final = temp.sort();
/**最后得到的结果如下
0: Array [ "2021-01", 4684 ]
​
1: Array [ "2021-02", 5721 ]
​
2: Array [ "2021-03", 4982 ]
​
3: Array [ "2021-04", 2143 ]
**/