ECharts_雷达图

3.7 雷达图

3.7.1 实现步骤

ECharts最基本的代码结构
- 引入js文件
- DOM容器
- 初始化对象
- 设置option
定义各个维度的最大值 indicator
准备具体产品的数据
图表类型

在 series 下设置 type: 'radar'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/echarts.min.js"></script>
</head>
<body>
    <div style=" 600px; height: 400px;"></div>
    <script>
        var mCharts = echarts.init(document.querySelector('div'));
        var dataMax = [
            {
                name: '易用性',
                max: 100
            },
            {
                name: '功能',
                max: 100
            },
            {
                name: '拍照',
                max: 100
            },
            {
                name: '跑分',
                max: 100
            },
            {
                name: '续航',
                max: 100
            }
        ]
        var option = {
            radar: {
                indicator: dataMax
            },
            series: [
                {
                    type: 'radar',
                    data: [
                        {
                            name: '华为手机1',
                            value: [80, 90, 80, 82, 90]
                        },
                        {
                            name: '中兴手机1',
                            value: [72, 82, 75, 70, 78]

                        }
                    ]
              }
            ]
        }

        mCharts.setOption(option);
    </script>
</body>
</html>

3.7.2 常用配置

显示数值
```
label: {
    show: true
}
```
区域面积
```
areaStyle: {}
```
将每一个产品的雷达图形成阴影的面积
绘制类型
```
radar: {
    shape: 'circle'
}
```
配置雷达图最外层的图形 circle polygon