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

ennnmm

已于 2024-07-24 15:35:14 修改

阅读量666

点赞数 15

CC 4.0 BY-SA版权

分类专栏： echart学习合集文章标签： echarts vue.js html5

于 2024-07-22 18:51:15 首次发布

本文链接：https://blog.csdn.net/qq_42885450/article/details/140357860

第一次尝试使用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: {
        sh