整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
些在線圖文編輯器不支持直接插入代碼塊，但可以直接粘貼 HTML 格式的高亮代碼塊。
花了一點(diǎn)時間研究了一下各家的編輯器，規(guī)則卻各不相同。有的要求代碼塊被包含于 <code> ... </code> 或者 <pre> <code> ... </code> </pre> , 有些要求 class 屬性里包含 "code" 關(guān)鍵詞，或者要求代碼塊里必須包含至少一個 <br> 。如果不符合這些要求，不是變成普通文本，就是丟失換行縮進(jìn)，或者丟失顏色樣式。
所以，這就難了。先得找個支持代碼高亮的編輯器，仔細(xì)地選擇并復(fù)制代碼塊，復(fù)制完還得編輯剪貼板里的 HTML 。這就不如干脆寫個轉(zhuǎn)換工具了。
因為瀏覽器操作系統(tǒng)剪貼板可能不太方便，下面用 aardio 寫一個工具軟件。
先看軟件成品演示：
軟件用法：
1、輸入編程語言名稱（支持自動完成）。
2、然后在輸入框中粘貼要轉(zhuǎn)換的編程代碼。
3、點(diǎn)擊「復(fù)制高亮代碼塊」按鈕。
然后我們就可以打開在線圖文編輯器直接粘貼生成的高亮代碼塊了。
下面是這個軟件的 aardio 源代碼：
import win.ui;
/*DSG{{*/
var winform = win.form(text="HTML 代碼塊生成工具 - 本工具使用 aardio 語言編寫";right=1055;bottom=674;bgcolor=16777215)
winform.add(
button={cls="button";text="復(fù)制高亮代碼塊";left=633;top=609;right=1000;bottom=665;bgcolor=16777215;color=14120960;db=1;dr=1;font=LOGFONT(h=-14);note="可在網(wǎng)頁編輯器直接粘貼";z=4};
cmbLangs={cls="combobox";left=262;top=625;right=446;bottom=651;db=1;dl=1;edge=1;items={"javascript"};mode="dropdown";z=2};
editCode={cls="edit";left=1;top=4;right=1052;bottom=599;db=1;dl=1;dr=1;dt=1;edge=1;hscroll=1;multiline=1;vscroll=1;z=5};
static={cls="static";text="請選擇語言：";left=70;top=629;right=248;bottom=649;align="right";db=1;dl=1;transparent=1;z=3};
webCtrl={cls="custom";text="自定義控件";left=8;top=10;right=1048;bottom=604;db=1;dl=1;dr=1;dt=1;hide=1;z=1}
)
/*}}*/
import web.view;
var wb = web.view(winform.webCtrl);
import win.clip.html;
wb.export({
onHighlight = function(html,background,foreground){
html = `<pre class="code" style="overflow-x:auto;text-align:left;box-shadow: rgba(216, 216, 216, 0.5) 0px 0px 0px 1px inset;padding:10px;border-radius:3px;background-color:`+background+`;color:`+foreground+`;white-space:pre;word-break:break-all;display:block;font-size:14px;font-style:normal;font-variant-ligatures:normal;font-variant-caps: normal;font-family: "Consolas", Consolas, "Liberation Mono", Menlo, Courier, monospace"><code>`
+ html + `</code></pre>`;
html,count = string.replace(html,'\n',"<br>");
if(!count){
html = string.replace(html,`\</code\>\</pre\>$`,`<br></code></pre>`);
}
var cb = win.clip.html();
cb.write(html);
winform.setTimeout(
function(){
winform.editCode.show(true);
winform.webCtrl.show(false);
winform.text = "HTML 代碼塊生成工具 - 已復(fù)制高亮代碼塊到剪貼板，可在網(wǎng)頁直接粘貼";
},1000);
};
setLanguages = function(langs){
winform.languages = langs;
}
})
winform.cmbLangs.onEditChange = function(){
var text = string.lower(winform.cmbLangs.text);
var items = table.filter( winform.languages : {}, lambda(v) string.startWith(v,text) );
winform.cmbLangs.autoComplete(items);
}
winform.cmbLangs.editBox.disableInputMethod();
import web.prism;
import wsock.tcp.asynHttpServer;
var httpServer = wsock.tcp.asynHttpServer();
httpServer.run(web.prism,{
["/index.html"] = /*****
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link href="prism.css" rel="stylesheet" />
</head>
<body>
<pre id="code-pre"><code id="code" class="lang-javascript"></code></pre>
<script src="prism.js"></script>
<script>
function computedColorStyle(element, options = {}) {
Array.prototype.forEach.call(element.children,child => {
computedColorStyle(child, options);
});
const computedStyle = getComputedStyle(element);
element.style["color"] = computedStyle.getPropertyValue("color");
}
highlight = function(code,language){
var html = Prism.highlight(code, Prism.languages[language], language);
var codeEle = document.getElementById("code");
codeEle.innerHTML = html;
computedColorStyle(codeEle);
const computedStyle = getComputedStyle(codeEle);
onHighlight(codeEle.innerHTML
,getComputedStyle(document.getElementById("code-pre")).getPropertyValue("background-color")
,computedStyle.getPropertyValue("color"));
}
setLanguages( Object.keys(Prism.languages) );
</script>
</body>
</html>
*****/
});
wb.go( httpServer.getUrl("/index.html"));
winform.button.oncommand = function(id,event){
winform.text = "HTML 代碼塊生成工具 - 本工具使用 aardio 語言編寫"
winform.editCode.show(false);
winform.webCtrl.show(true);
wb.xcall("highlight",winform.editCode.text,winform.cmbLangs.text);
}
winform.show();
win.loopMessage();打開 aardio 創(chuàng)建工程，然后復(fù)制粘貼上面的代碼到 main.aardio 里面就可以直接運(yùn)行，或生成獨(dú)立 EXE 文件：
這個軟件的原理：
1、首先通過 WebView2 調(diào)用 Prism.js 高亮代碼。為了可以內(nèi)存加載 Prism.js （ 支持生成獨(dú)立 EXE ），我寫了一個 aardio 擴(kuò)展庫 web.prism 。關(guān)于 WebView2 請參考：放棄 Electron，擁抱 WebView2！JavaScript 快速開發(fā)獨(dú)立 EXE 程序
2、因為 Prism.js 生成的 HTML 代碼塊都是使用 class 屬性指定樣式，所以我們需要調(diào)用 getComputedStyle 獲取最終渲染的字體顏色屬性。
3、最后在 JavaScript 里調(diào)用 aardio 函數(shù)處理生成的 HTML 代碼塊，aardio 的任務(wù)是將 HTML 修改為更合適直接粘貼的格式，并盡可能地處理各圖文編輯器的兼容問題。然后調(diào)用 win.clip.html 將處理好的 HTML 復(fù)制到系統(tǒng)剪貼板：
import win.clip.html;
var cb = win.clip.html();
cb.write(html); 然后只要愉快地粘貼代碼塊就可以。
如果是 aardio 代碼不需要用這個工具，在 aardio 編輯器里右鍵直接點(diǎn)『 復(fù)制全部到 HTML 代碼塊 』就可以了：
《大數(shù)據(jù)和人工智能交流》頭條號向廣大初學(xué)者新增C 、Java 、Python 、Scala、javascript 等目前流行的計算機(jī)、大數(shù)據(jù)編程語言，希望大家以后關(guān)注本頭條號更多的內(nèi)容。《大數(shù)據(jù)和人工智能》頭條號方便有基礎(chǔ)讀者的同時照顧廣大沒入門的初學(xué)者。
隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，尤其是移動互聯(lián)技術(shù)的發(fā)展，網(wǎng)絡(luò)空間的數(shù)據(jù)量呈現(xiàn)出爆炸式增長。如何從這些數(shù)據(jù)中快速獲取自己想要的信息，并以一種直觀、形象的方式展現(xiàn)出來？這就是大數(shù)據(jù)可視化要解決的核心問題。
數(shù)據(jù)可視化，最早可追溯到20世紀(jì)50年代，它是一門關(guān)于數(shù)據(jù)視覺表現(xiàn)形式的科學(xué)技術(shù)研究。數(shù)據(jù)可視化是一個處于不斷演變之中的概念，其邊界在不斷地擴(kuò)大，主要指的是技術(shù)上較為高級的技術(shù)方法，而這些技術(shù)方法允許利用圖形圖像處理、計算機(jī)視覺及用戶界面，通過表達(dá)、建模，以及對立體、表面、屬性及動畫的顯示，對數(shù)據(jù)加以可視化解釋。
1、大數(shù)據(jù)可視化的特點(diǎn)
（1）可視化可以使得碎片化的數(shù)據(jù)轉(zhuǎn)換為具有特定結(jié)構(gòu)的知識，從而為決策支持提供幫助。
（2）數(shù)據(jù)可視化的片面性特征要求可視化模式不能替代數(shù)據(jù)本身，只能作為數(shù)據(jù)表達(dá)的一種特定形式。
（3）大數(shù)據(jù)所產(chǎn)生的數(shù)據(jù)量必然要求人們對數(shù)據(jù)進(jìn)行歸納總結(jié)，對數(shù)據(jù)的結(jié)構(gòu)和形式進(jìn)行轉(zhuǎn)換處理。
（4）專業(yè)化特征是人們從可視化模型中提取專業(yè)知識的環(huán)節(jié)，它是數(shù)據(jù)可視化應(yīng)用的最后流程。
數(shù)據(jù)可視化的作用主要包括數(shù)據(jù)表達(dá)、數(shù)據(jù)操作和數(shù)據(jù)分析3個方面，它是以可視化技術(shù)支持計算機(jī)輔助數(shù)據(jù)認(rèn)識的3個基本階段。
（1）數(shù)據(jù)表達(dá)
數(shù)據(jù)表達(dá)是通過計算機(jī)圖形圖像技術(shù)來更加友好地展示數(shù)據(jù)信息，方便人們閱讀、理解和運(yùn)用數(shù)據(jù)。常見的形式如文本、圖表、圖像、二維圖形、三維模型、網(wǎng)絡(luò)圖、樹結(jié)構(gòu)、符號和電子地圖等。
（2）數(shù)據(jù)操作
數(shù)據(jù)操作是以計算機(jī)提供的界面、接口、協(xié)議等條件為基礎(chǔ)完成人與數(shù)據(jù)的交互需求，數(shù)據(jù)操作需要友好的人機(jī)交互技術(shù)、標(biāo)準(zhǔn)化的接口和協(xié)議支持來完成對多數(shù)據(jù)集合或者分布式的操作。
（3）數(shù)據(jù)分析
數(shù)據(jù)可視化可以有效地表達(dá)數(shù)據(jù)的各類特征，幫助人們推理和分析數(shù)據(jù)背后的客觀規(guī)律，進(jìn)而獲得相關(guān)知識，提高人們認(rèn)識數(shù)據(jù)的能力和利用數(shù)據(jù)的水平。
2、數(shù)據(jù)可視化流程
（1）數(shù)據(jù)獲取
主動式是以明確的數(shù)據(jù)需求為目的，如衛(wèi)星影像、測繪工程等；被動式是以數(shù)據(jù)平臺為基礎(chǔ)，由數(shù)據(jù)平臺的活動者提供數(shù)據(jù)來源，如電子商務(wù)、網(wǎng)絡(luò)論壇等。
（2）數(shù)據(jù)處理
數(shù)據(jù)處理是指對原始的數(shù)據(jù)進(jìn)行質(zhì)量分析、預(yù)處理和計算等步驟。數(shù)據(jù)處理的目標(biāo)是保證數(shù)據(jù)的準(zhǔn)確性、可用性。
（3）可視化模式
可視化模式是數(shù)據(jù)的一種特殊展現(xiàn)形式，常見的可視化模式有標(biāo)簽云、序列分析、網(wǎng)絡(luò)結(jié)構(gòu)、電子地圖等。可視化模式的選取決定了可視化方案的雛形。
（4）可視化應(yīng)用
可視化應(yīng)用主要根據(jù)用戶的主觀需求展開，最主要的應(yīng)用方式是用來觀察和展示，通過觀察和人腦分析進(jìn)行推理和認(rèn)知，輔助人們發(fā)現(xiàn)新知識或者得到新結(jié)論。
3、大數(shù)據(jù)可視化的工具
（1）Excel
Excel是Microsoft Office的組件之一，是由Microsoft為Windows和Apple Macintosh操作系統(tǒng)的計算機(jī)編寫和運(yùn)行的一款表格計算軟件。Excel 是微軟辦公套裝軟件的一個重要組成部分，它可以進(jìn)行各種數(shù)據(jù)的處理、統(tǒng)計分析、數(shù)據(jù)可視化顯示及輔助決策操作，廣泛地應(yīng)用于管理、統(tǒng)計、財經(jīng)、金融等眾多領(lǐng)域。
（2）Processing
Processing在數(shù)據(jù)可視化領(lǐng)域有著廣泛的應(yīng)用，可制作信息圖形、信息可視化、科學(xué)可視化和統(tǒng)計圖形等。下面通過一個簡單實例來認(rèn)識一下如何利用Processing實現(xiàn)數(shù)據(jù)的可視化展示。
（3）NodeXL
NodeXL 不僅具備常見的分析功能，如計算中心性、Page Rank值、網(wǎng)絡(luò)連通度、聚類系數(shù)等，還能對暫時性網(wǎng)絡(luò)進(jìn)行處理。在布局方面，NodeXL主要采用力導(dǎo)引布局方式。
NodeXL 的一大特色是可視化交互能力強(qiáng)，具有圖像移動、變焦和動態(tài)查詢等交互功能。其另一特色是可直接與互聯(lián)網(wǎng)相連，用戶可通過插件或直接導(dǎo)入E-mail或微博網(wǎng)頁中的數(shù)據(jù)。
（4）ECharts
ECharts自2013年6月正式發(fā)布1.0版本以來，在短短兩年多的時間，功能不斷完善，截至目前，ECharts已經(jīng)可以支持包括折線圖（區(qū)域圖）、柱狀圖（條狀圖）、散點(diǎn)圖（氣泡圖）、K線圖、餅圖（環(huán)形圖）、雷達(dá)圖（填充雷達(dá)圖）、和弦圖、力導(dǎo)向布局圖、地圖、儀表盤、漏斗圖、事件河流圖12類圖表，同時提供標(biāo)題、詳情氣泡、圖例、值域、數(shù)據(jù)區(qū)域、時間軸、工具箱7個可交互組件，支持多圖表、組件的聯(lián)動和混搭展現(xiàn)。
ECharts圖表工具為用戶提供了詳細(xì)的幫助文檔，這些文檔不僅介紹了每類圖表的使用方法，還詳細(xì)介紹了各類組件的使用方法，每類圖表都提供了豐富的實例。用戶在使用時可以參考實例提供的代碼，稍加修改就可以滿足自己的圖表展示需求。
4、大數(shù)據(jù)可視化展現(xiàn)的形式
大數(shù)據(jù)可視化展現(xiàn)的圖形有柱狀圖、散點(diǎn)圖、K線圖等等，下面列舉一些常用的展現(xiàn)形式：
（1）柱狀圖
柱狀圖(bar chart)，是一種以長方形的長度為變量的表達(dá)圖形的統(tǒng)計報告圖，由一系列高度不等的縱向條紋表示數(shù)據(jù)分布的情況，用來比較兩個或以上的價值（不同時間或者不同條件），只有一個變量，通常利用于較小的數(shù)據(jù)集分析。柱狀圖亦可橫向排列，或用多維方式表達(dá)。
（2）餅狀圖
餅狀圖常用于統(tǒng)計學(xué)模型，有2D與3D餅狀圖，2D餅狀圖為圓形。
餅狀圖顯示一個數(shù)據(jù)系列：在圖表中繪制的相關(guān)數(shù)據(jù)點(diǎn)，這些數(shù)據(jù)源自數(shù)據(jù)表的行或列。圖表中的每個數(shù)據(jù)系列具有唯一的顏色或圖案并且在圖表的圖例中表示。可以在圖表中繪制一個或多個數(shù)據(jù)系列。餅狀圖只有一個數(shù)據(jù)系列。圖中各項的大小與各項總和的比例。
餅狀圖中的數(shù)據(jù)點(diǎn)：在圖表中繪制的單個值，這些值由條形、柱形、折線、餅狀圖或圓環(huán)圖的扇面、圓點(diǎn)和其他被稱為數(shù)據(jù)標(biāo)記的圖形表示。相同顏色的數(shù)據(jù)標(biāo)記組成一個數(shù)據(jù)系列。
（3）散點(diǎn)圖
散點(diǎn)圖是指在回歸分析中，數(shù)據(jù)點(diǎn)在直角坐標(biāo)系平面上的分布圖，散點(diǎn)圖表示因變量隨自變量而變化的大致趨勢，據(jù)此可以選擇合適的函數(shù)對數(shù)據(jù)點(diǎn)進(jìn)行擬合。
用兩組數(shù)據(jù)構(gòu)成多個坐標(biāo)點(diǎn)，考察坐標(biāo)點(diǎn)的分布，判斷兩變量之間是否存在某種關(guān)聯(lián)或總結(jié)坐標(biāo)點(diǎn)的分布模式。散點(diǎn)圖將序列顯示為一組點(diǎn)。值由點(diǎn)在圖表中的位置表示。類別由圖表中的不同標(biāo)記表示。散點(diǎn)圖通常用于比較跨類別的聚合數(shù)據(jù)。
（4）曲線圖
曲線圖也稱線狀圖，是指用于技術(shù)分析，線狀圖是最簡單的圖形。這種圖形清楚地記錄價格隨時間變動而變化，以點(diǎn)標(biāo)示價格的變化，并連點(diǎn)成線。
線狀圖的繪制須先建立坐標(biāo)系，橫坐標(biāo)為繪圖者所選擇的時間單位，縱坐標(biāo)是繪圖者選擇的價格變動幅度單位，把特定時間單位內(nèi)的價格水平以點(diǎn)的形式標(biāo)在座標(biāo)上，并連點(diǎn)成線，即可繪制成價格變動的線狀圖。該圖可清楚地反映出過去時間內(nèi)匯價的變動情況。
（5）百度地圖
百度地圖是為用戶提供包括智能路線規(guī)劃、智能導(dǎo)航（駕車、步行、騎行）、實時路況等出行相關(guān)服務(wù)的平臺。
作為地圖行業(yè)市場的領(lǐng)先者，百度地圖秉持"科技讓出行更簡單"的品牌愿景，以"服務(wù)用戶出行"為使命，以"科技"為手段不斷探索創(chuàng)新。百度地圖國際化地圖已覆蓋全球209個國家和地區(qū)。伴隨著AI時代的到來，百度地圖實現(xiàn)了語音交互覆蓋用戶操控全流程，還上線了AR步導(dǎo)、AR導(dǎo)游等實用功能，更加方便用戶的出行。
5、使用Echarts實現(xiàn)數(shù)據(jù)可視化
Echarts是一個使用 JavaScript 實現(xiàn)的開源可視化庫，可以流暢的運(yùn)行在 PC 和移動設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等），底層依賴輕量級的矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定制的數(shù)據(jù)可視化圖表。
Echarts的特點(diǎn)如下：
（1）豐富的可視化類型
ECharts 提供了常規(guī)的折線圖、柱狀圖、散點(diǎn)圖、餅圖、K線圖，用于統(tǒng)計的盒形圖，用于地理數(shù)據(jù)可視化的地圖、熱力圖、線圖，用于關(guān)系數(shù)據(jù)可視化的關(guān)系圖、treemap、旭日圖，多維數(shù)據(jù)可視化的平行坐標(biāo)，還有用于 BI 的漏斗圖，儀表盤，并且支持圖與圖之間的混搭。
除了已經(jīng)內(nèi)置的包含了豐富功能的圖表，ECharts 還提供了自定義系列，只需要傳入一個renderItem函數(shù)，就可以從數(shù)據(jù)映射到任何你想要的圖形，更棒的是這些都還能和已有的交互組件結(jié)合使用而不需要操心其它事情。
（2）多種數(shù)據(jù)格式無需轉(zhuǎn)換直接使用
ECharts 內(nèi)置的 dataset 屬性（4.0+）支持直接傳入包括二維表，key-value 等多種格式的數(shù)據(jù)源，通過簡單的設(shè)置 encode 屬性就可以完成從數(shù)據(jù)到圖形的映射，這種方式更符合可視化的直覺，省去了大部分場景下數(shù)據(jù)轉(zhuǎn)換的步驟，而且多個組件能夠共享一份數(shù)據(jù)而不用克隆。
為了配合大數(shù)據(jù)量的展現(xiàn)，ECharts 還支持輸入 TypedArray 格式的數(shù)據(jù)，TypedArray 在大數(shù)據(jù)量的存儲中可以占用更少的內(nèi)存，對 GC 友好等特性也可以大幅度提升可視化應(yīng)用的性能。
（3）千萬數(shù)據(jù)的前端展現(xiàn)
通過增量渲染技術(shù)，配合各種細(xì)致的優(yōu)化，ECharts 能夠展現(xiàn)千萬級的數(shù)據(jù)量，并且在這個數(shù)據(jù)量級依然能夠進(jìn)行流暢的縮放平移等交互。
幾千萬的地理坐標(biāo)數(shù)據(jù)就算使用二進(jìn)制存儲也要占上百 MB 的空間。因此 ECharts 同時提供了對流加載（4.0+）的支持，你可以使用 WebSocket 或者對數(shù)據(jù)分塊后加載，加載多少渲染多少，不需要漫長地等待所有數(shù)據(jù)加載完再進(jìn)行繪制。
（4）移動端優(yōu)化
ECharts 針對移動端交互做了細(xì)致的優(yōu)化，例如移動端小屏上適于用手指在坐標(biāo)系中進(jìn)行縮放、平移。 PC 端也可以用鼠標(biāo)在圖中進(jìn)行縮放（用鼠標(biāo)滾輪）、平移等。
細(xì)粒度的模塊化和打包機(jī)制可以讓 ECharts 在移動端也擁有很小的體積，可選的 SVG 渲染模塊讓移動端的內(nèi)存占用不再捉襟見肘
（5）多渲染方案，跨平臺使用
ECharts 支持以 Canvas、SVG（4.0+）、VML 的形式渲染圖表。VML 可以兼容低版本 IE，SVG 使得移動端不再為內(nèi)存擔(dān)憂，Canvas 可以輕松應(yīng)對大數(shù)據(jù)量和特效的展現(xiàn)。不同的渲染方式提供了更多選擇，使得 ECharts 在各種場景下都有更好的表現(xiàn)。
除了 PC 和移動端的瀏覽器，ECharts 還能在 node 上配合 node-canvas 進(jìn)行高效的服務(wù)端渲染（SSR）。從 4.0 開始我們還和微信小程序的團(tuán)隊合作，提供了 ECharts 對小程序的適配。
（6）深度的交互式數(shù)據(jù)探索
交互是從數(shù)據(jù)中發(fā)掘信息的重要手段。"總覽為先，縮放過濾按需查看細(xì)節(jié)"是數(shù)據(jù)可視化交互的基本需求。
ECharts 一直在交互的路上前進(jìn)，我們提供了 圖例、視覺映射、數(shù)據(jù)區(qū)域縮放、tooltip、數(shù)據(jù)刷選等開箱即用的交互組件，可以對數(shù)據(jù)進(jìn)行多維度數(shù)據(jù)篩取、視圖縮放、展示細(xì)節(jié)等交互操作。
（7）多維數(shù)據(jù)的支持以及豐富的視覺編碼手段
ECharts 3 開始加強(qiáng)了對多維數(shù)據(jù)的支持。除了加入了平行坐標(biāo)等常見的多維數(shù)據(jù)可視化工具外，對于傳統(tǒng)的散點(diǎn)圖等，傳入的數(shù)據(jù)也可以是多個維度的。配合視覺映射組件 visualMap 提供的豐富的視覺編碼，能夠?qū)⒉煌S度的數(shù)據(jù)映射到顏色，大小，透明度，明暗度等不同的視覺通道。
（8）動態(tài)數(shù)據(jù)
ECharts 由數(shù)據(jù)驅(qū)動，數(shù)據(jù)的改變驅(qū)動圖表展現(xiàn)的改變。因此動態(tài)數(shù)據(jù)的實現(xiàn)也變得異常簡單，只需要獲取數(shù)據(jù)，填入數(shù)據(jù)，ECharts 會找到兩組數(shù)據(jù)之間的差異然后通過合適的動畫去表現(xiàn)數(shù)據(jù)的變化。配合 timeline 組件能夠在更高的時間維度上去表現(xiàn)數(shù)據(jù)的信息。
（9）絢麗的特效
ECharts 針對線數(shù)據(jù)，點(diǎn)數(shù)據(jù)等地理數(shù)據(jù)的可視化提供了吸引眼球的特效。
通過GL實現(xiàn)更多更強(qiáng)大絢麗的三維可視化。想要在 VR，大屏場景里實現(xiàn)三維的可視化效果？我們提供了基于 WebGL 的 ECharts GL，你可以跟使用 ECharts 普通組件一樣輕松的使用 ECharts GL 繪制出三維的地球，建筑群，人口分布的柱狀圖，在這基礎(chǔ)之上我們還提供了不同層級的畫面配置項，幾行配置就能得到藝術(shù)化的畫面。
示例-1：
在數(shù)據(jù)倉庫hive中有個月銷售額表Month_ Sales，數(shù)據(jù)格式如下：
產(chǎn)品系列 單價 銷售量 銷售額
樣本數(shù)據(jù)如下：
B 255 102 26010
B2 333 76 25308
C 308 88 27104
D 399 76 30324
B1 200 87 22000
A1 300 52 23000
C1 109 73 24000
D1 101 89 24900
要求：
1、使用ajax調(diào)用后臺接口獲取Month_ Sales月銷售額度在25000以上的產(chǎn)品系列
2、將結(jié)果展現(xiàn)在圖表，如下所示：
實現(xiàn)過程如下所示：
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="jquery.min.js"></script>
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 為 ECharts 準(zhǔn)備一個具備大小（寬高）的 DOM -->
<div id="main" style="width: 800px;height:400px;"></div>
<script type="text/javascript">
$(function(){
var xAxisData = new Array();
var yAxisData = new Array();
// ajax同步從服務(wù)器請求數(shù)據(jù)
$.ajax({
type: 'get',
url: 'http://localhost:8888/bigdata/monthSales/list',
data: {},
dataType: 'json',
async: false,
success: function (data) {
for(var i in data){
//商品名稱數(shù)組
xAxisData.push(data[i].product);
//商品銷售額數(shù)組
yAxisData.push(data[i].sales);
}
},
error: function (data) {
alert('請求失敗');
}
});
// 基于準(zhǔn)備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數(shù)據(jù)
var option = {
title: {
text: '月銷售額度在25000以上的產(chǎn)品系列'
},
color: ['#3398DB'],//柱狀圖顏色
tooltip : {
trigger: 'axis',
axisPointer : { // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
type : 'shadow' // 默認(rèn)為直線，可選為：'line' | 'shadow'
}
},
legend: {
data:['銷售額']
},
xAxis: {
data: xAxisData
},
yAxis: {},
series: [{
name: '銷售額',
type: 'bar',
barWidth: '50%',
data: yAxisData
}]
};
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
});
</script>
</body>
</html>
示例-2：
下面是各個國家某產(chǎn)品出口配額的數(shù)據(jù)（表名：export_quota）：
國家 銷量（單位：億元）
中國 11.2
美國 13.5
日本 7.6
德國 8.9
法國 9.6
意大利 9.2
馬來西亞 7.4
要求使用hive實現(xiàn)輸入一個或者某幾個國家查詢產(chǎn)品的出口配額數(shù)據(jù)，將結(jié)果展現(xiàn)為條形圖。例如查詢上述樣本所有數(shù)據(jù)，圖形展現(xiàn)如下：
實現(xiàn)過程如下：
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="jquery.min.js"></script>
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 為 ECharts 準(zhǔn)備一個具備大小（寬高）的 DOM -->
<div id="main" style="width: 800px;height:400px;"></div>
<script type="text/javascript">
$(function(){
var xAxisData = new Array();
var yAxisData = new Array();
// ajax同步從服務(wù)器請求數(shù)據(jù)
$.ajax({
type: 'get',
url: 'http://localhost:8888/bigdata/exportQuota/list',
data: {},
dataType: 'json',
async: false,
success: function (data) {
for(var i in data){
//國家名稱數(shù)組
xAxisData.push(data[i].exportAmount);
//出口配額數(shù)組
yAxisData.push(data[i].country);
}
},
error: function (data) {
alert('請求失敗');
}
});
// 基于準(zhǔn)備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數(shù)據(jù)
var option = {
title: {
text: '產(chǎn)品出口額'
},
color: ['blue'],//柱狀圖顏色
tooltip : {
trigger: 'axis',
axisPointer : { // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
type : 'shadow' // 默認(rèn)為直線，可選為：'line' | 'shadow'
}
},
xAxis: {
type:'value',
data: [0,2]
},
yAxis: {
data: yAxisData
},
series: [{
name: '銷售額',
type: 'bar',
barWidth: '50%',
data: xAxisData
}]
};
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
});
</script>
</body>
</html>
示例-3：
經(jīng)過調(diào)查，男女身高和體重有一定的分布關(guān)系（應(yīng)該是正態(tài)分布），就是給你一定的身高，就能大致預(yù)測出他（她）的體重。當(dāng)然非正常數(shù)據(jù)除外，比如某人身高只有160，但是體重確是190斤，我們把非正常數(shù)據(jù)清洗的過程叫做"去噪"。Female_Height_Weight.log和
Male_Height_Weight.log給出2003年的調(diào)研數(shù)據(jù)。
要求：
1、使用hive能夠查詢給定男女身高范圍的散點(diǎn)圖，例如，查詢男身高范圍：170—190，女身高范圍：160—180，然后顯示身高和體重關(guān)系的散點(diǎn)圖
2、使用Echarts散點(diǎn)圖展現(xiàn)處理后的結(jié)果 :
實現(xiàn)過程如下所示：
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="jquery.min.js"></script>
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 為 ECharts 準(zhǔn)備一個具備大小（寬高）的 DOM -->
<div id="main" style="width: 1000px;height:400px;"></div>
<script type="text/javascript">
$(function(){
var allmales = new Array();
var allfemales = new Array();
// ajax同步從服務(wù)器請求數(shù)據(jù)
$.ajax({
type: 'get',
url: 'http://localhost:8888/bigdata/personHeightWeight/list',
data: {},
dataType: 'json',
async: false,
success: function (data) {
for(var i in data.males){
var males = new Array();
males.push(data.males[i].height);
males.push(data.males[i].weight);
allmales.push(males);
}
for(var i in data.females){
var females = new Array();
females.push(data.females[i].height);
females.push(data.females[i].weight);
allfemales.push(females);
}
},
error: function (data) {
alert('請求失敗');
}
});
// 基于準(zhǔn)備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
var option = {
title : {
text: '男性女性身高體重分布',
subtext: '抽樣調(diào)查來自: Heinz 2003'
},
tooltip : {
trigger: 'axis',
showDelay : 0,
formatter : function (params) {
if (params.value.length > 1) {
return params.seriesName + ' :<br/>'
+ params.value[0] + 'cm '
+ params.value[1] + 'kg ';
}
else {
return params.seriesName + ' :<br/>'
+ params.name + ' : '
+ params.value + 'kg ';
}
},
axisPointer:{
show: true,
type : 'cross',
lineStyle: {
type : 'dashed',
width : 1
}
}
},
legend: {
data:['女性','男性']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataZoom : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
xAxis : [
{
type : 'value',
scale:true,
axisLabel : {
formatter: '{value} cm'
}
}
],
yAxis : [
{
type : 'value',
scale:true,
axisLabel : {
formatter: '{value} kg'
}
}
],
series : [
{
name:'女性',
type:'scatter',
data: allfemales,
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'男性',
type:'scatter',
data: allmales,
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
}
]
};
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
});
</script>
</body>
</html>
《大數(shù)據(jù)和人工智能交流》的宗旨
1、將大數(shù)據(jù)和人工智能的專業(yè)數(shù)學(xué)：概率數(shù)理統(tǒng)計、線性代數(shù)、決策論、優(yōu)化論、博弈論等數(shù)學(xué)模型變得通俗易懂。
2、將大數(shù)據(jù)和人工智能的專業(yè)涉及到的數(shù)據(jù)結(jié)構(gòu)和算法：分類、聚類 、回歸算法、概率等算法變得通俗易懂。
3、最新的高科技動態(tài)：數(shù)據(jù)采集方面的智能傳感器技術(shù)；醫(yī)療大數(shù)據(jù)智能決策分析；物聯(lián)網(wǎng)智慧城市等等。
4、根據(jù)初學(xué)者需要會有C語言、Java語言、Python語言、Scala函數(shù)式等目前主流計算機(jī)語言。
5、根據(jù)讀者的需要有和人工智能相關(guān)的計算機(jī)科學(xué)與技術(shù)、電子技術(shù)、芯片技術(shù)等基礎(chǔ)學(xué)科通俗易懂的文章。
Numeral.js是一款專門處理數(shù)字的開源免費(fèi)的類庫。它可以對數(shù)字通過方法來直接操作，比計算表達(dá)式的方式似乎要便利些許。也可以通過格式化，很容易地轉(zhuǎn)換為帶逗號的數(shù)字或者貨幣形式，這個轉(zhuǎn)換在做前端dashboard指標(biāo)的時候非常實用。目前它在github擁有8.6k顆星，應(yīng)該屬于比較受歡迎的項目了。
https://github.com/adamwdraper/Numeral-js
npm install numeral
<script src="numeral.min.js"></script>
或者
var numeral = require('numeral');
var myNumeral = numeral(1000);
var value = myNumeral.value();
// 1000
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
