我們從一個靜態(tài)的散點圖開始講述一個故事。簡單的實例识椰，開始你的數(shù)據可視化。
你需要準備：
一臺聯(lián)網的電腦深碱；
一個代碼編輯器腹鹉，支持javascript編寫（甚至只是一個txt編輯器）；
一個充滿好奇心的大腦莹痢；
正式開始
-
數(shù)據獲戎终骸：
數(shù)據通常可以直接由他人提供竞膳。你的同事們經澈讲t？梢蕴婺惴謸鷶?shù)據收集這份工作（埋點日志或者其它數(shù)據統(tǒng)計）。如果你計劃制作幾個圖表用于描述情況坦辟，或者領導希望你能分析年度的數(shù)據刊侯，那么你通常能拿到一些excel或者其它的電子表格；如果你計劃設計一個數(shù)據監(jiān)控后臺锉走，那么你的數(shù)據來源就是后端的研發(fā)同事滨彻。
ECharts的不同圖表需要不同形式的數(shù)據，但通常都是json格式挪蹭。我們現(xiàn)在繪制的散點圖亭饵，需要的數(shù)據是二維結構。ECharts官網有一個表格工具梁厉，利用這個工具辜羊，可以輕松地將excel表轉化為可用的數(shù)據結構。
這里直接給出我們的第一份數(shù)據（json格式）词顾。你可能注意到數(shù)據被一個函數(shù)index（）包含已添，這個單純?yōu)榱吮苊鉃g覽器的跨域問題昭灵。你無需下載數(shù)據，根據后文內容直接引用地址即可郎任。
-
數(shù)據分析：
數(shù)據是筆者直接提供的黍瞧，所以至少在格式上不存在問題辫继。但對于數(shù)據內容腊状，你絕對不應該認為它是正確無疑的。
記住纳本，絕不能只因為它是數(shù)字就相信它就是正確的
我們要注意的是那些不太對頭的東西···如果任何東西看上去有些異常，我們就需要到源頭去進行驗證腋颠。
大部分異常都只是筆誤而已饮醇，但有些異常卻真的存在，而它們就是有意思的地方秕豫。可以作為故事重點观蓄。
不過筆者不希望第一個故事就如此復雜混移。筆者將在文末講解如何篩選無意義或錯誤數(shù)據，最終獲得可用的數(shù)據的具體方法侮穿。
-
初始圖表：
打開你的編輯器歌径，是時候寫（粘貼）一波代碼了。
-
引入ECharts：不需要考慮太多亲茅，將下文的代碼全部粘貼到你的編輯器中就好了回铛。代碼幾乎引入了你全部可能用到的庫，后續(xù)編寫其它的圖表也可以繼續(xù)沿用這個head克锣。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/jslib/jquery/jquery.min.js"></script> </head> <body> <!--這里暫時沒有內容--> </body> </html> -
接下來我們在<body></body>中完成我們的內容（不必擔心茵肃，筆者會在最后給出完整代碼）：
-
為ECharts準備一個具備大小（寬高）的容器：
<div id="scatter1" style="width:100%;height:900px;"></div> -
準備一個javaScript塊袭祟，后續(xù)內容都在其中完成：
<script type="text/javascript"></script> -
基于準備好的容器验残，初始化ECharts實例（//之后內容為注釋，不會影響你的代碼）：
<script type="text/javascript"> // 基于準備好的dom巾乳，初始化echarts實例 var myChart = echarts.init(document.getElementById('scatter1')); </script> -
使用 option 來表述圖表信息：數(shù)據您没，數(shù)據如何映射成圖形，交互行為胆绊。具體可查看代碼內注釋：
var option = { //圖表標題氨鹏，當前為空 title: {}, //提示框，當前為空 tooltip: {}, //橫坐標設置压状，當前僅設置類別為‘category‘仆抵，即‘類目’ xAxis: { type: 'category', }, //縱坐標設置，當前僅設置類別為‘value‘何缓，即‘值’ yAxis: { type: 'value', }, //坐標系設置肢础，如上下左右離邊框距離等屬性，當前為空 grid: {}, //系列列表碌廓，用于指定圖表名稱传轰、類型，數(shù)據等谷婆，當前類型為‘scatter’慨蛙，即‘散點圖’辽聊；數(shù)據有四行，每個類目對應一個值期贫，將繪制一幅包含四個點的散點圖 series: [{ name: 'scatter', type: 'scatter', data: [ ["安徽省當涂第一中學",61], ["安徽省六安第一中學",14], ["安慶市第十一中學校",4], ["安慶市第一中學",36], ] }] }; -
使用剛指定的配置項和數(shù)據顯示圖表：
// 使用剛指定的配置項和數(shù)據顯示圖表跟匆。 myChart.setOption(option); 完成！
-
-
當前全部的代碼如下⊥常現(xiàn)在你可以把文件保存為XXX.html玛臂，然后用瀏覽器打開，查看下你使用ECharts繪制的第一幅圖表吧（你甚至只需要新建一個txt文件封孙，將代碼粘貼進去后保存為.html）：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/jslib/jquery/jquery.min.js"></script> </head> <body> <!-- 為ECharts準備一個具備大屑Ｔ（寬高）的Dom --> <div id="scatter1" style="width:100%;height:900px;"></div> <script type="text/javascript"> // 基于準備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('scatter1')); var option = { title: {}, tooltip: {}, //xAxis:{}, xAxis: { type: 'category', }, yAxis: { type: 'value', }, grid: {}, series: [{ name: 'scatter', type: 'scatter', data: [ ["安徽省當涂第一中學",61], ["安徽省六安第一中學",14], ["安慶市第十一中學校",4], ["安慶市第一中學",36] ], }] }; // 使用剛指定的配置項和數(shù)據顯示圖表虎忌。 myChart.setOption(option); </script> </body> </html>image -
然而現(xiàn)在作為初始的圖表還不夠格泡徙，你肯定不會滿足于四個數(shù)據的散點圖。第一節(jié)筆者提供了一個json膜蠢，里面有400個數(shù)據堪藐，現(xiàn)在我們使用這份數(shù)據進行圖表繪制（你將初次接觸跨域問題）：
引用網絡數(shù)據并不簡單，如果你使用的是chrome瀏覽器（建議）挑围，你將不得不解決跨域問題（簡單的說就是數(shù)據來源不同于.html文件的地址礁竞，chrome會禁止數(shù)據的獲取）杉辙。不過筆者最終找到了一個比較簡單的方法（jsonp）：
-
回到第二節(jié)第5步苏章，完成之后我們將4、5步的內容包含在一個回調函數(shù)中奏瞬。并將 <font color ='blue'>data</font> 指向函數(shù) index (data) 中的 <font color ='blue'>data</font> ：
//jsonp讀取本地json文件 //回調函數(shù)名稱(index)枫绅，需要與 src 中一致，而且要與文件地址中名一致硼端。jsonp格式 名稱([]) //不然無法獲取到對應的文件 function index(data){ //4并淋、5步完成的內容 var option = { title: {}, tooltip: {}, //xAxis:{}, xAxis: { type: 'category', }, yAxis: { type: 'value', }, grid: {}, series: [{ name: 'scatter', type: 'scatter', //data指向index(data)中的data data: data, }] }; // 使用剛指定的配置項和數(shù)據顯示圖表。 myChart.setOption(option); }; -
我們尚未引用網絡數(shù)據珍昨，現(xiàn)在我們完成這個步驟县耽，并回調上文定義的方法。新建一個javaScript塊镣典，寫入以下內容：
<!--jsonp中 需要注意的是 <script src="jq.json?callback=loa"></script> src ? 之前為文件地址兔毙，? 之后為回調函數(shù)callback名稱， 回調函數(shù)可以簡寫為 cb , 然后 回調函數(shù) 名稱要與引用文件中的名稱一致 可以在對應的文件名中看下兄春，如：jq.json?callback=loa,jq.json的函數(shù)名稱為 loa--> <script type="text/javascript" src="https://guozhe-1300242195.cos.ap-beijing.myqcloud.com/2020-01-14-scatterDegree-1.json?callback=index"></script>注意澎剥，包含的都是注釋內容，實際生效的只有<script>這里是代碼</script>包含的代碼赶舆。其中哑姚，src 指向基礎數(shù)據的地址祭饭，這個地址一直到 ?callback 前為止。后文中給出了新的數(shù)據地址叙量，你只需要替換代碼中的地址即可倡蝙。
完成！
-
-
現(xiàn)在的完整代碼如下绞佩。生成的初始圖表為：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/jslib/jquery/jquery.min.js"></script> </head> <body> <!-- 為ECharts準備一個具備大兴屡浮（寬高）的Dom --> <div id="scatter1" style="width:100%;height:900px;"></div> <script type="text/javascript"> // 基于準備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('scatter1')); //jsonp讀取本地json文件 //回調函數(shù)名稱(index)品山，需要與 src 中一致析既，而且要與文件地址中名一致。jsonp格式 名稱([]) //不然無法獲取到對應的文件 function index(data){ var option = { title: {}, tooltip: {}, //xAxis:{}, xAxis: { type: 'category', }, yAxis: { type: 'value', }, grid: {}, series: [{ name: 'scatter', type: 'scatter', data: data, }] }; // 使用剛指定的配置項和數(shù)據顯示圖表谆奥。 myChart.setOption(option); }; </script> <!--jsonp中 需要注意的是 <script src="jq.json?callback=loa"></script> src ? 之前為文件地址，? 之后為回調函數(shù)callback名稱拂玻， 回調函數(shù)可以簡寫為 cb , 然后 回調函數(shù) 名稱要與 文件中的名稱一致 可以在 對應的文件名中看下酸些，如，jq.json?callback=loa,jq.json的 名字為 loa--> <script type="text/javascript" src="https://guozhe-1300242195.cos.ap-beijing.myqcloud.com/2020-01-14-scatterDegree-1.json?callback=index"></script> </body> </html>image 挺不錯的嘛檐蚜！有了初始的圖表魄懂，現(xiàn)在我們可以對其進行美化，使其更引人注目闯第。
-
-
圖表美化：
圖表的美化主要依靠修改/增加 option （第二節(jié)第4步）中的信息∈欣酰現(xiàn)在我們依次修改設置，逐步美化圖表：
-
我們首先設置一個背景顏色（筆者繪制圖表喜歡深色色調）咳短。rgba大家應當非常熟悉填帽，前三個數(shù)值設置了顏色，第四個數(shù)值制定了顏色的透明程度×茫現(xiàn)在的顏色相當黑篡腌，但不是純黑（為什么不選擇純黑？）：
//背景顏色勾效，當前透明度為100%嘹悼，接近純黑色 backgroundColor:'rgba(1, 1, 1, 1)', -
接下來修改坐標系設置 grid ，令坐標系上下左右分別距離邊框一個給定的百分比层宫。我們來看一下現(xiàn)在圖表的樣式吧：
//坐標系設置杨伙，距離上邊框較遠，左右居中 grid: { left: '5%', right: '5%', top:'15%', bottom: '7%' },image好吧萌腿，似乎變得更加難以辨別了（因為坐標系尚未調整限匣，幾乎無法辨別，分割線卻過于明顯）毁菱。不要灰心膛腐，我們繼續(xù)編碼睛约。
-
表格上方預留了足夠的空間，接下來我們設置一下標題內容：
//標題 title: { //標題內容 text: '學校與排課次數(shù)散點圖', //標題字體顏色及字體大小 textStyle:{ color:'#fff', fontSize:30, }, //離上邊框距離 top:'5%', //離左邊框距離哲身，當前為‘居中’ left: 'center', },現(xiàn)在我們有了一個居中置頂（保持一定距離）的標題辩涝，你可以保存文件用瀏覽器查看效果。
-
接下來我們編輯一下兩個坐標軸的格式
//橫坐標設置 xAxis: { //類型為‘類目軸’勘天，即種類而非數(shù)值 type: 'category', //坐標軸刻度文字格式 axisLabel:{ //設置不顯示怔揩，后續(xù)設置無效 show:false, }, //坐標軸線設置 axisLine:{ lineStyle:{ color:'#fff',//坐標軸顏色為白色 width:2,//坐標軸線寬度2個像素 } } },橫坐標我們設置其不顯示刻度上的各標簽（因為標簽過多無法全部顯示，也顯示必要性）脯丝。坐標軸線為白色商膊，這樣在深色背景下容易辨認。坐標軸分割線無需設置宠进，因為當前為類目軸晕拆，無分割線。
//縱坐標設置 yAxis: { //類型為‘數(shù)值軸’材蹬，自帶分割線 type: 'value', //縱坐標軸名稱 name:' (次)', //坐標軸名稱格式設置 nameTextStyle:{ //設置行高及對齊方式实幕，使得坐標軸名稱達到圖形所示效果 fontSize:20,//字體大小 verticalAlign:'top',//垂直對齊方式，搭配行高使用堤器，控制垂直方向高度 align:'left',//水平對齊方式 lineHeight:10//行高 }, //data:[50,100],//值范圍昆庇，本例不使用 //分割線格式設置 splitLine:{ show:true,//顯示 //分割線設置 lineStyle:{ opacity:0.3,//透明度：0.3 type:'dotted'//類型，除此之外還有‘solid’‘dashed’闸溃，可以切換觀察效果 } }, //坐標軸刻度文字格式 axisLabel:{ //通過以下設置整吆，使得坐標軸標簽在刻度上方 fontSize:20,//字體大小 align:'right', verticalAlign:'bottom', }, //坐標軸線設置，由于設置的寬度為0辉川，不顯示坐標軸 axisLine:{ lineStyle:{ color:'#fff', width:0,//不顯示坐標軸 } } },縱坐標設置較為復雜表蝙，我們設置了坐標軸的名稱（將顯示在坐標軸尾端），規(guī)定分割線的透明度為0.3乓旗，保證分割線不影響圖表觀看勇哗。調整了坐標軸刻度標簽的格式，使其落于刻度之上寸齐。最后欲诺，我們隱藏了縱坐標軸線，使得整個圖表更加凸顯重點（散點本身渺鹦，而非坐標軸）扰法。
現(xiàn)在的圖表如下。與上圖相比毅厚，重點已經相當突出了：
image -
還沒有結束塞颁，深色背景搭配紅色散點可不是個好選擇。我們應當對散點進行一些格式的設置，使其從背景中抽離出來祠锣。這一切都需要在 series 中完成：
series: { name: 'scatter', type: 'scatter', //散點大小酷窥，當前為 10 像素 symbolSize:10, //散點格式（非選定狀態(tài)下） itemStyle:{ color:'red',//顏色為紅色 borderColor:'#fff',//邊框顏色為白色 borderWidth:2,//邊框 2 個像素 shadowBlur:3,//陰影 3 個像素 shadowColor:'#eac736'//陰影顏色，接近于橙黃色伴网，產生光亮效果 }, //散點格式（選定狀態(tài)下）蓬推，emphasis即為選中狀態(tài)，與normal相對 emphasis: { itemStyle: { //color: 'red', borderColor: '#fff',//邊框顏色為白色 borderWidth: 5,//邊框 5 個像素 shadowBlur: 15,//陰影 15 個像素 shadowColor: '#eac736'//陰影顏色澡腾，接近于橙黃色沸伏，產生光亮效果 } }, //散點的值（value）格式設置 label: { //僅當選中狀態(tài)下顯示 emphasis: { show: true,//顯示 position: 'left',//左側 //字體格式 textStyle: { color: '#fff',//顏色為白色 fontSize: 16//字體大小 16 個像素 } } }, data: data, },image現(xiàn)在，你的圖表應當足夠吸引人眼球了动分。如果你有別的想法毅糟，可以根據官方文檔，或者在上文的基礎上對代碼做一些修改澜公。
-
現(xiàn)在給出散點圖的完整代碼姆另。將其粘貼到你的編輯器中，另存為XXX.html文件然后使用瀏覽器打開即可坟乾〖７或者新建一個txt文件，將內容粘貼進去糊渊，修改后綴為.html，使用瀏覽器打開同樣可以查看結果（當然慧脱，筆者希望讀者能夠按步驟逐漸完成渺绒，而不是直接復制最終的代碼）：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/jslib/jquery/jquery.min.js"></script> </head> <body> <!-- 為ECharts準備一個具備大小（寬高）的Dom --> <div id="scatter1" style="width:100%;height:900px;"></div> <script type="text/javascript"> // 基于準備好的dom菱鸥，初始化echarts實例 var myChart = echarts.init(document.getElementById('scatter1')); //jsonp讀取本地json文件 //回調函數(shù)名稱(index)宗兼，需要與 src 中一致，而且要與文件地址中名一致氮采。jsonp格式 名稱([]) //不然無法獲取到對應的文件 function index(data){ //使用option表述圖表信息 var option = { backgroundColor:'rgba(1, 1, 1, 1)', //圖表的標題 title: { text: '學校與排課次數(shù)散點圖',//標題內容 //標題字體設置 textStyle:{ color:'#fff',//標題字體顏色 fontSize:30,//字體大小 }, top:'5%',//距離容器上端的百分比 left: 'center',//居中 }, //提示框殷绍，當前為空 tooltip: {}, //橫坐標設置 xAxis: { //類型為‘類目軸’，即種類而非數(shù)值 type: 'category', //坐標軸刻度文字格式 axisLabel:{ //設置不顯示鹊漠，后續(xù)設置無效 show:false, }, //坐標軸線設置 axisLine:{ lineStyle:{ color:'#fff',//坐標軸顏色為白色 width:2,//坐標軸線寬度2個像素 } } }, //縱坐標設置 yAxis: { //類型為‘數(shù)值軸’主到，自帶分割線 type: 'value', //縱坐標軸名稱 name:' (次)', //坐標軸名稱格式設置 nameTextStyle:{ //設置行高及對齊方式，使得坐標軸名稱達到圖形所示效果 fontSize:20,//字體大小 verticalAlign:'top',//垂直對齊方式躯概，搭配行高使用登钥，控制垂直方向高度 align:'left',//水平對齊方式 lineHeight:10//行高 }, //data:[50,100],//值范圍，本例不使用 //分割線格式設置 splitLine:{ show:true,//顯示 //分割線設置 lineStyle:{ opacity:0.3,//透明度：0.3 type:'dotted'//類型娶靡，除此之外還有‘solid’‘dashed’牧牢，可以切換觀察效果 } }, //坐標軸刻度文字格式 axisLabel:{ //通過以下設置，使得坐標軸標簽在刻度上方 fontSize:20,//字體大小 align:'right', verticalAlign:'bottom', }, //坐標軸線設置，由于設置的寬度為0塔鳍，不顯示坐標軸 axisLine:{ lineStyle:{ color:'#fff', width:0,//不顯示坐標軸 } } }, grid: { left: '5%', right: '5%', top:'15%', bottom: '7%', //containLabel: true, }, series: { name: 'scatter', type: 'scatter', //散點大小伯铣，當前為 10 像素 symbolSize:10, //散點格式（非選定狀態(tài)下） itemStyle:{ color:'red', //顏色為紅色 borderColor:'#fff', //邊框顏色為白色 borderWidth:2, //邊框 2 個像素 shadowBlur:3, //陰影 3 個像素 shadowColor:'#eac736'//陰影顏色，接近于橙黃色轮纫，產生光亮效果 }, //散點格式（選定狀態(tài)下）腔寡，emphasis即為選中狀態(tài)，與normal相對 emphasis: { itemStyle: { //color: 'red', borderColor: '#fff', //邊框顏色為白色 borderWidth: 5, //邊框 5 個像素 shadowBlur: 15, //陰影 15 個像素 shadowColor: '#eac736'//陰影顏色蜡感，接近于橙黃色蹬蚁，產生光亮效果 } }, //散點的值（value）格式設置 label: { //僅當選中狀態(tài)下顯示 emphasis: { show: true, //顯示 position: 'left',//左側 //字體格式 textStyle: { color: '#fff',//顏色為白色 fontSize: 16 //字體大小 16 個像素 } } }, data: data, }, }; // 使用剛指定的配置項和數(shù)據顯示圖表。 myChart.setOption(option); }; </script> <!--jsonp中 需要注意的是 <script src="jq.json?callback=loa"></script> src ? 之前為文件地址郑兴，? 之后為回調函數(shù)callback名稱犀斋， 回調函數(shù)可以簡寫為 cb , 然后 回調函數(shù) 名稱要與 文件中的名稱一致 可以在 對應的文件名中看下，如情连，jq.json?callback=loa,jq.json的 名字為 loa--> <script type="text/javascript" src="https://guozhe-1300242195.cos.ap-beijing.myqcloud.com/2020-01-14-scatterDegree-1.json?callback=index"></script> </body> </html> -
使用 ECharts 的部分基本完成叽粹，接下來筆者使用 hype（我們將在另一個手冊對其進行介紹） 對圖表作進一步改進（讀者可以將圖表保存為圖片，然后進行編輯）：
- 分析基礎數(shù)據却舀，得出中位數(shù)及平均數(shù)虫几，分別為12和22.7
- 在hype中繪制矢量圖形，添加中位數(shù)線和平均值線挽拔，并分別指出線類型及具體數(shù)值
- 也許你對這個背景感興趣辆脸。筆者設置圖表的背景透明，然后底層的圖形上添加了毛玻璃效果
image -
現(xiàn)在圖表繪制完成螃诅，添加上下文：本圖表繪制的是學校使用排課引擎的次數(shù)圖啡氢，每個點指代一個學校，可以看到术裸，多數(shù)學校集中在0～30的區(qū)間內倘是。少數(shù)學校調用次數(shù)超過90次，最多的調用為193次袭艺。
添加上下文非常重要搀崭，因為當你的讀者在閱讀圖表的時候不能保證你總在旁邊。我們的散點圖如果沒有標題及上下文猾编，讀者根本不可能知道其代表的意義（或許是公司員工遲到分鐘數(shù)瘤睹？那最高值很可能是筆者本人）。
-
-
該圖表的意義：
散點圖展示了一段時間內300余所學校調用排課引擎的情況答倡。我們預期的調用次數(shù)應當在10次左右默蚌，并且多次的調用沒有實際意義（具體不做解釋）。但實際情況可以看到苇羡，平均數(shù)比中位數(shù)多10绸吸，存在相當多的點調用次數(shù)在30次以上鼻弧，最高的點調用次數(shù)為193次。
散點的集中狀態(tài)基本符合預期锦茁，但是調用次數(shù)多的點明顯存在問題攘轩。應當對其進行記錄码俩，觀察是否存在地域特征稿存，做進一步分析瓣履。
-
數(shù)據圖表相互演進：
正如筆者前面所述袖迎，數(shù)據可視化的流程不是線性的辜贵。只需要簡單調整一下數(shù)據的輸入托慨，即便是同一套數(shù)據厚棵，也會呈現(xiàn)出不同的效果窟感。
-
筆者按排課次數(shù)排序，得到了新的基礎數(shù)據哈误∶圩裕可以看到，各點不再散亂分布于各處箭阶，而是按從小到大依次排序仇参，呈現(xiàn)出指數(shù)函數(shù)一般的圖形（顯然我們的數(shù)據本身并不具備指數(shù)函數(shù)的特征）罩扇。
現(xiàn)在喂饥，根據這張圖表，你能得到哪些信息集侯？（別忘了，我們的中位數(shù)是12泡挺，平均值是22.7）
image -
筆者按地區(qū)排序娄猫，再次得到了新的基礎數(shù)據贱除。新的圖表似乎與之前并沒有什么區(qū)別媳溺。你可以試著在圖表上將各個區(qū)域劃分開（從左到右），觀察不同區(qū)域（政策）之間是否存在著點位分布上的規(guī)律悬蔽。
實際上規(guī)律并不明顯，你可能只感覺到福建和廣東地區(qū)相比其它地區(qū)點位更加散亂一些蝎困。不如試著統(tǒng)計下各地區(qū)的中位數(shù)和平均數(shù)录语？這里列舉一些地區(qū)的數(shù)值：
- 北京：「中位數(shù)：11」，「平均數(shù)：22.6」
- 福建：「中位數(shù)：25」澎埠，「平均數(shù)：36.6」
- 廣東：「中位數(shù)：13」蒲稳，「平均數(shù)：27.6」
結果確實如此江耀，福建的兩個數(shù)值都遠遠超過平均值【黾牵現(xiàn)在你的故事開始有趣起來了系宫，你應該把它講給你的福建同事聽，詢問他們其中的原因扩借。這些應該能對你的產品改進提供幫助椒惨。
image -
兩者結合或許也會非常有趣，如果你有時間潮罪，可以試著先按地區(qū)排序康谆，再把地區(qū)內部按次數(shù)排序，這里筆者就不再贅述嫉到，只給出最終圖表沃暗，你能從中分析出什么結果？
image
-
故事結束
第一個故事到此差不多也可以結束了何恶。
你可能覺得作為第一個入門故事孽锥，代碼內容有點過多，這一點筆者也深有同感细层。但因為對于不同的圖表惜辑，ECharts的編碼內容基本相同（坐標系設置，內容設置）疫赎，舉一反三相當簡單盛撑，所以筆者盡量對每一行代碼做了解釋。后續(xù)筆者的編碼介紹內容將逐漸簡化（不要擔心捧搞，筆者總會給出完整代碼）抵卫，而把重點放在數(shù)據分析和圖表美化（當然也少不了圖表本身的分析），以及通過一些初級的 javaScript 編碼實現(xiàn)簡單交互上实牡。
好了陌僵，休息一下轴合，倒杯熱茶创坞，然后開始我們的第二個故事。
