python測試開發django-147.ECharts 生成餅圖

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

前言

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

基礎餅圖

先生成一個最基礎的餅圖

<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">
        // 初始化 echarts 例項
        var myChart = echarts.init(document.getElementById('main'));

        myChart.setOption({
            series : [{
                    name: '測試報告',
                    type: 'pie',    // 設定圖表型別為餅圖
                    radius: '55%',  // 餅圖的半徑，外半徑為可視區尺寸（容器高寬中較小一項）的 55% 長度。
                    data:[          // 資料陣列，name 為資料項名稱，value 為資料項值
                        {name:'通過', value:20},
                        {name:'失敗', value:10},
                        {name:'故障', value:3},
                        {name:'跳過', value:2},
                        {name:'其它', value:0}
                    ]}
            ]
        })
    </script>
</body>

效果圖

這裡是 value 不需要是百分比資料，ECharts 會根據所有資料的 value ，按比例分配它們在餅圖中對應的弧度。

餅圖的半徑可以通過 series.radius 設定，可以是諸如 '55%' 這樣相對的百分比字串，或是 200 這樣的絕對畫素數值。當它是百分比字串時，它是相對於容器寬高中較小的一條邊的。也就是說，如果寬度大於高度，則百分比是相對於高度的，反之則反；當它是數值型時，它表示絕對的畫素大小。

series 引數說明：

name 餅圖的名稱，用於tooltip的顯示
type 型別，pie是餅圖，category是柱狀圖，line是折線圖
radius 餅圖的半徑，外半徑為可視區尺寸（容器高寬中較小一項）的設定百分比長度。

data 載入的資料組，name 為資料項名稱，value 為資料項值（不需要百分比，會自動計算）
roseType 可以通過設定引數 roseType: 'angle' 把餅圖顯示成南丁格爾圖
itemStyle 陰影配置
label 設定標籤顯示內容

顯示百分比

label引數說明：

position 標籤的位置。'outside'餅圖扇區外側，'inside'餅圖扇區內部。'center'在餅圖中心位置(圓環圖)
formatter 標籤內容格式器，支援字串模板和回撥函式兩種形式，字串模板與回撥函式返回的字串均支援用 \n 換行。

字串模板模板變數有：

{a}：系列名。
{b}：資料名。
{c}：資料值。
{d}：百分比。
{@xxx}：資料中名為 'xxx' 的維度的值，如 {@product} 表示名為 'product' 的維度的值。
{@[n]}：資料中維度 n 的值，如 {@[3]} 表示維度 3 的值，從 0 開始計數。

示例：formatter: '{b}: {d}'

<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">
        // 初始化 echarts 例項
        var myChart = echarts.init(document.getElementById('main'));

        myChart.setOption({
            series : [{
                    name: '測試報告',
                    type: 'pie',    // 設定圖表型別為餅圖
                    radius: '55%',  // 餅圖的半徑，外半徑為可視區尺寸（容器高寬中較小一項）的 55% 長度。
                    label: {
                        position: 'outside',
                        formatter: '{b}:{c} ({d}%)'
                    },
                    data:[          // 資料陣列，name 為資料項名稱，value 為資料項值
                        {name:'通過', value:20},
                        {name:'失敗', value:10},
                        {name:'故障', value:3},
                        {name:'跳過', value:2},
                        {name:'其它', value:0}
                    ]}
            ]
        })
    </script>
</body>

實現效果

調色盤

自定義餅圖顏色，成功是綠色，失敗是紅色，可以在series新增color屬性
color 屬性放到setOption下是全域性的生效，放到series下是區域性的生效

            series : [{
                    name: '測試報告',
                    type: 'pie',    // 設定圖表型別為餅圖
                    radius: '55%',  // 餅圖的半徑，外半徑為可視區尺寸（容器高寬中較小一項）的 55% 長度。
                    label: {
                        position: 'outside',
                        formatter: '{b}:{c} ({d}%)'
                    },
                    data:[          // 資料陣列，name 為資料項名稱，value 為資料項值
                        {name:'通過', value:20},
                        {name:'失敗', value:10},
                        {name:'故障', value:3},
                        {name:'跳過', value:2},
                        {name:'其它', value:0}
                        ],
                    // 此係列自己的調色盤
                    color: ['#00ff00','#d43f3a', '#ff0000', '#1b5fcc', '#7a7a7a']
            }]

實現效果

高亮樣式（emphasis）

在滑鼠懸浮到圖形元素上時，一般會出現高亮的樣式。預設情況下，高亮的樣式是根據普通樣式自動生成的。
如果要自定義高亮樣式可以通過 emphasis 屬性來定製：

series : [{
                    name: '測試報告',
                    type: 'pie',    // 設定圖表型別為餅圖
                    radius: '55%',  // 餅圖的半徑，外半徑為可視區尺寸（容器高寬中較小一項）的 55% 長度。
                    label: {
                        position: 'outside',
                        formatter: '{b}:{c} ({d}%)'
                    },
                    data:[          // 資料陣列，name 為資料項名稱，value 為資料項值
                        {name:'通過', value:20},
                        {name:'失敗', value:10},
                        {name:'故障', value:3},
                        {name:'跳過', value:2},
                        {name:'其它', value:0}
                        ],
                    // 此係列自己的調色盤
                    color: ['#00ff00','#d43f3a', '#ff0000', '#1b5fcc', '#7a7a7a'],
                     // 高亮樣式。
                    emphasis: {
                        itemStyle: {
                            // 高亮時點的顏色
                            color: 'blue'
                        },
                        label: {
                            show: true,
                            // 高亮時標籤的文字
                            formatter: '高亮時顯示 {b}:{c} ({d}%)'
                        }
                    }
            }]

顯示效果

title和tooltip

設定餅圖title 和tooltip

<body>
  <!-- 為ECharts準備一個具備大小（寬高）的Dom -->
  <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
        // 初始化 echarts 例項
        var myChart = echarts.init(document.getElementById('main'));

        myChart.setOption({
            title: {
                    text: '介面自動化測試',
                    subtext: 'test環境',
                    left: 'center'
                  },
            tooltip: {
                    trigger: 'item'
                  },
            legend: {
                    orient: 'vertical',
                    left: 'left'
                  },
            series : [{
                    name: '測試報告',
                    type: 'pie',    // 設定圖表型別為餅圖
                    radius: '55%',  // 餅圖的半徑，外半徑為可視區尺寸（容器高寬中較小一項）的 55% 長度。
                    label: {
                        position: 'outside',
                        formatter: '{b}:{c} ({d}%)'
                    },
                    data:[          // 資料陣列，name 為資料項名稱，value 為資料項值
                        {name:'通過', value:20},
                        {name:'失敗', value:10},
                        {name:'故障', value:3},
                        {name:'跳過', value:2},
                        {name:'其它', value:0}
                        ],
                    // 此係列自己的調色盤
                    color: ['#00ff00','#d43f3a', '#ff0000', '#1b5fcc', '#7a7a7a'],
                     // 高亮樣式。
                    emphasis: {
                        itemStyle: {
                            // 高亮時點的顏色
                            color: 'blue'
                        },
                        label: {
                            show: true,
                            // 高亮時標籤的文字
                            formatter: '高亮時顯示 {b}:{c} ({d}%)'
                        }
                    }
            }]
        })
    </script>
</body>

顯示效果