數(shù)據(jù)可視化詳解

1.數(shù)據(jù)可視化相關(guān)的庫

D3 是一個JavaScript數(shù)據(jù)可視化庫用于HTML和SVG沙峻。它旨在將數(shù)據(jù)帶入生活孤个，強調(diào)Web標(biāo)準(zhǔn)伦忠，將強大的可視化技術(shù)與數(shù)據(jù)驅(qū)動的文檔對象模型(DOM)操作方法相結(jié)合玫坛。 D3是Github上最流行的數(shù)據(jù)可視化項目滋觉，在數(shù)據(jù)科學(xué)界有很好的表現(xiàn)到千。點擊去往官方網(wǎng)址昌渤。

ECharts提供了常規(guī)的折線圖、柱狀圖等憔四；用于地理數(shù)據(jù)可視化的圖膀息；用于關(guān)系數(shù)據(jù)可視化的圖表；還有用于 BI 的漏斗圖了赵，儀表盤潜支，并且支持圖與圖之間的混搭。除了已經(jīng)內(nèi)置的包含了豐富功能的圖表斟览，ECharts 還提供了自定義系列毁腿，只需要傳入一個renderItem函數(shù)，就可以從數(shù)據(jù)映射到任何你想要的圖形。點擊去往官方網(wǎng)址已烤。

chartjs是一個圖表控件集合鸠窗，使用html5的canvas進行繪制。點擊去往官方網(wǎng)址胯究。

Highcharts 系列軟件包含 Highcharts JS稍计，Highstock JS，Highmaps JS 共三款軟件裕循，均為純 JavaScript 編寫的 HTML5 圖表庫臣嚣，全部源碼開放，個人及非商業(yè)用途可以任意使用及源代碼編輯剥哑。點擊去往官方網(wǎng)址硅则。

AntV 3.0 已全新升級，主要包含 G2株婴、G6怎虫、F2、L7 以及一套完整的圖表使用和設(shè)計規(guī)范困介。得益于豐富的業(yè)務(wù)場景和用戶需求挑戰(zhàn)大审，AntV 經(jīng)歷多年積累與不斷打磨，已支撐阿里集團內(nèi)外 20000+ 業(yè)務(wù)系統(tǒng)座哩，通過了日均千萬級 UV 產(chǎn)品的嚴(yán)苛考驗后方敢與君見徒扶。點擊去往官方網(wǎng)址。

2.使用ECharts實現(xiàn)一周的盈虧可視化圖表

1.在Web端實現(xiàn)ECharts

下載ECharts相關(guān)的資源文件根穷，官方為我們提供了多種下載方式姜骡，選擇自己可以操作的下載方式即可，本文主要使用dist文件夾下的echarts.min.js缠诅；

在Visual Studio Code中新建一個echarts01.html溶浴，用來展示可視化圖表,并在文中實現(xiàn)如下代碼；

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><scriptsrc="./dist/echarts.min.js"></script><style>h1{text-align:center;? ? ? ? }</style></head><body><h1>Week's Gain And Loss</h4><divid="main"style="width: 100%;height:800px;"></div><scripttype="text/javascript">// 基于準(zhǔn)備好的dom管引，初始化echarts實例varmyChart=echarts.init(document.getElementById('main'));// 指定圖表的配置項和數(shù)據(jù)option={tooltip: {trigger:'axis',axisPointer: {// 坐標(biāo)軸指示器士败，坐標(biāo)軸觸發(fā)有效type:'shadow'// 默認(rèn)為直線，可選為：'line' | 'shadow'? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? },legend: {data: ['利潤','支出','收入']? ? ? ? ? ? ? ? },grid: {left:'3%',right:'4%',bottom:'3%',containLabel:true? ? ? ? ? ? ? ? },xAxis: [? ? ? ? ? ? ? ? ? ? {type:'value'? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ],yAxis: [? ? ? ? ? ? ? ? ? ? {type:'category',axisTick: {show:false? ? ? ? ? ? ? ? ? ? ? ? },data: ['周一','周二','周三','周四','周五','周六','周日']? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ],series: [? ? ? ? ? ? ? ? ? ? {name:'利潤',type:'bar',label: {show:true,position:'inside'? ? ? ? ? ? ? ? ? ? ? ? },data: [200,170,240,244,200,220,210]? ? ? ? ? ? ? ? ? ? },? ? ? ? ? ? ? ? ? ? {name:'收入',type:'bar',stack:'總量',label: {show:true? ? ? ? ? ? ? ? ? ? ? ? },data: [320,302,341,374,390,450,420]? ? ? ? ? ? ? ? ? ? },? ? ? ? ? ? ? ? ? ? {name:'支出',type:'bar',stack:'總量',label: {show:true,position:'left'? ? ? ? ? ? ? ? ? ? ? ? },data: [-120,-132,-101,-134,-190,-230,-210]? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ]? ? ? ? ? ? };// 使用剛指定的配置項和數(shù)據(jù)顯示圖表褥伴。myChart.setOption(option);</script></body></html>

在代碼中的option是數(shù)據(jù)可視化的關(guān)鍵數(shù)據(jù)谅将，在使用過程中可根據(jù)具體需求更換option來展示其它餅狀圖、雷達(dá)圖重慢、柱狀圖等饥臂。

2.結(jié)合騰訊云實現(xiàn)以上案例

登錄騰訊云官方注冊賬號，登錄成功之后似踱，在左上角找到云產(chǎn)品>云開發(fā)>云開發(fā)CloudBase>新建環(huán)境即可使用隅熙；

如圖所示稽煤，在左側(cè)找到數(shù)據(jù)庫>添加集合Echarts>在桌面新建txt文件，并把option數(shù)據(jù)放入文件中囚戚，保存為json文件>導(dǎo)入json文件到Echarts集合中

說明：其中點擊紅色箭頭導(dǎo)入json文件酵熙，藍(lán)色箭頭部分為導(dǎo)入成功的一條數(shù)據(jù)。

在代碼中使用云開發(fā)來實現(xiàn)ECharts驰坊，代碼如下所示匾二；

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><scriptsrc="https://imgcache.qq.com/qcloud/tcbjs/1.5.1/tcb.js"></script><scriptsrc="./dist/echarts.min.js"></script><style>h1{text-align:center;? ? ? ? }</style></head><body><h1>Week's Gain And Loss</h4><divid="main"style="width: 100%;height:800px;"></div><scripttype="text/javascript">constapp=tcb.init({env:'你的環(huán)境ID'// 此處填入你的環(huán)境ID? ? ? ? });app.auth({persistence:'session'//在窗口關(guān)閉時清除身份驗證狀態(tài)? ? ? ? }).anonymousAuthProvider().signIn()//AnonymousAuthProvider.signIn() 匿名登錄云開發(fā).then(()=>{//登錄成功constdb=app.database()db.collection("Echarts").where({_id:"ofPyPg1pMtWhlbVdheFDRrp5b8o1YSzPZeg5znMXFCg2GsxL",}).get().then(res=>{constoption=res.data[0]// 基于準(zhǔn)備好的dom拳芙，初始化echarts實例varmyChart=echarts.init(document.getElementById('main'));// 使用剛指定的配置項和數(shù)據(jù)顯示圖表察藐。myChart.setOption(option);? ? ? ? ? ? ? ? })}).catch(err=>{console.log("登錄失敗",err)//登錄失敗? ? ? ? ? ? })</script></body></html>

4.在騰訊云開發(fā)左側(cè)找到靜態(tài)網(wǎng)站托管，這里是把自己的HTML文件和ECharts文件上傳到文件管理中舟扎，以便我們在瀏覽器訪問

打開靜態(tài)網(wǎng)站托管>文件管理>上傳文件（找到自己HTML文件的存放位置上傳即可）

打開靜態(tài)網(wǎng)站托管>基礎(chǔ)配置（找到自己的默認(rèn)域名）>在瀏覽器中通過“域名/文件路徑”即可訪問

3.在微信小程序中使用ECharts

下載微信開發(fā)者工具分飞，申請小程序appid

下載githup上的開源echarts小程序

在微信開發(fā)者創(chuàng)建一個新項目，創(chuàng)建成功之后把其它不需要的文件刪除干凈

把githup上下載的小程序中的ec-canvas睹限、img文件復(fù)制到自己創(chuàng)建的項目中

把app.wxss中的代碼復(fù)制到自己項目中的app.wxss

.container{position:absolute;top:0;bottom:0;left:0;right:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;box-sizing:border-box;}

把其中一個page頁面復(fù)制到自己項目中浸须，其中wxml、wxss邦泄、json文件都是通用的，使用時把js文件中的option替換掉就可以使用其它頁面

4.小程序云開發(fā)實現(xiàn)ECharts

下載微信開發(fā)者工具裂垦，申請小程序appid

下載githup上的開源echarts小程序

在微信開發(fā)者創(chuàng)建一個新項目顺囊，并點擊云開發(fā)，創(chuàng)建成功之后把其它不需要的文件刪除干凈蕉拢，并在app.js中初始化云開發(fā)特碳，云開發(fā)環(huán)境id在小程序云開發(fā)控制臺中設(shè)置找到

onLaunch:function() {wx.cloud.init({env:"云開發(fā)環(huán)境id",? })}

在云開發(fā)控制臺>數(shù)據(jù)庫>新建集合Echarts>高級操作>add模板，其中data為option的數(shù)據(jù)晕换，點擊執(zhí)行即可

把githup上下載的小程序中的ec-canvas午乓、img文件復(fù)制到自己創(chuàng)建的項目中

把app.wxss中的代碼復(fù)制到自己項目中的app.wxss，代碼同上

把其中一個page頁面復(fù)制到自己項目中闸准，其中wxml益愈、wxss、json文件都是通用的夷家，使用時把js文件中的option替換掉就可以使用其它頁面蒸其，這里的option通過云開發(fā)獲得

import*asechartsfrom'../../ec-canvas/echarts';constapp=getApp()constdb=wx.cloud.database()asyncfunctioninitChart(canvas,width,height,dpr) {constoption=(awaitdb.collection("Echarts").where({_id:"baada3ac5ed4ab250022ec955b2a7fec",}).get()).data[0]constchart=echarts.init(canvas,null, {width:width,height:height,devicePixelRatio:dpr? })canvas.setChart(chart);chart.setOption(option,true);returnchart;}Page({onShareAppMessage:function(res) {return{title:'ECharts 可以在微信小程序中使用啦！',path:'/pages/index/index',success:function() { },fail:function() { }? ? }? },data: {ec: {onInit:initChart? ? }? },})

3.使用AntV實現(xiàn)各國人口分布圖

1.AntV的特性

?? 完善的圖形語法：數(shù)據(jù)到圖形的映射库快，能夠繪制出所有的圖表摸袁。

?? 全新的交互語法：通過觸發(fā)和反饋機制可以組合出各種交互行為，對數(shù)據(jù)進行探索义屏。

?? 強大的 View 模塊：可支持開發(fā)個性化的數(shù)據(jù)多維分析圖形靠汁。

?? 雙引擎渲染：Canvas 或 SVG 任意切換蜂大。

?? 可視化組件體系：面向交互、體驗優(yōu)雅蝶怔。

?? 全面擁抱 TypeScript：提供完整的類型定義文件奶浦。

2.Antv的安裝方法

通過 npm 安裝

npm install @antv/g2 --save

成功安裝完成之后，即可使用import或require進行引用添谊。

import { Chart } from '@antv/g2';const chart = new Chart({? container: 'c1',? width: 600,? height: 300,});

瀏覽器引入

既可以通過將腳本下載到本地也可以直接引入在線資源：

<script src="https://gw.alipayobjects.com/os/lib/antv/g2/{{version}}/dist/g2.min.js"></script>

<script src="./g2.js"></script>

你也可以直接通過unpkg下載。

3.AntV的使用

可以在官網(wǎng)上找到需要自己使用的Demo,把對應(yīng)的代碼替換掉即可使用斩狱，以下為各國人口分布圖的代碼：

<!DOCTYPE html><html><head><metacharset="utf-8"/><title>柱狀圖</title><scriptsrc="./node_modules/@antv/g2/dist/g2.min.js"></script><style>h1{text-align:center;? ? }</style></head><body><h1>各國人口分布圖</h1><divid="container"></div><script>constdata=[{city:'中國（北京）',type:'首都人口',value:0.01},{city:'中國（北京）',type:'城市人口',value:0.53},{city:'中國（北京）',type:'農(nóng)村人口',value:0.46},{city:'美國（華盛頓）',type:'首都人口',value:0.01},{city:'美國（華盛頓）',type:'城市人口',value:0.8},{city:'美國（華盛頓）',type:'農(nóng)村人口',value:0.19},{city:'印度（德里）',type:'首都人口',value:0.02},{city:'印度（德里）',type:'城市人口',value:0.3},{city:'印度（德里）',type:'農(nóng)村人口',value:0.68},{city:'俄羅斯（莫斯科）',type:'首都人口',value:0.08},{city:'俄羅斯（莫斯科）',type:'城市人口',value:0.66},{city:'俄羅斯（莫斯科）',type:'農(nóng)村人口',value:0.26},{city:'法國（巴黎）',type:'首都人口',value:0.16},{city:'法國（巴黎）',type:'城市人口',value:0.63},{city:'法國（巴黎）',type:'農(nóng)村人口',value:0.21},{city:'韓國（首爾）',type:'首都人口',value:0.19},{city:'韓國（首爾）',type:'城市人口',value:0.63},{city:'韓國（首爾）',type:'農(nóng)村人口',value:0.18},{city:'丹麥（哥本哈根）',type:'首都人口',value:0.22},{city:'丹麥（哥本哈根）',type:'城市人口',value:0.65},{city:'丹麥（哥本哈根）',type:'農(nóng)村人口',value:0.13},{city:'冰島（雷克雅未克）',type:'首都人口',value:0.56},{city:'冰島（雷克雅未克）',type:'城市人口',value:0.38},{city:'冰島（雷克雅未克）',type:'農(nóng)村人口',value:0.06},? ? ];constchart=newG2.Chart({container:'container',autoFit:true,height:700,? ? });chart.data(data);chart.scale('value', {alias:'占比（%）',? ? });chart.axis('city', {tickLine:null,line:null,? ? });chart.axis('value', {label:null,title: {style: {fontSize:14,fontWeight:300,? ? ? ? },? ? ? },grid:null,? ? });chart.legend({position:'top',? ? });chart.coordinate('rect').transpose();chart.tooltip({shared:true,showMarkers:false,? ? });chart.interaction('active-region');chart.interval().adjust('stack').position('city*value').color('type*city', (type,city)=>{if(type==='首都人口') {return'#1890ff';? ? ? ? }if(type==='城市人口') {return'#ced4d9';? ? ? ? }if(type==='農(nóng)村人口') {return'#f0f2f3';? ? ? ? }if(type==='首都人口'&&city==='中國（北京）') {return'#f5222d';? ? ? ? }? ? ? }).size(26).label('value*type', (val,t)=>{constcolor=t==='首都人口'?'white':'#47494b';if(val<0.05) {returnnull;? ? ? ? }return{position:'middle',offset:0,style: {fontSize:12,fill:color,lineWidth:0,stroke:null,shadowBlur:2,shadowColor:'rgba(0, 0, 0, .45)',? ? ? ? ? },? ? ? ? };? ? ? });chart.render();</script></body></html>