雷达图radar

雷达图实现步骤：

（1）Echarts最基本的代码结构

　　引入js文件，DOM容器，初始化对象，设置option

（2）定义各个维度的最大值

　　indicator:[{name:''易用性",max:100},...]

（3）准备具体产品的数据

　　data:[{name:"华为手机1",value:[80,90,82,90]},...]

（4）指明图表类型：

　　在series下设置  type: "radar"

雷达图常用的配置：

（1）显示数值：

　　label:{

                    show:true // 显示出数值

　　},

（2）区域面积 ：areaStyle

（3）绘制类型：shape

　　<script src="lib/echarts.min.js"></script>
    <script src="lib/jquery.min.js"></script>


    <div id="main" style="width: 700px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        // 各个维度的最大值
        var dataMax = [{
                name: '易用性',
                max: 100
            },
            {
                name: '功能',
                max: 100
            },
            {
                name: '拍照',
                max: 100
            },
            {
                name: '跑分',
                max: 100
            },
            {
                name: '续航',
                max: 100
            }
        ]
        var option = {
            radar: {
                indicator: dataMax, // 2.定义各个维度的最大值
                shape:"circle" // 配置雷达图最外层的形状，默认polygen，circle圆
            },
            // 3.准备具体产品的数据
            series: [{
                type: "radar", // 4.指明图表类型是雷达图
                label:{
                    show:true // 显示出数值
                },
                areaStyle:{}, // 将每个雷达图形成阴影效果
                data: [{
                    name: "华为手机1",
                    value: [80, 90, 82, 90, 89]
                }, {
                    name: "华为手机2",
                    value: [90, 100, 92, 98, 99]
                }]
            }]
        }

        myChart.setOption(option);
    </script>

如图：

雷达图的特点：雷达图可以帮助我们分析多个维度的数据与标准数据的对比情况。