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

不念不忘少年蓝@ 2022-12-05 09:59 339阅读 0赞

先看效果：

![20210208094413477.gif][]

主要是设置的：

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>

[20210208094413477.gif]: /images/20221123/2b270813493649718c124551e4bfd832.png