Echarts-坐标轴

2023.04.29

bar_none_axis 在一些后台管理系统的数据面板上,我看到过像这种没有坐标轴的图表,那么如何使用 echarts 来实现这种效果?
首先,看看 echarts 的坐标轴属性,图示如下:
only_axis_rect

详细配置

这里只列举出一些常用的属性,其他的可以翻阅 配置文档

这些配置里面有一个通用的设置 lineStyle

  • color:颜色支持 HEXRGBRGBA 格式。
  • width:线宽。
  • type"dashed""dotted""solid" v5.x 支持数字或数字数组来控制虚线类型如 [5,10] 会呈现 5 实线 10 虚线的轴线。

轴线

通过 yAxisxAxis 下的 axisLine 属性配置。

  • show(boolean):显示或隐藏轴线。

  • symbol(String|Array):设置轴线两头是否包含箭头,默认为 "none",也可以设置为 "arrow" 这时坐标轴两端都会有箭头出现,想要只有外侧出现箭头,需要设置为 ["none","arrow"]

  • symbolSize(Array):设置箭头宽高,如:[10,20],index0 表示宽度为 10,index1 表示高度为 20。

  • lineStyle

刻度

通过 yAxisxAxis 下的 axisTick 属性配置。

  • alignWithLabel(boolean):是否和标签居中对齐,默认为 false,就是在标签的右侧。
  • interval(number):设置隔几个标签显示一个刻度,会在你设置的数字上 + 1。
  • inside(boolean):刻度线朝向,true 为朝内,false 为朝外,默认 false
  • length(number):刻度线长度,可以非常非常长,超过图表。
  • lineStyle

分割线

通过 yAxisxAxis 下的 splitLine 配置

  • show(boolean):是否显示分割线,type 为 category 的分割线默认不显示。
  • interval(number):设置隔几个标签显示一个分割线,会在你设置的数字上 + 1。
  • lineStyle

分割线数量:yAxisxAxis 下的 splitNumber 属性设置。

轴标签

通过 yAxisxAxis 下的 axisLabel 属性设置:

  • show(boolean):显示或隐藏,默认显示。
  • inside(boolean):标签位置,默认 false 即标签在轴线外。

所以想实现开头就提到的无座标轴柱状图,我们可以这样设置图表的配置项:

js
let option = {
  xAxis: {
    type: 'category',
    axisLabel:{
      show: false // 隐藏坐标轴标签
    },
    axisLine:{
      show: false // 隐藏轴线
    },
    axisTick:{
      show: false // 隐藏刻度线
    },
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    axisLabel:{
      show: false
    },
    splitLine:{
      show: false // 隐藏分割线
    },
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};

本文最后更新于 2023 年 5 月 15 日