python測試開發django-149.ECharts 生成柱狀圖

阿新 • • 發佈：2021-10-10

前言

ECharts 是一個使用 JavaScript 實現的開源視覺化庫，涵蓋各行業圖表，滿足各種需求。

ECharts下載與使用

可以在直接下載 echarts.min.js 並用 <script>標籤引入。下載地址https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js
開發環境下可以使用原始碼版本 echarts.js 並用 <script> 標籤引入，原始碼版本包含了常見的錯誤提示和警告。下載地址https://cdn.staticfile.org/echarts/4.7.0/echarts.js

使用線上 CDN 方法:
Staticfile CDN（國內） :

https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js

生成柱狀圖

統計測試報告情況，生成柱狀圖，先看只有一組資料的情況

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>生成柱狀圖</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <!-- 為ECharts準備一個具備大小（寬高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基於準備好的dom，初始化echarts例項
        var myChart = echarts.init(document.getElementById('main'));

        // 指定圖表的配置項和資料
        var option = {
            legend: {},
            tooltip: {},
            dataset: {
                // 提供一份資料。
                source: [
                    ['report', 'pass', 'failed', 'error'],
                    ['10/10', 20, 5, 1]
                ]
            },
            // 宣告一個 X 軸，類目軸（category）。預設情況下，類目軸對應到 dataset 第一列。
            xAxis: {type: 'category'},
            // 宣告一個 Y 軸，數值軸。
            yAxis: {},
            // 宣告多個 bar 系列，預設情況下，每個系列會自動對應到 dataset 的每一列。
            series: [
                {type: 'bar'},
                {type: 'bar'},
                {type: 'bar'}
            ]
        };

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

生成效果

當測試報告資料有多組的情況，統計最近 5 天的報告情況，dataset 圖示資料

     dataset: {
                // 提供一份資料。
                source: [
                    ['report', 'pass', 'failed', 'error'],
                    ['10/6', 20, 5, 1],
                    ['10/7', 23, 2, 1],
                    ['10/8', 25, 1, 0],
                    ['10/9', 18, 5, 3],
                    ['10/10', 26, 0, 0]
                ]
            }

完整的html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>生成柱狀圖</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <!-- 為ECharts準備一個具備大小（寬高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基於準備好的dom，初始化echarts例項
        var myChart = echarts.init(document.getElementById('main'));

        // 指定圖表的配置項和資料
        var option = {
            legend: {},
            tooltip: {},
            dataset: {
                // 提供一份資料。
                source: [
                    ['report', 'pass', 'failed', 'error'],
                    ['10/6', 20, 5, 1],
                    ['10/7', 23, 2, 1],
                    ['10/8', 25, 1, 0],
                    ['10/9', 18, 5, 3],
                    ['10/10', 26, 0, 0]
                ]
            },
            // 宣告一個 X 軸，類目軸（category）。預設情況下，類目軸對應到 dataset 第一列。
            xAxis: {type: 'category'},
            // 宣告一個 Y 軸，數值軸。
            yAxis: {},
            // 宣告多個 bar 系列，預設情況下，每個系列會自動對應到 dataset 的每一列。
            series: [
                {type: 'bar'},
                {type: 'bar'},
                {type: 'bar'}
            ]
        };

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

生成效果

圖示資料 dataset 也可以是鍵值對的形式

      dataset: {
                // 提供一份資料。
                source: [
                    {'report': '10/6', 'pass':20, 'failed':5, 'error':1},
                    {'report': '10/7', 'pass':23, 'failed':2, 'error':1},
                    {'report': '10/8', 'pass':25, 'failed':1, 'error':0},
                    {'report': '10/9', 'pass':18, 'failed':5, 'error':3},
                    {'report': '10/10', 'pass':26, 'failed':0, 'error':0},
                ]
            }

series.seriesLayoutBy 屬性

我們可以使用 series.seriesLayoutBy 屬性來配置 dataset 是列（column）還是行（row）對映為圖形系列（series），預設是按照列（column）來對映。

// 指定圖表的配置項和資料
        var option = {
            legend: {},
            tooltip: {},
            dataset: {
                // 提供一份資料。
                source: [
                    ['report', 'pass', 'failed', 'error'],
                    ['10/6', 20, 5, 1],
                    ['10/7', 23, 2, 1],
                    ['10/8', 25, 1, 0],
                    ['10/9', 18, 5, 3],
                    ['10/10', 26, 0, 0]
                ]
            },
            // 宣告一個 X 軸，類目軸（category）。預設情況下，類目軸對應到 dataset 第一列。
            xAxis: {type: 'category'},
            // 宣告一個 Y 軸，數值軸。
            yAxis: {},
            // 宣告多個 bar 系列，預設情況下，每個系列會自動對應到 dataset 的每一列。
            series: [
                {type: 'bar', seriesLayoutBy: 'row'},
                {type: 'bar', seriesLayoutBy: 'row'},
                {type: 'bar', seriesLayoutBy: 'row'}
            ]
        };

顯示效果

如果圖表資料 dataset 是鍵值對的形式，是不能按行顯示的。

自定義 yAxis

可以自定義Y軸顯示內容

// 宣告一個 Y 軸，數值軸。
            yAxis: [
                {
                    type: 'value',
                    name: '個數',
                    axisLabel: {
                        formatter: ' {value}'
                    }
                }
            ]

顯示效果

設定最小值最大值和間距

// 宣告一個 Y 軸，數值軸。
            yAxis: [
                {
                    type: 'value',
                    name: '個數',
                    min: 0,
                    max: 100,
                    interval: 10,
                    axisLabel: {
                        formatter: ' {value}'
                    }
                }
            ]

寫死最大值會有個弊端，當數量大於100的時候，就超出了圖表範圍了