| 【Echarts】全国大学信息可视化 | 您所在的位置：网站首页 › 全国学院排名表格图 › 【Echarts】全国大学信息可视化 |
【Echarts】全国大学信息可视化
|
文章目录
写在前面Stacked Area Chart（堆叠面积图）Stacked Horizontal Chart（堆叠条形图）Chinese Distribution Map（中国分布地图）Basic Bar Chart（基础柱状图）Positive and Negative Column Chart（正负柱状图）Bar Chart on Polar（极坐标柱状图）Basic Pie Chart（基础饼图）Doughnut Chart（环形图）Nightingale Chart（南丁格尔玫瑰图）Tree Map（矩形树图）写在后面
写在前面 本文针对爬取的全国大学信息，使用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 data.push(raw[i]); } } // 构造所需格式的数据 var scores = []; for (var i = 0; i score.push(data[j][ST[i]]); } scores.push(score); } // 构造一系列图表 var series = []; for (var i = 0; i 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)的得分及其得分组成情况，结论同上方堆叠面积图。
Chinese Distribution Map（中国分布地图） Description：以省份为单位，统计了我国大学的分布情况。光标悬浮时即可显示该省大学数量。另外，为了更直观展现我国大学的地区分布规律，地图用红色(#8debff)和蓝色(#ff8dab)进行着色。颜色越红，该省大学数量越多；颜色越蓝，该省大学数量越少；灰色表示暂无数据信息。 Example：从局部来看，江苏拥有最高的大学数量（37所），青海、西藏、宁夏拥有最少的大学数量（仅1所）；从整体来看，我国大学分布呈现“西部少，东部多，不平衡”的特征，这其实与客观地理位置、教育资源投资、经济发展水平等因素息息相关。
Code： // 统计大学分布 var locate = {}; for (var i = 0; i 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 + '' + 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 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 return -1; } else { return 0; } }); // 转化为所需格式 var provinces = []; var statistic = []; for (var i = 0; i 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 tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, formatter: function (params) { var wave = params[0].data; var index = params[0].dataIndex; return "学校名称: " + univ[index] + "排名波动: " + 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 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 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 if (obj1.ave return -1; } else { return 0; } }); // 转化为所需格式 var provinces = []; var statistic = []; for (var i = 0; i 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] + 'Lowest：' + data[id][0] + 'Highest：' + data[id][1] + '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 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 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 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} {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 type: "root", name: standard_nam[i], value: 0, children: [] }); } // 游标 var index = 0; // 第二层(学校) for (var i = 0; i 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 + "高校数量: " + amount + "分数区间: [" + minBorder + ", " + maxBorder + ")"; } else { var university = params.data.name; var score = params.data.value; return "学校名称: " + university + "学校得分: " + 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);写在后面 一些有用的资源： 原始数据（.csv）原始数据（.json）完整项目（.html）一些有用的网址： Echarts（戳这里）CSDN（戳这里）Github（戳这里） |
Code：
【本文地址】
公司简介
联系我们