Echarts实现隐藏x轴，y轴，刻度线，网格

最新推荐文章于 2023-11-15 17:48:27 发布

原创最新推荐文章于 2023-11-15 17:48:27 发布 · 781 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #js #vue #php

这篇博客详细介绍了如何使用Echarts配置Y轴，使其在图表中显示为线段而非传统的数轴形式。通过设置`yAxis`的`show`, `boundaryGap`, `type`, `data`, `axisLine`, `axisTick`和`splitLine`等属性，可以实现Y轴的定制，例如隐藏轴线、刻度线和网格线，只保留类别数据的线段表示。

效果如图：

"yAxis": [
      {
        //就是一月份这个显示为一个线段，而不是数轴那种一个点点
        "show" : true,
        "boundaryGap": true,
        "type": "category",
        "name": "时间",
        "data": ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"],
        "axisLine":{       //y轴
          "show":false

        },
        "axisTick":{       //y轴刻度线
          "show":false
        },
        "splitLine": {     //网格线
          "show": false
        }
      }
    ],
    "xAxis": [
      {
        "show" : false,
        "type": "value",
        "name": "销量(kg)",
        "splitLine": {
          "show": false
        }
      }
    ],