雷达图代码实例

雷达图代码实例及其注释详解

实例：树懒课堂七月开销及预算雷达图

效果图：

完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
option = {
    title: {
        text: '树懒课堂七月开销及预算 雷达图'
    },
    tooltip: {},
    legend: {
        data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）'],
        right:'1%',
        top:'5%',
    },
    radar: {
        // shape: 'circle',
        center:['50%','55%'],
        name: {
            textStyle: {
                color: '#fff',
                backgroundColor: '#999',
                borderRadius: 3,
                padding: [3, 5]
            }
        },
        indicator: [
            { name: '销售', max: 30000},
            { name: '管理', max: 30000},
            { name: '信息技术', max: 30000},
            { name: '客服', max: 30000},
            { name: '研发', max: 30000},
            { name: '市场', max: 30000}
        ]
    },
    series: [{
        name: '预算 vs 开销（Budget vs spending）',
        type: 'radar',
        // areaStyle: {normal: {}},
        data: [
            {
                value: [14300, 10000, 28000, 25000, 20000, 19000],
                name: '预算分配（Allocated Budget）'
            },
            {
                value: [15000, 14000, 28000, 21000, 22000, 25000],
                name: '实际开销（Actual Spending）'
            }
        ]
    }]
};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

解析：

title，tooltip，legend等组件我们在之前的教程里已经讲解过了，这里我们不展开叙述。

radar组件是实现雷达图的关键，故我们来看radar组件的代码：

center:['50%','55%'],

设置中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度。
故我们实例中的代码圆心在中间偏右的位置

name: {
            textStyle: {
                color: '#fff',
                backgroundColor: '#999',
                borderRadius: 3,
                padding: [3, 5]
            }
        },

name：{} 为雷达图每个指示器名称的配置项，关于指示器的名称的配置都在name后的大括号里完成。
在该实例中，我们将指示器名称的各种属性进行如下设置：
- 颜色设置为#fff（白色）
- 背景颜色设置为#999（灰色）
- 设置文字块的圆角为3，
- 文字块[上, 右, 下, 左]的内边距为3，5，3，5像素
- 如下图红框中圈出的样式：

indicator: [
            { name: '销售', max: 30000},
            { name: '管理', max: 30000},
            { name: '信息技术', max: 30000},
            { name: '客服', max: 30000},
            { name: '研发', max: 30000},
            { name: '市场', max: 30000}
        ]

Indicator用于设置雷达图的指示器，用来指定雷达图中的多个变量（维度）
Name用于设置指示器名称，如下图红框中圈出的文字所示:

Max设置指示器对应坐标轴刻度上的的最大值
代码中被省略，采用默认设置的属性：
- startAngle:90, //起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
- show:true, //设置显示指示器名称。
- 等

雷达图雷达图及其坐标系实例及注释