Echarts用极坐标实现【圆形的仪表盘】

第一次尝试使用Echarts极坐标实现图表，记录一下。

实现echarts版本：4.9.0

先上效果图如下：

option参数如下（没有title）：

polarOption = {
  color: chartColor,
  angleAxis: [
    {
      polarIndex: 0,
      startAngle: 180,
      max: 10,
      min: 0,
      interval: 2.5,
      splitNumber: 4,
      zlevel: 22,
      axisLabel: {
        show: true,
        margin: 1,
        color: '#BBBBC4',
      },
      axisTick: {
        inside: true,
        length: 5,
        lineStyle: {
          color: '#fff',
        },
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    {
      polarIndex: 1,
      startAngle: 180,
      max: 10,
      min: 0,
      interval: 0.5,
      zlevel: 20,
      splitNumber: 4,
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        inside: true,
        show: true,
        length: 2,
        lineStyle: {
          color: '#fff',
        },
      },
    },
  ],
  polar: [
    {
      radius: ['55%', '70%'],
      center: ['49%', '57%'],
    },
    {
      radius: ['55%', '70%'],
      center: ['49%', '57%'],
    },
  ],
  radiusAxis: [
    {
      polarIndex: 0,
      type: 'category',
      data: ['Thu'],
      z: 10,
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      boundaryGap: false,
    },
    {
      polarIndex: 1,
      z: 15,
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
  ],
  series: [
    {
      type: 'bar',
      polarIndex: 0,
      showBackground: true,
      backgroundStyle: {
        color: '#E1E4EB',
      },
      data: [7.8],
      coordinateSystem: 'polar',
      name: 'Thu',
      stack: 'a',
      barWidth: 20,
      emphasis: {
        focus: 'series',
      },
    },
  ],
}

灵感来源于官方的极坐标柱状图例子Examples - Apache ECharts

angleAxis角度轴设置

设置两个角度坐标轴，一个对应外层大刻度，一个对应里层小刻度（如果不需要两个大小的刻度可以只设置一个坐标轴）

// 外层大刻度
axisTick: {
    inside: true,
    length: 5,
    lineStyle: {
    color: '#000',
    },
  }      

// 里层小刻度
  axisTick: {
    inside: true,
    show: true,
    length: 2,
    lineStyle: {
      color: '#000',
    },
  },

radiusAxis径向轴设置

因为设置了两个角度轴，所以对应要设置两个径向轴，参数可调整

polar极坐标系设置

设置极坐标系的center（中心）、radius（半径大小）

polar: [
    {
      radius: ['55%', '70%'],
      center: ['49%', '57%'],
    },
    {
      radius: ['55%', '70%'],
      center: ['49%', '57%'],
    },
  ]

series图表配置

这里用的是第一个坐标系，所以标记了index

polarIndex: 0,

  series: [
    {
      type: 'bar',
      polarIndex: 0,
      showBackground: true,
      backgroundStyle: {
        color: '#E1E4EB',
      },
      data: [7.8],
      coordinateSystem: 'polar',
      name: 'Thu',
      stack: 'a',
      barWidth: 20,
      emphasis: {
        focus: 'series',
      },
    },
  ],

到这就完成啦，其中还有一些level的小细节，不过对这个图表影响不大。