echarts之雷达图

雷达图

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>快速上手</title>
  <!--  1。引入echart.js文件-->
  <script src="lib/echarts.min.js"></script>
</head>
<body>

<!--2。准备一个呈现图表的盒子-->
<div style="width: 600px;height: 400px"></div>

<script>
    //3。初始化echarts实力对象
    var dataMax = [
        {
            name: '易用性',
            max: 100
        },
        {
            name: '功能',
            max: 100
        },
        {
            name: '拍照',
            max: 100
        },
        {
            name: '跑分',
            max: 100
        },
        {
            name: '续航',
            max: 100
        }
    ]
    var mCharts = echarts.init(document.querySelector('div'));
    //4。准备配置项
    var option = {
        radar:{
            indicator:dataMax, //配置各个纬度的最大值
            shape:'circle'  //配置雷达图最外层的图形
        },
        series:[
            {
                type:'radar',
                label:{
                    show:true //显示数值
                },
                areaStyle:{},
                data:[
                    {
                        name:'华为手机1',
                        value:[80,90,80,82,90]
                    },
                    {
                        name:'中兴手机1',
                        value:[70,82,75,70,78]
                    }
                ]
            }
        ]
    }

    //5。将配置项设置给echarts实例对象
    mCharts.setOption(option);
</script>
</body>
</html>

posted @ 2022-08-06 02:07  King-DA  阅读(1056)  评论(0)    收藏  举报