【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 l