文章随笔笔记

Echarts-坐标轴

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

详细配置

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

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

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

轴线

通过 yAxis 或 xAxis 下的 axisLine 属性配置。

  • show(boolean)：显示或隐藏轴线。
  • symbol(String|Array)：设置轴线两头是否包含箭头，默认为 "none"，也可以设置为 "arrow" 这时坐标轴两端都会有箭头出现，想要只有外侧出现箭头，需要设置为 ["none","arrow"]。
  • symbolSize(Array)：设置箭头宽高，如：[10,20]，index0 表示宽度为 10，index1 表示高度为 20。
  • lineStyle

刻度

通过 yAxis 或 xAxis 下的 axisTick 属性配置。

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

分割线

通过 yAxis 或 xAxis 下的 splitLine 配置

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

分割线数量：yAxis 或 xAxis 下的 splitNumber 属性设置。

轴标签

通过 yAxis 或 xAxis 下的 axisLabel 属性设置：

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

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

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'
    }
  ]
};
cd ..