文章目錄

• • 寫在前面
  • 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 < 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} (ze8trgl8bvbq%)'},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);

?
?
?
?

寫在后面

一些有用的資源：

• 原始數據（.csv）
• 原始數據（.json）
• 完整項目（.html）

一些有用的網址：

• Echarts（戳這里）
• CSDN（戳這里）
• Github（戳這里）

總結

以上是生活随笔為你收集整理的【Echarts】全国大学信息可视化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。