echarts中折线图添加手柄，x轴数据隔一个显示一个

先看效果：

主要是设置的：

axisLabel: {
      interval: 1, // x轴数据显示设置；0：则显示所有的；1：隔一个显示一个
      textStyle: {
        color: "#A8B6CD",
      },
      // 默认x轴字体大小
      fontSize: 12,
      // margin:文字到x轴的距离
       margin: 15,
 },

全部代码如下：

<template>
  <!-- 本月总业绩,新签，续费，课收 折线图公用组件 -->
  <div id="curr" style="width: 100%;height: 80%"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      myChart: null,
      colors: ["#3297F9", "#99EB8B"],
      option: null,
    };
  },
  mounted() {
    this.initCurrentChart();
    window.addEventListener("resize", () => {
      //执行
      if (this.myChart) {
        // 判断一下，防止在初始化的时候报错，cannot read property 'resize' of null
        this.myChart.setOption(this.option);
        this.myChart.resize();
      }
    });
  },
  destroyed() {
    window.removeEventListener("resize", () => {
      this.myChart = null;
    });
  },
  methods: {
    initCurrentChart() {
      var _that = this;
      this.myChart = this.$echarts.init(document.getElementById("curr"));
      // var colors = ["#5793f3", "#d14a61", "#675bba"];
      this.option = {
        color: _that.colors,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            label: {
              show: true,
              backgroundColor: "#fff",
              color: "#556677",
              borderColor: "rgba(0,0,0,0)",
              shadowColor: "rgba(0,0,0,0)",
              shadowOffsetY: 0,
            },
            lineStyle: {
              width: 0,
            },
          },
          // 格式化提示框数据以及样式
          formatter: function (params, ticket, callback) {
          var htmlStr = '';
          for(var i=0,leng = params.length;i < leng ; i++){
              var param = params[i];
              var xName = param.name;//x轴的名称
              var seriesName = param.seriesName;//图例名称
              var value = param.value;//y轴值
              var color = param.color;//图例颜色
              if(i===0){
                var time = xName.split('/')
                  htmlStr += '<span style="color:#A9B6CD;">' + time[0] + '月' + time[1] + '日' + '<br/>' + '</span>' ;//x轴的名称
                  }
              htmlStr +='<div>';
              //为了保证和原来的效果一样，这里自己实现了一个点的效果
              htmlStr += '<span style="margin-right:5px;width:0.2rem;height:0.2rem;border-radius:50%;border:0.04rem solid '+color+';"></span>';
              //圆点后面显示的文本
               htmlStr += '<span style="color:#333333;font-size:0.17rem;">' + seriesName + '：</span>' +'<span style="color:#333333;font-size:0.22rem;">'+ value + '</span>'
              if(i===0){
                htmlStr += '<span style="color:#333333;font-size:0.21rem;">' + 'w' +'</span>'
              }else{
                htmlStr += '<span style="color:#333333;font-size:0.21rem;">' + '%' +'</span>'
              }
              htmlStr += '</div>';
              }
              return htmlStr;
              },
          backgroundColor: "#fff",// 提示框背景色
          textStyle: {
            color: "#5c6c7c",
          },
          padding: [10, 10],
          extraCssText: "box-shadow: 0 0 2px 0 rgba(163,163,163,0.5)",
        },
        grid: {
          left: "25",
          right: "35",
          bottom: "45",
          top: "20",
          containLabel: true,
        },
        dataZoom: [
          {
            id: "dataZoomX",
            type: "slider",
            backgroundColor: "#F2F5F9",
            fillerColor: "#BFCCE3",
            showDataShadow: false,
            height: 13,
            handleSize: 22,
            right: 60,
            left: 60,
            bottom: 15,
            handleSize: "200%", // 手柄大小
            borderColor: "none", 
            handleIcon:
              // "M0,0 v9.7h5 v-9.7h-5 Z", // 画一个长方形
              "path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z",// 画一个圆形
            handleStyle: { 
              color: '#BFCCE3', 
              global: true  , // 缺省为 false
              shadowBlur: 6,
              shadowColor: 'rgba(123, 154, 204, 0.5)',
              shadowOffsetX: 0, // 阴影偏移x轴多少
              shadowOffsetY: 0 // 阴影偏移y轴多少
            }
         }, 
        ],
        toolbox: {
          feature: {
            dataView: { show: false, readOnly: false },
            restore: { show: false },
            saveAsImage: { show: false },
          },
        },
        // legend: {
        //   data: ["item1", "item2"],
        //   bottom: 0,
        // },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            data: [
              "12/01","12/02","12/03", "12/04","12/05","12/06","12/07","12/08","12/09","12/10","12/11","12/12","12/13","12/14",
              "12/15","12/16","12/17","12/17","12/19","12/20","12/21","12/22","12/23","12/24","12/25","12/26","12/27","12/27","12/29","12/30",
            ],
            axisLine: {
              lineStyle: {
                color: "#DCE2E8",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 1, // 0：则显示所有的；1：隔一个显示一个
              textStyle: {
                color: "#A8B6CD",
              },
              // 默认x轴字体大小
              fontSize: 12,
              // margin:文字到x轴的距离
              margin: 15,
            },
            axisPointer: {
              // 鼠标悬浮到x 轴上方时，显示阴影
              type: "shadow", // 指示器类型
              // type 为 'shadow' 时，shadowStyle设置有效。
              shadowStyle: {
                color: {
                  // 填充的颜色。
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#fff", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#D4E7FB", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
              z: 0, // 设置x轴上的阴影
              label: {
                padding: [0, 0, 0, 0],
                // 这里的margin和axisLabel的margin要一致!
                margin: 15,
                // 移入时的字体大小
                fontSize: 12,
                backgroundColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#fff", // 0% 处的颜色
                    },
                    {
                      offset: 0.86,
            /*
             0.86 = （文字 + 文字距下边线的距离）/（文字 + 文字距下边线的距离 + 下边线的宽度）
             */
                      color: "#fff", // 0% 处的颜色
                    },
                    {
                      offset: 0.86,
                      color: "#33c0cd", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#33c0cd", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            boundaryGap: false,
          },
        ],
        yAxis: [
          {
            type: "value",
            position: "left",
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false, // 是否显示y轴
            },
            axisLabel: {
              textStyle: {
                color: "#A9B5CD",
              },
              formatter: "{value}w",
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed", // y 轴分割线类型，虚线类型
                color: "#BECCE3", // 分割线颜色
                opacity: 0.5, // 分割线颜色透明度
              },
            },
          },
          {
            type: "value",
            position: "right",
            axisTick: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: "#A9B5CD",
              },
              formatter: "{value}%",
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#DCE2E8",
              },
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "总业绩",
            type: "line",
            smooth: true,
            showSymbol: false,
            lineStyle: {
              width: 5,
              shadowColor: "rgba(50,151,249, 0.3)",
              shadowBlur: 10,
              shadowOffsetY: 20,
            },
            symbolSize: 10,
            data: [10,10,30,12,15,3,7,12,11,14,25,16,22,41,34,25,16,33,23,14,12,15,3,7,12,11,14,25,16,22],
          },
          {
            name: "同比",
            type: "line",
            smooth: true,
            yAxisIndex: 1,
            showSymbol: false,
            symbolSize: 10,
            lineStyle: {
              width: 5,
              shadowColor: "rgba(153,235,139, 0.3)",
              shadowBlur: 10,
              shadowOffsetY: 20,
            },
            data: [5,12,11,14,25,16, 10,5,12, 11,14,25,16,10,
              5,12,11,14,25, 8,14, 25,16,10,5,12, 11,14,25,16,
            ],
          },
        ],
      };
      this.myChart.setOption(this.option);
    },
  },
};
</script>

<style lang="less" scoped>
</style>