統計圖形（eCharts） - 網絡統計學（5）

計圖是根據統計數據，用幾何圖形、形象事物和地圖等繪制的各種圖形。統計圖形具有直觀、形象、生動、具體等特點，可以使復雜的統計數據簡單化、通俗化、形象化，使人一目了然，便于理解和比較。統計圖在統計資料整理與分析中占有重要地位，并得到廣泛應用。

一、統計圖形的種類和結構

大數據時代，數據可視化方法大大突破了傳統統計學中的幾類（散點圖、折線圖、餅圖、柱狀圖）圖形。數據可視化是連接用戶和數據的橋梁，是用戶展示數據處理成果的一種手段，有非常廣泛的應用和創建途徑。

1、統計圖形

統計圖形是利用點、線、面、體等繪制成幾何圖形，以表示各種數量間的關系及其變動情況的工具。常用的統計圖有條形統計圖、扇形（餅圖）統計圖、折線統計圖、散點圖等。在統計學中把利用統計圖形表現統計資料的方法叫做統計圖示法。

按圖形的數字性質分類，有實數圖、累積數圖、百分數圖、對數圖、指數圖等；其結構包括圖名、圖目(圖中的標題)、圖尺(坐標單位)、各種圖線(基線、輪廓線、指導線等)、圖注(圖例說明、資料來源)等。

2、eCharts

eCharts商業級數據圖表是一個純Javascript的開源圖表庫，最初由百度商業前端數據可視化團隊負責開發維護。可以流暢的運行在PC和移動設備上。

底層依賴輕量級的Canvas類庫ZRender，提供直觀，生動，可交互，可高度個性化定制的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫游等特性大大增強了用戶體驗，賦予了用戶對數據進行挖掘、整合的能力。支持折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環形圖）、雷達圖（填充雷達圖）、和弦圖、力導向布局圖、地圖、儀表盤、漏斗圖、事件河流圖等12類圖表，同時提供標題，詳情氣泡、圖例、值域、數據區域、時間軸、工具箱等7個可交互組件，支持多圖表、組件的聯動和混搭展現。由eCharts生成的圖形為展示統計數據提供了完美解決方案。

3、JSON

JSON是一種輕量級的數據交換格式,采用完全獨立于語言的格式化文本。JSON格式文本易于人閱讀和編寫，同時也易于機器解析和生成。Json的規格非常簡單，只用一個頁面幾百個字就能說清楚（參見JSON數據交換格式），這些特性使JSON成為理想的數據交換語言。JSON被作為用戶和eCharts間數據交換語言，用戶需求通過JSON命令描述圖形特征和數據，eCharts解析JSON指令后輸出圖形到瀏覽器。

二、eCharts網頁繪圖

1、網頁中使用eCharts繪圖

在網頁中設置圖形容器：

<div id="oChart" style="height:300px; width:80%;"></div>

在JavaScript代碼中：

var myChart=echarts.init(document.getElementById("oChart"));
// 基于準備好的dom，初始化echarts實例
var option={} // 指定圖表的配置項和數據
myChart.setOption(option); // 使用剛指定的配置項和數據顯示圖表

網頁中使用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">
        // 基于準備好的dom，初始化echarts實例
    var myChart=echarts.init(document.getElementById('main'));
         // 用JSON指定圖表的配置項和數據
        var option={
        title: {text: 'ECharts 入門示例'},
        legend: {data:['銷量']},
        xAxis: {data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]},
        yAxis: {},
        series: [{name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20]}]
    };
    // 使用剛指定的配置項和數據顯示圖表。
    myChart.setOption(option);
</script>
</body></html>

顯示效果，

圖1：網頁中配置柱狀圖顯示效果

利用eCharts繪圖主要是用JSON設置option對象來定義統計圖形（主要是設置“數據”和“設置”兩項內容）。Code-01中option對象代碼部分，

var option={
        title: {text:數據較多時， 'ECharts 入門示例'},
        legend: {data:['銷量']},
        xAxis: {data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]},
        yAxis: {},
        series: [{name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20]}]
    };

注：option對象代碼完全按JSON語法格式配置，設置不同統計圖形只要在網頁中替換option對象代碼即可

Code-01中數據（data: [5, 20, 36, 10, 10, 20]）較少，被直接放在option的series數組中。data往往會分離定義，option主要是設置“數據”和“設置”兩項內容正是此意。

下面是常用統計圖形參數配置案例。

三、eCharts常用統計圖形配置

1、散點圖

散點圖(scatter diagram)又稱散點分布圖，是以一個變量為橫坐標，另一變量為縱坐標，利用散點（坐標點）的分布形態反映變量統計關系的一種圖形。特點是能直觀表現出影響因素和預測對象之間的總體關系趨勢。優點是能通過直觀醒目的圖形方式反映變量間關系的變化形態，以便決定用何種數學表達方式來模擬變量之間的關系。散點圖不僅可傳遞變量間關系類型的信息，也能反映變量間關系的明確程度。

網頁中設置散點圖案例【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">
// 基于準備好的dom，初始化echarts實例
var myChart=echarts.init(document.getElementById('main'));

//指定圖表的數據
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]
    ];

//指定圖表的配置項
 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: '平均值'}
                ]
            }
        }
    ]
  }

// 使用剛指定的配置項和數據顯示圖表。
    myChart.setOption(option);
</script>
</body></html>

顯示效果，

圖2：網頁中配置散點圖顯示效果

由于散點圖需要數據較多，數組oFemaleData和oMaleData數據被獨立定義，在option的series數組中引用這兩個變量即可。

對于初學者來說，利用現有圖形模板將數據替換為自己的數據即可。為了節省篇幅，本文后面介紹的圖形只給出“數據”和“配置”項，讀者自己根據Code-01和Code-02替換“數據”和“配置”項即可。

2、折線圖

折線圖(Line Graph)是用直線段將各數據點連接起來而組成的圖形，以折線方式顯示數據的變化趨勢。折線圖可以顯示隨時間（根據常用比例設置）而變化的連續數據，因此非常適用于顯示在相等時間間隔下數據的趨勢。在折線圖中，類別數據沿水平軸均勻分布，所有值數據沿垂直軸均勻分布。

【數據】

    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: '未來一周氣溫變化'},
    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：網頁中配置折線圖顯示效果

3、柱狀圖

柱狀圖(bar chart)，是一種以長方形的長度為變量的表達圖形的統計報告圖，由一系列高度不等的縱向條紋表示數據分布的情況，用來比較兩個或以上的價值（不同時間或者不同條件），只有一個變量，通常利用于較小的數據集分析。柱狀圖亦可橫向排列，或用多維方式表達。

【數據】

    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];//蒸發量
    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: '某地區蒸發量和降水量',
        subtext: '純屬虛構'
    },
    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',
            data : oX
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'蒸發量',
            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：網頁中配置的柱狀圖顯示效果

4、餅圖 [返回]

餅圖(Pie Graph)顯示一個數據系列（數據系列：在圖表中繪制的相關數據點，這些數據源自數據表的行或列。圖表中的每個數據系列具有唯一的顏色或圖案并且在圖表的圖例中表示。可以在圖表中繪制一個或多個數據系列。餅圖只有一個數據系列）中各項的大小與各項總和的比例。餅圖中的數據點（數據點：在圖表中繪制的單個值，這些值由條形、柱形、折線、餅圖或圓環圖的扇面、圓點和其他被稱為數據標記的圖形表示。相同顏色的數據標記組成一個數據系列）顯示為整個餅圖的百分比。

【數據】

    var oX=['直接訪問','郵件營銷','聯盟廣告','視頻廣告','搜索引擎'];//圖例
    var oY=[//數據
         {value:335, name:'直接訪問'},
         {value:310, name:'郵件營銷'},
         {value:234, name:'聯盟廣告'},
         {value:135, name:'視頻廣告'},
         {value:1548, name:'搜索引擎'}
         ];

【配置】

    var option={
    title : {
        text: '某站點用戶訪問來源',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} (a0ieeck%)"
    },
    legend: {
        orient : 'vertical',
        x : 'left',
        data:oX
    },
    toolbox: {show : true,
        feature : {
            dataView : {show: true, readOnly: false},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : [
        {
            name:'訪問來源',
            type:'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:oY
        }
    ]
}

【效果圖】

圖5：網頁中配置的餅圖顯示效果

上面介紹了運用eCharts設置四類常用統計圖形，這只是eCharts功能的冰山一角，eCharts能做的還有很多，例如“熱力圖”、“雷達圖”和“地圖”等。

【熱力圖效果圖】

圖6：網頁中配置的熱力圖顯示效果

【雷達圖效果圖】

圖7：網頁中配置的雷達圖顯示效果

【地圖效果圖】

圖8：網頁中配置的地圖顯示效果

更多配置參考【eChatrs官網】，讀者需要具備一定網頁編程知識。

【參考文獻】

1、JavaScript和HTML文檔 - 網絡統計學編程
2、統計數據類型和結構 - 網絡統計學（2）

前的文章一圖入門matplotlib 中我們學習了matplotlib中常見圖表元素的繪制方法，所有操作都通過可以調用plt的函數實現。本節繼續來學習使用matplotlib中生成各種常見的統計圖表。后臺回復“統計圖一”可以獲取本文全部代碼。

家好，今天給大家介紹一款，vue實現的漏斗圖統計圖表，帶動畫效果html頁面前端源碼（圖1）。送給大家哦，獲取方式在本文末尾。

圖1

可以單色顯示（圖2）

圖2

可以水平、垂直切換（圖3）

圖3

可動態改變各色塊顏色（圖4）

圖4

源碼完整，需要的朋友可以下載學習（圖5）

圖5

本源碼編碼：10211，需要的朋友，訪問下面鏈接后，搜索10211，即可獲取。

「鏈接」

在線咨詢

上一篇：一個字符串判斷是否是真實手機號編程語言：JavaSc
下一篇：你還記得之前二次元老婆么？喜新厭舊的男人最討厭了

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

統計圖形（eCharts） - 網絡統計學（5）

一、統計圖形的種類和結構

二、eCharts網頁繪圖

三、eCharts常用統計圖形配置

家好，今天給大家介紹一款，vue實現的漏斗圖統計圖表，帶動畫效果html頁面前端源碼（圖1）。送給大家哦，獲取方式在本文末尾。

可以單色顯示（圖2）

可以水平、垂直切換（圖3）

可動態改變各色塊顏色（圖4）

源碼完整，需要的朋友可以下載學習（圖5）

本源碼編碼：10211，需要的朋友，訪問下面鏈接后，搜索10211，即可獲取。

「鏈接」

您的項目需求