xiehuachuan-雷达图

描述:当前是关于Echarts图表中的 雷达图 示例。
 
            const value1 = [5000, 5000, 5000, 5000, 5000, 5000]
  const value2 = [6500, 5000, 4000, 5500, 4000, 2100]

option = {
   backgroundColor: '#000',
    tooltip: {
      backgroundColor: 'rgba(47,63,79,0.8)',
      borderWidth: 0,
      textStyle: {
        color: '#DAECFF'
      }
    },
    legend: {
      right: '0',
      top: '0',
      itemWidth: 12,
      itemHeight: 12,
      textStyle: { color: '#DAECFF'}, 
      data: [{
        name: '规则数',
        icon: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAAXNSR0IArs4c6QAAAWBJREFUOE+lk0Fu1TAQhr9xbE8FWEKCbml6E44C12DDUbgK54BKzQaxaVrUvKpqw8uPbKInvYhNqTdOJvlm/n88ttef1aeZ9zxxzYmvdvpJHxT48kQWMz4e4H3gcR+ZFIQFkIF1oCAzqzuq8e7WSvdg+Qh+MI27F8tAArJMGZmD2juyJJND+RbP/MreHsOLxp2WQRnwBkASluEQi6j86Hq/2cIz43S/H8gB0vIXzqiqWJ9brFzFM5/YVL5jnH5psNQqVcmmvFBtWBZVMslU7sK539ubY9m3jNPPFW4/LuABDgmQElaW0Pu8ha8Zp0suyVjzmVD13hpVm+bVSqBEeudf8AVDO++wdjjKcBOu0JJVz4Xe4xa+Ydx9Z6jni6BudJiiZMmQC7KpnNL7ybZhVfYFQxsItfqHPG1o4gq/07m/2lTezzz+npgqZYZJtf66moz6AdJLSkgcT9h/zfZzbtUfvwLMqcX+td0AAAAASUVORK5CYII='
      }, {
        name: '通过率',
        icon: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAAXNSR0IArs4c6QAAAlJJREFUOE9NU01r1VAQPZOk0uZ+ZOWiu67ezr27vqVrf0G6dS/4U0SEQMEKFQQRLIjSLHShGzdCMf20tH1tbbF9fX3NS3LvyCSt7ZBhZu7cM2dmyCWsDeaAsI9WXGduRMIwvI7a4O6dnKbXjtOaOXNgyCdCRJCAQRBPpE0xQ1IsAfMC3S9O0gmQVWV5cW94NoiiCGEUIgxChGGEaCpq/UDOiLBfu9mRZwPvF2hu4yRtKMjc4UEx++NrbpQinSSIjWGjDJTWZLRhZRLMxNN4fjTsF2XVA1FKD7aHaU0+mwz2C/t9NVfaQhvTqlKarDWslSatEswYzS+Oz/vrZd3jIEjp4e4wbUDZ+GC3wJdPubFysWOyWkNJIS3FLJQ1ePnnol9Mmo750WCUTjjIzva2i6vVlbxl1BbGGtJKQ5uEBdwV0cjOq/56WfVYZn58fJXWjOx0d7s4+vg+19bA6LZNNknHqoyGjoU9weJIwE2PA0opPanabR/tbBZbH97mxlhIARW3rF2hxLKKFRlt8ar088XE9dptPxk2aeMp29taL36+W/7ftlYK2iayNBhrScv2Y0VLdTi/Ublu5qdDThtC9nuzKL69WcplKVp18wkoVoaNzCvnscaym+q3YA4WWjACZHubRfH59WLXtlZQYmVO2cHNmbJYCWf6vyrfc87dgsvx6OJ0cDiQf7kmkAsiboIAojUIDYkfYcA0+9d7U7K/Bd99D5VnjEWdw9iJf2M9xk7UYcI+pWdXPOdqXL+q2xKlcyjhcenQgksHXDqHy9pjDMkh/wf/UTbB8BqBawAAAABJRU5ErkJggg=='
      }]
    },
    radar: {
      name: {
        textStyle: {
          color: '#DAECFF',
          fontSize: 14,
          padding: [-8, -8]
        }
      },
      // 分隔区域配置项
      splitArea: {
        show: true,
        areaStyle: {
          color: 'rgba(255, 255, 255, 0.1)'
        }
      },
      // 分割线
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        }
      },
      // 坐标轴轴线相关设置
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        }
      },
      indicator: [
        { name: '完整性', max: 8000 },
        { name: '一致性', max: 8000 },
        { name: '及时性', max: 8000 },
        { name: '重复性', max: 8000 },
        { name: '有效性', max: 8000 },
        { name: '准确性', max: 8000 }
      ]
    },
    series: [
      {
        type: 'radar',
        data: [
          {
            value: value1,
            name: '规则数',
            symbol: 'none',
            areaStyle: {
              normal: {
                color: 'rgba(0, 71, 255, 1)',
                opacity: 0.4
              }
            },
            lineStyle: {
              width: 1,
              color: 'rgba(0, 71, 255, 1)'
            }
          },
          {
            value: value2,
            name: '通过率',
            symbol: 'none',
            areaStyle: {
              normal: {
                color: 'rgba(142, 244, 253, 1)',
                opacity: 0.4
              }
            },
            lineStyle: {
              width: 1,
              color: 'rgba(142, 244, 253, 1)'
            }
          }
        ]
      }
    ]
  };