[JavaScript知识库] 【Echarts】全国大学信息可视化

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 【Echarts】全国大学信息可视化 -> 正文阅读

[JavaScript知识库]【Echarts】全国大学信息可视化

文章目录

?
?

写在前面

本文针对爬取的全国大学信息，使用Echarts进行可视化呈现。包括经典的折线图、柱状图、饼图，以及更加有趣的玫瑰图、矩形树图、极坐标图、分布地图等。

另外，原始数据(json)，完整代码(html)均已上传，文末可见。

?
?

Stacked Area Chart（堆叠面积图）

Description：一所大学的总分(score)是多个维度得分的总和，比如办学层次、学科水平、办学资源、师资规模、重大成果、国际竞争等。堆叠面积图直观展现了某所院校的总分情况及其得分组成，并且还可以进行总分或者某维度得分的横向对比。

Example：下图展现了我国C9院校(2028)的得分及其得分组成情况，可以得到诸如以下结论：清北院校的得分显著高于哈工大；在所有院校中人才培养得分均占比较高；各院校国际竞争力得分相似，但在重大项目与成果方面随排名呈递减趋势。

在这里插入图片描述

Code：

// 中国C9院校(这里偷懒将排名写死～)
const C9 = ["清华大学", "北京大学", "浙江大学", "上海交通大学", "南京大学", "复旦大学", "中国科学技术大学", "西安交通大学", "哈尔滨工业大学"];
// 各个比较维度(这里也偷懒写死了～)
const ST = ["办学层次", "学科水平", "办学资源", "师资规模与结构", "人才培养", "科学研究", "服务社会", "学术人才", "重大项目与成果", "国际竞争力"];

// 筛选出C9院校
var data = [];
for (var i = 0; i < raw.length; i++) {
    if (C9.includes(raw[i]["学校名称"])) {
        data.push(raw[i]);
    }
}

// 构造所需格式的数据
var scores = [];
for (var i = 0; i < ST.length; i++) {
    var score = [];
    for (var j = 0; j < data.length; j++) {
        score.push(data[j][ST[i]]);
    }
    scores.push(score);
}

// 构造一系列图表
var series = [];
for (var i = 0; i < 10; i++) {
    series.push({
        name: ST[i],
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
            focus: 'series'
        },
        data: scores[i]
    });
}

// 配置图表
option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
        top: '5%',
        data: ST
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: C9
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: series
};

// 将ECharts放到盒子里
var myChart = echarts.init(document.getElementById('main'));

// 指定配置与数据
myChart.setOption(option);

?
?

Stacked Horizontal Chart（堆叠条形图）

Description：和上面的堆叠面积图类似，不仅展现了总分的对比，还可以进行总分各组成成分的横向对比。

Example：下图同样展现了我国C9院校(2028)的得分及其得分组成情况，结论同上方堆叠面积图。

在这里插入图片描述
Code：

// 中国C9院校(这里偷懒将排名写死～)
const C9 = ["清华大学", "北京大学", "浙江大学", "上海交通大学", "南京大学", "复旦大学", "中国科学技术大学", "西安交通大学", "哈尔滨工业大学"];
// 各个比较维度(这里也偷懒写死了～)
const ST = ["办学层次", "学科水平", "办学资源", "师资规模与结构", "人才培养", "科学研究", "服务社会", "学术人才", "重大项目与成果", "国际竞争力"];

// 筛选出C9院校
var data = [];
for (var i = 0; i < raw.length; i++) {
    if (C9.includes(raw[i]["学校名称"])) {
        data.push(raw[i]);
    }
}

// 构造所需格式的数据
var scores = [];
for (var i = 0; i < ST.length; i++) {
    var score = [];
    for (var j = 0; j < data.length; j++) {
        score.push(data[j][ST[i]]);
    }
    scores.push(score.reverse());
}

// 构造一系列图表
var series = [];
for (var i = 0; i < 10; i++) {
    series.push({
        name: ST[i],
        type: 'bar',
        stack: 'total',
        label: {
            show: true
        },
        emphasis: {
            focus: 'series'
        },
        data: scores[i]
    });
}

// 配置图表
option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        top: '3%'
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: C9.reverse()
    },
    series: series
};

// 将ECharts放到盒子里
var myChart = echarts.init(document.getElementById('main'));

// 指定配置与数据
myChart.setOption(option);

?
?

Chinese Distribution Map（中国分布地图）

Description：以省份为单位，统计了我国大学的分布情况。光标悬浮时即可显示该省大学数量。另外，为了更直观展现我国大学的地区分布规律，地图用红色(#8debff)和蓝色(#ff8dab)进行着色。颜色越红，该省大学数量越多；颜色越蓝，该省大学数量越少；灰色表示暂无数据信息。

Example：从局部来看，江苏拥有最高的大学数量（37所），青海、西藏、宁夏拥有最少的大学数量（仅1所）；从整体来看，我国大学分布呈现“西部少，东部多，不平衡”的特征，这其实与客观地理位置、教育资源投资、经济发展水平等因素息息相关。

在这里插入图片描述

Code：

// 统计大学分布
var locate = {};
for (var i = 0; i < raw.length; i++) {
    if (raw[i]["省市"] in locate) {
        locate[raw[i]["省市"]] += 1;
    } else {
        locate[raw[i]["省市"]] = 0;
    }
}

// 转换为所需格式
var data = [];
for (var province in locate) {
    data.push({
        name: province,
        value: locate[province]
    });
}

// 配置图表
option = {
    tooltip: {
        formatter: function (params, ticket, callback) {
            return params.seriesName + '<br />' + params.name + '：' + params.value
        }
    },
    visualMap: {
        min: 1,
        max: 40,
        left: 'left',
        top: 'bottom',
        text: ['多', '少'],
        inRange: {
            color: ['#8debff', '#ff8dab']
        },
        show: true
    },
    geo: {
        map: 'china',
        roam: false,
        zoom: 1.23,
        label: {
            normal: {
                show: true,
                fontSize: '10',
                color: 'rgba(0,0,0,0.7)'
            }
        },
        itemStyle: {
            normal: {
                borderColor: 'rgba(0, 0, 0, 0.2)'
            },
            emphasis: {
                areaColor: '#F3B329',
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    },
    series: [
        {
            name: '省内大学数量',
            type: 'map',
            geoIndex: 0,
            data: data
        }
    ]
};

// 将ECharts放到盒子里
var myChart = echarts.init(document.getElementById('main'));

// 指定配置与数据
myChart.setOption(option);

?
?

Basic Bar Chart（基础柱状图）

Description：统计了各省份的大学数量，并直观的通过柱状图的高度展现出来。光标悬浮时，可显示所选省份的具体大学数量。

Example：从以下柱状图中我们可以直观的看到，江苏、山东、河南三省的高校数量最多，宁夏、青海、西藏三省的高校数量最少。

在这里插入图片描述

Code：

// 统计各省大学数量
var map = {};
for (var i = 0; i < raw.length; i++) {
    if (raw[i]["省市"] in map) {
        map[raw[i]["省市"]] += 1;
    } else {
        map[raw[i]["省市"]] = 0;
    }
}

// 将map转化为list
var list = [];
for (var province in map) {
    list.push({
        province: province,
        count: map[province]
    });
}

// 根据大学数量进行排序
list.sort(function (obj1, obj2) {
    if (obj1.count < obj2.count) {
        return 1;
    } else if (obj1.count > obj2.count) {
        return -1;
    } else {
        return 0;
    }
});

// 转化为所需格式
var provinces = [];
var statistic = [];
for (var i = 0; i < list.length; i++) {
    if (i > 14 && i < 19) {
        continue;
    }
    provinces.push(list[i].province);
    statistic.push(list[i].count);
}

// 配置图表
option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: provinces,
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: statistic
        }
    ]
};

// 将ECharts放到盒子里
var myChart = echarts.init(document.getElementById('main'));

// 指定配置与数据
myChart.setOption(option);

?
?

Positive and Negative Column Chart（正负柱状图）

Description：统计了各大学的排名波动情况。光标悬浮时，可显示所选大学的具体排名波动数。

Example：从下图中可以直观看出，排名靠前的大学排名波动并不大，排名位于中档的大学排名波动较大，排名靠后的大学整体呈现排名下滑的态势。

在这里插入图片描述

Code：

// 大学名称
var univ = [];
// 排名升降
var data = [];

// 大学名称与排名升降二者下标一一对应
for (var i = 0; i < raw.length; i++) {
    univ.push(raw[i]['学校名称']);
    data.push(raw[i]['升/降']);
}

// 配置图表
option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        },
        formatter: function (params) {
            var wave = params[0].data;
            var index = params[0].dataIndex;
            return "学校名称: " + univ[index] + "</br>排名波动: " + wave;
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            show: false,
            type: 'category',
            // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            type: 'bar',
            showBackground: true,
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#83bff6' },
                    { offset: 0.5, color: '#188df0' },
                    { offset: 1, color: '#188df0' }
                ])
            },
            emphasis: {
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#2378f7' },
                        { offset: 0.7, color: '#2378f7' },
                        { offset: 1, color: '#83bff6' }
                    ])
                }
            },
            data: data
        }
    ]
};

// 将ECharts放到盒子里
var myChart = echarts.init(document.getElementById('main'));

// 指定配置与数据
myChart.setOption(option);

?
?

Bar Chart on Polar（极坐标柱状图）

Description：极坐标柱状图以省份为单位，统计了每个省份的大学最高得分、最低得分、得分平均分，并将其展现在极坐标域中（不是数学定义中的极坐标）。两侧的蓝色部分展示了最低得分和最高得分，中间的绿色部分展示了平均得分。另外，图表根据平均分进行了排序。

Example：从下图中可以直观看出，北京拥有最高平均得分，上海、江苏紧随其后；贵州、山西等地平均得分最低；浙江虽然平均得分不在前列，但拥有很高的最高得分；从整体上看，最高得分和平均得分基本呈正相关。
在这里插入图片描述

Code：

// 统计各省高校分数
var locate = {};
for (var i = 0; i < raw.length; i++) {
    if (!(raw[i]["省市"] in locate)) {
        var info = {};
        info["scores"] = [];
        info["max"] = 0;
        info["min"] = 0;
        info["ave"] = 0;
        locate[raw[i]["省市"]] = info;
    }
    locate[raw[i]["省市"]]["scores"].push(parseFloat(raw[i]["总分"]));
}

// 计算最大最小平均值
for (var province in locate) {
    var scores = locate[province].scores;
    var cnt = 0;
    var sum = 0;
    var max = Number.MIN_VALUE;
    var min = Number.MAX_VALUE;
    for (var i = 0; i < scores.length; i++) {
        if (scores[i]) {
            sum += scores[i];
            cnt += 1;
            max = Math.max(max, scores[i]);
            min = Math.min(min, scores[i]);
        }
    }
    locate[province].max = max;
    locate[province].min = min;
    locate[province].ave = sum / cnt;
}

// 将对象转化为列表
var list = []
for (var province in locate) {
    var obj = {};
    obj["province"] = province;
    obj["max"] = locate[province].max;
    obj["min"] = locate[province].min;
    obj["ave"] = locate[province].ave;
    list.push(obj);
}

// 将数据全部修饰为一位小数
for (var i = 0; i < list.length; i++) {
    list[i].ave = list[i].ave.toFixed(1);
}

// 根据平均分排序
list.sort(function (obj1, obj2) {
    if (obj1.ave < obj2.ave) {
        return 1;
    } else if (obj1.ave > obj2.ave) {
        return -1;
    } else {
        return 0;
    }
});

// 转化为所需格式
var provinces = [];
var statistic = [];
for (var i = 0; i < list.length; i++) {
    if (i > 15 && i < 18) {
        continue;
    }
    provinces.push(list[i].province);
    statistic.push([list[i].min, list[i].max, list[i].ave]);
}

// 配置图表
const data = statistic;
const cities = provinces;
const barHeight = 50;
option = {
    legend: {
        show: true,
        top: 'bottom',
        data: ['Range', 'Average']
    },
    grid: {
        top: 100
    },
    angleAxis: {
        type: 'category',
        data: cities
    },
    tooltip: {
        show: true,
        formatter: function (params) {
            const id = params.dataIndex;
            return (
                cities[id] +
                '<br>Lowest：' +
                data[id][0] +
                '<br>Highest：' +
                data[id][1] +
                '<br>Average：' +
                data[id][2]
            );
        }
    },
    radiusAxis: {},
    polar: {},
    series: [
        {
            type: 'bar',
            itemStyle: {
                color: 'transparent'
            },
            data: data.map(function (d) {
                return d[0];
            }),
            coordinateSystem: 'polar',
            stack: 'Min Max',
            silent: true
        },
        {
            type: 'bar',
            data: data.map(function (d) {
                return d[1] - d[0];
            }),
            coordinateSystem: 'polar',
            name: 'Range',
            stack: 'Min Max'
        },
        {
            type: 'bar',
            itemStyle: {
                color: 'transparent'
            },
            data: data.map(function (d) {
                return d[2] - barHeight;
            }),
            coordinateSystem: 'polar',
            stack: 'Average',
            silent: true,
            z: 10
        },
        {
            type: 'bar',
            data: data.map(function (d) {
                return barHeight * 2;
            }),
            coordinateSystem: 'polar',
            name: 'Average',
            stack: 'Average',
            barGap: '-100%',
            z: 10
        }
    ]
};

// 将ECharts放到盒子里
var myChart = echarts.init(document.getElementById('main'));

// 指定配置与数据
myChart.setOption(option);

?
?

Basic Pie Chart（基础饼图）

Description：饼图可以直观展现各组成成分的占比情况，非常简单的图表。

Example：从下面的图表可以看出，我国院校以综合、理工、师范三种类型为主，农业、林业、以及其他类型院校占比较少。

在这里插入图片描述

Code：

// 因为原始数据有误，因此提前统计并修正
const types = ['综合', '理工', '师范', '农业', '林业'];
const other = '其他';

// 初始化
var map = {};
for (var i = 0; i < types.length; i++) {
    map[types[i]] = 0;
}
map[other] = 0;

// 统计
for (var i = 0; i < raw.length; i++) {
    if (types.includes(raw[i]["类型"])) {
        map[raw[i]["类型"]] += 1;
    } else {
        map[other] += 1;
    }
}

// 转化为所需格式
var data = [];
for (var key in map) {
    data.push({
        name: key,
        value: map[key]
    });
}

// 配置图表
option = {
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: '院校类型',
            type: 'pie',
            radius: '65%',
            data: data,
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

// 将ECharts放到盒子里
var myChart = echarts.init(document.getElementById('main'));

// 指定配置与数据
myChart.setOption(option);

?
?

Doughnut Chart（环形图）

Description：环形图可以直观展现各组成成分的占比情况，非常简单的图表。

Example：从下面的图表可以看出，我国院校以综合、理工、师范三种类型为主，农业、林业、以及其他类型院校占比较少。

在这里插入图片描述

Code：

// 因为原始数据有误，因此提前统计并修正
const types = ['综合', '理工', '师范', '农业', '林业'];
const other = '其他';

// 初始化
var map = {};
for (var i = 0; i < types.length; i++) {
    map[types[i]] = 0;
}
map[other] = 0;

// 统计
for (var i = 0; i < raw.length; i++) {
    if (types.includes(raw[i]["类型"])) {
        map[raw[i]["类型"]] += 1;
    } else {
        map[other] += 1;
    }
}

// 转化为所需格式
var data = [];
for (var key in map) {
    data.push({
        name: key,
        value: map[key]
    });
}

// 配置图表
option = {
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: '院校类型',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: data
        }
    ]
};

// 将ECharts放到盒子里
var myChart = echarts.init(document.getElementById('main'));

// 指定配置与数据
myChart.setOption(option);

?
?

Nightingale Chart（南丁格尔玫瑰图）

Description：弗罗伦斯·南丁格尔或许是位为人所熟知的护士，但大多数不曾知道她还是一位统计学家。这种圆形的直方图被称为“南丁格尔的玫瑰”，这种图案曾被这位伟大的护士用于表达军医院季节性的死亡率，使得医事改良提案获得了女王的支持。南丁格尔玫瑰图用于表达新冠疫情各国死亡数时，效果十分震撼人心。

Example：从下面的图表可以看出，我国院校以综合、理工、师范三种类型为主，农业、林业、以及其他类型院校占比较少。

在这里插入图片描述

Code：

// 因为原始数据有误，因此提前统计并修正
const types = ['综合', '理工', '师范', '农业', '林业'];
const other = '其他';

// 初始化
var map = {};
for (var i = 0; i < types.length; i++) {
    map[types[i]] = 0;
}
map[other] = 0;

// 统计
for (var i = 0; i < raw.length; i++) {
    if (types.includes(raw[i]["类型"])) {
        map[raw[i]["类型"]] += 1;
    } else {
        map[other] += 1;
    }
}

// 转化为所需格式
var data = [];
for (var key in map) {
    data.push({
        name: key,
        value: map[key]
    });
}

// 配置图表
option = {
    legend: {
        top: '5%',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    series: [
        {
            name: '院校类型',
            type: 'pie',
            radius: [100, 260],
            center: ['50%', '45%'],
            roseType: 'radius',
            itemStyle: {
                borderRadius: 8
            },
            label: {
                show: false
            },
            emphasis: {
                label: {
                    show: true
                }
            },
            data: data
        }
    ]
};

// 将ECharts放到盒子里
var myChart = echarts.init(document.getElementById('main'));

// 指定配置与数据
myChart.setOption(option);

?
?

Tree Map（矩形树图）

Description：矩形树图把具有层次关系的数据可视化为一组嵌套的矩形，它直观地以面积表示数值，以颜色表示类目。所有矩形的面积之和表示整体的大小，各个小矩形的面积表示每个子项的占比，矩形面积越大，表示子数据在整体中的占比越大。矩形树图擅长可视化带权重的数据关系。

Example：根据得分(score)将大学分为了九个档次（A+、A、A-、B+、B、B-、C+、C、C-）。每个色块表示一个档次，色块的大小与该档次院校个数成正比。每个色块都是可点击进入的，进入的下一层为属于该档次的所有院校，在这一层中，色块的大小与该院校得分成正比。

在这里插入图片描述

Code：

// 评级名称&评级标准
const len = 9;
const standard_nam = ['A+', 'A', 'A-', 'B+', 'B', 'B-', 'B+', 'B', 'B-'];
const standard_num = [700, 400, 225, 200, 175, 150, 125, 100, 0];

// 第一层(评级)
var data = [];
for (var i = 0; i < len; i++) {
    data.push({
        type: "root",
        name: standard_nam[i],
        value: 0,
        children: []
    });
}

// 游标
var index = 0;

// 第二层(学校)
for (var i = 0; i < raw.length; i++) {
    if (raw[i]['总分'] >= standard_num[index]) {
        data[index].value += 1;
        data[index].children.push({
            type: "leaf",
            name: raw[i]['学校名称'],
            value: raw[i]['总分']
        });
    } else {
        index++;
    }
}

// 配置图表
option = {
    tooltip: {
        formatter: function (params) {
            if (params.data.type == "root") {
                var level = params.data.name;
                var amount = params.data.value;
                var minBorder, maxBorder;
                if (level == 'A+') {
                    minBorder = 700;
                    maxBorder = 1000;
                } else {
                    minBorder = standard_num[standard_nam.indexOf(level)];
                    maxBorder = standard_num[standard_nam.indexOf(level) - 1]
                }
                return "学校评级: " + level + "</br>高校数量: " + amount + "</br>分数区间: [" + minBorder + ", " + maxBorder + ")";
            } else {
                var university = params.data.name;
                var score = params.data.value;
                return "学校名称: " + university + "</br>学校得分: " + score;
            }
        }
    },
    series: [
        {
            name: 'option',
            type: 'treemap',
            visibleMin: 300,
            data: data,
            leafDepth: 1,
            roam: false,
            levels: [
                {
                    itemStyle: {
                        borderColor: '#555',
                        borderWidth: 4,
                        gapWidth: 4
                    }
                },
                {
                    colorSaturation: [0.3, 0.6],
                    itemStyle: {
                        borderColorSaturation: 0.7,
                        gapWidth: 2,
                        borderWidth: 2
                    }
                },
                {
                    colorSaturation: [0.3, 0.5],
                    itemStyle: {
                        borderColorSaturation: 0.6,
                        gapWidth: 1
                    }
                },
                {
                    colorSaturation: [0.3, 0.5]
                }
            ]
        }
    ]
}

// 将ECharts放到盒子里
var myChart = echarts.init(document.getElementById('main'));

// 指定配置与数据
myChart.setOption(option);