在echarts中实现雷达图效果

1.效果

3.png

2.代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }

      #main {
        /* width: 100%; */
        width: 500px;
        height: 800px;
        margin: auto;
        background-color: #ccc;
      }
    </style>
  </head>

  <body>
    <div id="main"></div>
  </body>
  <script src="js/jquery.min.js"></script>
  <script src="js/echarts.min.js"></script>
  <script type="text/javascript">
    var dataname = ['德', '智(一)', '智(二)', '体', '美', '劳']
    var datamax = [20, 20, 20, 20, 20, 20]
    var datavaule = [9, 16, 16, 15, 12, 8]
    var datavaule1 = [6, 8, 10, 6, 5, 8]
    var datavaule2 = [19, 19, 19, 19, 19, 19]
    var indicator = []
    for (var i = 0; i < dataname.length; i++) {
      indicator.push({
        name: dataname[i],
        max: datamax[i]
      })
    }
    console.log('indicator', indicator)
    initChart()
    function initChart() {
      let myCharts = null
      myCharts = echarts.init(document.getElementById('main'))
      let option = {
        tooltip: {
          show: true,
          trigger: 'item'
        },
        legend: {
          data: ['当前分数', '均值', '满分'],
          type: 'scroll',
          orient: 'vertical',
          icon: 'roundRect',
          right: '20',
          top: 'center',
          itemGap: 30,
          itemWidth: 16,
          itemHeight: 16,
          textStyle: {
            fontSize: '15',
            color: '#656565'
          }
        },
        radar: {
          center: ['50%', '50%'],
          radius: '65%',
          startAngle: 0,
          splitNumber: 5,
          splitArea: {
            areaStyle: {
              color: ['#FFFFFF', '#F5F9FF'].reverse()
            }
          },
          axisLabel: {
            show: false
            // show: true
          },
          // 对角线之间的连线
          axisLine: {
            show: true,
            lineStyle: {
              color: 'green'
            }
          },
          // 每一圈的分割线
          splitLine: {
            show: true,
            lineStyle: {
              color: 'red'
            }
          },
          // 名称
          name: {
            formatter: '{value} hello',
            textStyle: {
              //   color: '#656565' ,
              color: '#fb3',
              fontSize: 15
            }
          },
          indicator: indicator
        },

        series: [
          {
            name: '当前分数',
            type: 'radar',
            symbol: 'none',
            symbolSize: 6,
            areaStyle: {
              normal: {
                color: '#80B2FF'
              }
            },
            itemStyle: {
              color: '#80B2FF'
            },
            lineStyle: {
              normal: {
                color: '#80B2FF',
                width: 2
              }
            },
            data: [datavaule] // 注意这个地方是二位数组
          },
          {
            name: '均值',
            type: 'radar',
            symbol: 'none',
            symbolSize: 6,
            areaStyle: {
              normal: {
                color: 'rgba(103, 193, 57, 0.18)'
              }
            },
            itemStyle: {
              color: '#FF7A28'
            },
            lineStyle: {
              normal: {
                color: '#FF7A28',
                width: 2
              }
            },
            data: [datavaule1] // 注意这个地方是二维数组
          },
          {
            name: '满分',
            type: 'radar',
            symbol: 'none',
            symbolSize: 6,
            areaStyle: {
              normal: {
                color: 'rgba(234, 164, 61, 0.18)'
              }
            },
            itemStyle: {
              color: '#0263FF'
            },
            lineStyle: {
              normal: {
                color: '#0263FF',
                width: 2
              }
            },
            data: [datavaule2] // 注意这个地方是二维数组
          }
        ]
      }
      myCharts.clear()
      myCharts.setOption(option)
      window.addEventListener('resize', () => {
        myCharts.resize()
      })
    }
  </script>
</html>