整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
計(jì)圖是根據(jù)統(tǒng)計(jì)數(shù)據(jù)，用幾何圖形、形象事物和地圖等繪制的各種圖形。統(tǒng)計(jì)圖形具有直觀、形象、生動(dòng)、具體等特點(diǎn)，可以使復(fù)雜的統(tǒng)計(jì)數(shù)據(jù)簡(jiǎn)單化、通俗化、形象化，使人一目了然，便于理解和比較。統(tǒng)計(jì)圖在統(tǒng)計(jì)資料整理與分析中占有重要地位，并得到廣泛應(yīng)用。
大數(shù)據(jù)時(shí)代，數(shù)據(jù)可視化方法大大突破了傳統(tǒng)統(tǒng)計(jì)學(xué)中的幾類(lèi)（散點(diǎn)圖、折線圖、餅圖、柱狀圖）圖形。數(shù)據(jù)可視化是連接用戶(hù)和數(shù)據(jù)的橋梁，是用戶(hù)展示數(shù)據(jù)處理成果的一種手段，有非常廣泛的應(yīng)用和創(chuàng)建途徑。
1、統(tǒng)計(jì)圖形
統(tǒng)計(jì)圖形是利用點(diǎn)、線、面、體等繪制成幾何圖形，以表示各種數(shù)量間的關(guān)系及其變動(dòng)情況的工具。常用的統(tǒng)計(jì)圖有條形統(tǒng)計(jì)圖、扇形（餅圖）統(tǒng)計(jì)圖、折線統(tǒng)計(jì)圖、散點(diǎn)圖等。在統(tǒng)計(jì)學(xué)中把利用統(tǒng)計(jì)圖形表現(xiàn)統(tǒng)計(jì)資料的方法叫做統(tǒng)計(jì)圖示法。
按圖形的數(shù)字性質(zhì)分類(lèi)，有實(shí)數(shù)圖、累積數(shù)圖、百分?jǐn)?shù)圖、對(duì)數(shù)圖、指數(shù)圖等；其結(jié)構(gòu)包括圖名、圖目(圖中的標(biāo)題)、圖尺(坐標(biāo)單位)、各種圖線(基線、輪廓線、指導(dǎo)線等)、圖注(圖例說(shuō)明、資料來(lái)源)等。
2、eCharts
eCharts商業(yè)級(jí)數(shù)據(jù)圖表是一個(gè)純Javascript的開(kāi)源圖表庫(kù)，最初由百度商業(yè)前端數(shù)據(jù)可視化團(tuán)隊(duì)負(fù)責(zé)開(kāi)發(fā)維護(hù)。可以流暢的運(yùn)行在PC和移動(dòng)設(shè)備上。
底層依賴(lài)輕量級(jí)的Canvas類(lèi)庫(kù)ZRender，提供直觀，生動(dòng)，可交互，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。創(chuàng)新的拖拽重計(jì)算、數(shù)據(jù)視圖、值域漫游等特性大大增強(qiáng)了用戶(hù)體驗(yàn)，賦予了用戶(hù)對(duì)數(shù)據(jù)進(jìn)行挖掘、整合的能力。支持折線圖（區(qū)域圖）、柱狀圖（條狀圖）、散點(diǎn)圖（氣泡圖）、K線圖、餅圖（環(huán)形圖）、雷達(dá)圖（填充雷達(dá)圖）、和弦圖、力導(dǎo)向布局圖、地圖、儀表盤(pán)、漏斗圖、事件河流圖等12類(lèi)圖表，同時(shí)提供標(biāo)題，詳情氣泡、圖例、值域、數(shù)據(jù)區(qū)域、時(shí)間軸、工具箱等7個(gè)可交互組件，支持多圖表、組件的聯(lián)動(dòng)和混搭展現(xiàn)。由eCharts生成的圖形為展示統(tǒng)計(jì)數(shù)據(jù)提供了完美解決方案。
3、JSON
JSON是一種輕量級(jí)的數(shù)據(jù)交換格式,采用完全獨(dú)立于語(yǔ)言的格式化文本。JSON格式文本易于人閱讀和編寫(xiě)，同時(shí)也易于機(jī)器解析和生成。Json的規(guī)格非常簡(jiǎn)單，只用一個(gè)頁(yè)面幾百個(gè)字就能說(shuō)清楚（參見(jiàn)JSON數(shù)據(jù)交換格式），這些特性使JSON成為理想的數(shù)據(jù)交換語(yǔ)言。JSON被作為用戶(hù)和eCharts間數(shù)據(jù)交換語(yǔ)言，用戶(hù)需求通過(guò)JSON命令描述圖形特征和數(shù)據(jù)，eCharts解析JSON指令后輸出圖形到瀏覽器。
1、網(wǎng)頁(yè)中使用eCharts繪圖
在網(wǎng)頁(yè)中設(shè)置圖形容器：
<div id="oChart" style="height:300px; width:80%;"></div>在JavaScript代碼中：
var myChart=echarts.init(document.getElementById("oChart"));
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var option={} // 指定圖表的配置項(xiàng)和數(shù)據(jù)
myChart.setOption(option); // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表網(wǎng)頁(yè)中使用eCharts案例【eChartS Code-01】：
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
</head><body>
<p>eCharts圖形示例</p>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart=echarts.init(document.getElementById('main'));
// 用JSON指定圖表的配置項(xiàng)和數(shù)據(jù)
var option={
title: {text: 'ECharts 入門(mén)示例'},
legend: {data:['銷(xiāo)量']},
xAxis: {data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]},
yAxis: {},
series: [{name: '銷(xiāo)量', type: 'bar', data: [5, 20, 36, 10, 10, 20]}]
};
// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
</script>
</body></html>顯示效果，
圖1：網(wǎng)頁(yè)中配置柱狀圖顯示效果
利用eCharts繪圖主要是用JSON設(shè)置option對(duì)象來(lái)定義統(tǒng)計(jì)圖形（主要是設(shè)置“數(shù)據(jù)”和“設(shè)置”兩項(xiàng)內(nèi)容）。Code-01中option對(duì)象代碼部分，
var option={
title: {text:數(shù)據(jù)較多時(shí)， 'ECharts 入門(mén)示例'},
legend: {data:['銷(xiāo)量']},
xAxis: {data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]},
yAxis: {},
series: [{name: '銷(xiāo)量', type: 'bar', data: [5, 20, 36, 10, 10, 20]}]
};注：option對(duì)象代碼完全按JSON語(yǔ)法格式配置，設(shè)置不同統(tǒng)計(jì)圖形只要在網(wǎng)頁(yè)中替換option對(duì)象代碼即可
Code-01中數(shù)據(jù)（data: [5, 20, 36, 10, 10, 20]）較少，被直接放在option的series數(shù)組中。data往往會(huì)分離定義，option主要是設(shè)置“數(shù)據(jù)”和“設(shè)置”兩項(xiàng)內(nèi)容正是此意。
下面是常用統(tǒng)計(jì)圖形參數(shù)配置案例。
1、散點(diǎn)圖
散點(diǎn)圖(scatter diagram)又稱(chēng)散點(diǎn)分布圖，是以一個(gè)變量為橫坐標(biāo)，另一變量為縱坐標(biāo)，利用散點(diǎn)（坐標(biāo)點(diǎn)）的分布形態(tài)反映變量統(tǒng)計(jì)關(guān)系的一種圖形。特點(diǎn)是能直觀表現(xiàn)出影響因素和預(yù)測(cè)對(duì)象之間的總體關(guān)系趨勢(shì)。優(yōu)點(diǎn)是能通過(guò)直觀醒目的圖形方式反映變量間關(guān)系的變化形態(tài)，以便決定用何種數(shù)學(xué)表達(dá)方式來(lái)模擬變量之間的關(guān)系。散點(diǎn)圖不僅可傳遞變量間關(guān)系類(lèi)型的信息，也能反映變量間關(guān)系的明確程度。
網(wǎng)頁(yè)中設(shè)置散點(diǎn)圖案例【eChartS Code-02】：
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
</head><body>
<p>eCharts圖形示例</p>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart=echarts.init(document.getElementById('main'));
//指定圖表的數(shù)據(jù)
var oFemaleData=[
[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0],
[155.8, 53.6], [170.0, 59.0], [159.1, 47.6], [166.0, 69.8],
[176.2, 66.8], [160.2, 75.2], [172.5, 55.2], [170.9, 54.2],
[172.9, 62.5], [153.4, 42.0], [160.0, 50.0], [147.2, 49.8],
[168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8]
];
var oMaleData=[
[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6],
[187.2, 78.8], [181.5, 74.8], [184.0, 86.4], [184.5, 78.4],
[175.0, 62.0], [184.0, 81.6], [180.0, 76.6], [177.8, 83.6],
[192.0, 90.0], [176.0, 74.6], [174.0, 71.0], [184.0, 79.6],
[192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9]
];
//指定圖表的配置項(xiàng)
var option={
title : {
text: '男性女性身高體重分布'
},
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 : {
dataView : {show: true, readOnly: false},
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: oFemaleData,
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'男性',
type:'scatter',
data: oMaleData,
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
}
]
}
// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
</script>
</body></html>顯示效果，
圖2：網(wǎng)頁(yè)中配置散點(diǎn)圖顯示效果
由于散點(diǎn)圖需要數(shù)據(jù)較多，數(shù)組oFemaleData和oMaleData數(shù)據(jù)被獨(dú)立定義，在option的series數(shù)組中引用這兩個(gè)變量即可。
對(duì)于初學(xué)者來(lái)說(shuō)，利用現(xiàn)有圖形模板將數(shù)據(jù)替換為自己的數(shù)據(jù)即可。為了節(jié)省篇幅，本文后面介紹的圖形只給出“數(shù)據(jù)”和“配置”項(xiàng)，讀者自己根據(jù)Code-01和Code-02替換“數(shù)據(jù)”和“配置”項(xiàng)即可。
2、折線圖
折線圖(Line Graph)是用直線段將各數(shù)據(jù)點(diǎn)連接起來(lái)而組成的圖形，以折線方式顯示數(shù)據(jù)的變化趨勢(shì)。折線圖可以顯示隨時(shí)間（根據(jù)常用比例設(shè)置）而變化的連續(xù)數(shù)據(jù)，因此非常適用于顯示在相等時(shí)間間隔下數(shù)據(jù)的趨勢(shì)。在折線圖中，類(lèi)別數(shù)據(jù)沿水平軸均勻分布，所有值數(shù)據(jù)沿垂直軸均勻分布。
【數(shù)據(jù)】
var oX=['周一','周二','周三','周四','周五','周六','周日'];//橫軸日期
var oY1=[11, 11, 12, 14, 12, 13, 10];//縱軸1
var oY2=[1, -2, 2, 5, 3, 2, 0];//縱軸2【配置】
var option={
title : {text: '未來(lái)一周氣溫變化'},
tooltip : {
trigger: 'axis'
},
legend: {data:['最高氣溫','最低氣溫']},
toolbox: {show : true,
feature : {
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : oX
}
],
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value} °C'
}
}
],
series : [
{
name:'最高氣溫',
type:'line',
data:oY1,
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'最低氣溫',
type:'line',
data:oY2,
markPoint : {
data : [
{name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
}
]
}【效果圖】
圖3：網(wǎng)頁(yè)中配置折線圖顯示效果
3、柱狀圖
柱狀圖(bar chart)，是一種以長(zhǎng)方形的長(zhǎng)度為變量的表達(dá)圖形的統(tǒng)計(jì)報(bào)告圖，由一系列高度不等的縱向條紋表示數(shù)據(jù)分布的情況，用來(lái)比較兩個(gè)或以上的價(jià)值（不同時(shí)間或者不同條件），只有一個(gè)變量，通常利用于較小的數(shù)據(jù)集分析。柱狀圖亦可橫向排列，或用多維方式表達(dá)。
【數(shù)據(jù)】
var oX=['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']//月份
var oY1=[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3];//蒸發(fā)量
var oY2=[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3];//降水量【配置】
var option={
title : {
text: '某地區(qū)蒸發(fā)量和降水量',
subtext: '純屬虛構(gòu)'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['蒸發(fā)量','降水量']
},
toolbox: {
show : true,
feature : {
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : oX
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'蒸發(fā)量',
type:'bar',
data:oY1,
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'降水量',
type:'bar',
data:oY2,
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
}
]
}【效果圖】
圖4：網(wǎng)頁(yè)中配置的柱狀圖顯示效果
4、餅圖 [返回]
餅圖(Pie Graph)顯示一個(gè)數(shù)據(jù)系列（數(shù)據(jù)系列：在圖表中繪制的相關(guān)數(shù)據(jù)點(diǎn)，這些數(shù)據(jù)源自數(shù)據(jù)表的行或列。圖表中的每個(gè)數(shù)據(jù)系列具有唯一的顏色或圖案并且在圖表的圖例中表示?？梢栽趫D表中繪制一個(gè)或多個(gè)數(shù)據(jù)系列。餅圖只有一個(gè)數(shù)據(jù)系列）中各項(xiàng)的大小與各項(xiàng)總和的比例。餅圖中的數(shù)據(jù)點(diǎn)（數(shù)據(jù)點(diǎn)：在圖表中繪制的單個(gè)值，這些值由條形、柱形、折線、餅圖或圓環(huán)圖的扇面、圓點(diǎn)和其他被稱(chēng)為數(shù)據(jù)標(biāo)記的圖形表示。相同顏色的數(shù)據(jù)標(biāo)記組成一個(gè)數(shù)據(jù)系列）顯示為整個(gè)餅圖的百分比。
【數(shù)據(jù)】
var oX=['直接訪問(wèn)','郵件營(yíng)銷(xiāo)','聯(lián)盟廣告','視頻廣告','搜索引擎'];//圖例
var oY=[//數(shù)據(jù)
{value:335, name:'直接訪問(wèn)'},
{value:310, name:'郵件營(yíng)銷(xiāo)'},
{value:234, name:'聯(lián)盟廣告'},
{value:135, name:'視頻廣告'},
{value:1548, name:'搜索引擎'}
];【配置】
var option={
title : {
text: '某站點(diǎn)用戶(hù)訪問(wèn)來(lái)源',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/> : {c} (igscwes%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:oX
},
toolbox: {show : true,
feature : {
dataView : {show: true, readOnly: false},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'訪問(wèn)來(lái)源',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data:oY
}
]
}【效果圖】
圖5：網(wǎng)頁(yè)中配置的餅圖顯示效果
上面介紹了運(yùn)用eCharts設(shè)置四類(lèi)常用統(tǒng)計(jì)圖形，這只是eCharts功能的冰山一角，eCharts能做的還有很多，例如“熱力圖”、“雷達(dá)圖”和“地圖”等。
【熱力圖效果圖】
圖6：網(wǎng)頁(yè)中配置的熱力圖顯示效果
【雷達(dá)圖效果圖】
圖7：網(wǎng)頁(yè)中配置的雷達(dá)圖顯示效果
【地圖效果圖】
圖8：網(wǎng)頁(yè)中配置的地圖顯示效果
更多配置參考【eChatrs官網(wǎng)】，讀者需要具備一定網(wǎng)頁(yè)編程知識(shí)。
【參考文獻(xiàn)】
前的文章一圖入門(mén)matplotlib 中我們學(xué)習(xí)了matplotlib中常見(jiàn)圖表元素的繪制方法，所有操作都通過(guò)可以調(diào)用plt的函數(shù)實(shí)現(xiàn)。本節(jié)繼續(xù)來(lái)學(xué)習(xí)使用matplotlib中生成各種常見(jiàn)的統(tǒng)計(jì)圖表。后臺(tái)回復(fù)“統(tǒng)計(jì)圖一”可以獲取本文全部代碼。
圖1
圖2
圖3
圖4
圖5
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
