echarts 雷达圆形图

最新推荐文章于 2024-04-01 10:58:14 发布

wind croon

最新推荐文章于 2024-04-01 10:58:14 发布

阅读量468

点赞数 10

分类专栏： echarts图表文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_42250468/article/details/135294682

版权

echarts图表专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果图:
在这里插入图片描述

代码:

option =  {
    legend: {
      data: ['分析']
    },
    graphic: [
      {
        type: 'group',
        left: 'center',
        top: 'center',
        children: [
          {
            type: 'text',
            z: 2,
            left: 'center',
            top: 'center',
            style: {
              text: '85',
              fontSize: 50,
              fontWeight: 'bold',
              fill: '#55d5f9'
            }
          }
        ]
      },
      {
        type: 'group',
        left: '57%',
        top: '51%',
        children: [
          {
            type: 'text',
            z: 2,
            left: 'center',
            top: 'center',
            style: {
              text: '分',
              fontSize: 14,
              fill: '#55d5f9'
            }
          }
        ]
      }
    ],
    radar: {
      shape: 'circle',
      indicator: [
        { name: '设备完好率', max: 100, axisLine: { lineStyle: { color: '#18c7fe', type: 'dashed' } }, nameGap: 5 },
        { name: '报警处置率', max: 100, axisLine: { lineStyle: { color: '#f78a8a', type: 'dashed' } }, nameGap: 5 },
        { name: '设备巡检率', max: 100, axisLine: { lineStyle: { color: '#f2d43d', type: 'dashed' } }, nameGap: 5 },
        { name: '人员管理', max: 100, axisLine: { lineStyle: { color: '#ff9ed1', type: 'dashed' } }, nameGap: 5 },
        { name: '设备管理', max: 100, axisLine: { lineStyle: { color: '#cd9dfe', type: 'dashed' } }, nameGap: 5 },
        { name: '预案管理', max: 100, axisLine: { lineStyle: { color: '#c0c0c0', type: 'dashed' } }, nameGap: 5 }
      ],
      radius: 120,
      startAngle: 90,
      splitNumber: 3,
      splitLine: {
        show: true,
        lineStyle: {
          color: ['#63c2ff'],
          type: 'dashed'
        }
      },
      splitArea: {
        //show: false,
        areaStyle: {
          color: ['#0f4154', '#0f4154', '#0f4154'],
          shadowColor: '#32dadd',
          shadowBlur: 10
        }
      },
      axisLine: {
        lineStyle: {
          color: '#63c2ff',
          type: 'dashed'
        }
      },
      boundaryGap: true
    },
    series: [
      {
        name: '',
        type: 'radar',
        data: [
          {
            name: '',
            value: [85, 90, 80, 83, 78, 70],
            areaStyle: {
              color: '#32dadd'
            }
          }
        ]
      }
    ]
  };