echarts折线图圆弧渐变，横坐标间隔显示

实现效果

父组件

              <echartsGradient echartsNo="one" :echartData="echartGraidVisit" />

子组件

<template>
  <div :id="'main' + echartsNo" class="mainBox"></div>
</template>

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

export default {
  props: {
    echartsNo: {
      type: String,
      default: ""
    },
    echartData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      currentColor: []
    };
  },
  mounted() {
    this.init();
  },
  watch: {
    echartData() {
      this.init();
    }
  },
  methods: {
    init() {
      // 一个页面多次引用设置不同的渐变色
      this.currentColor =
        this.echartsNo === "three"
          ? [
              {
                offset: 0,
                color: "rgb(80, 189, 255)"
              },

              {
                offset: 1,
                color: "rgb(133, 94, 233)"
              }
            ]
          : [
              {
                offset: 0,
                color: "rgb(47, 106, 255)"
              },
              {
                offset: 0.5,
                color: "rgb(14, 247, 255)"
              },
              {
                off