2022-12-17

【WEB程式】Apache ECharts -- 圓餅圖(Pie Chart)

參考資料 ----

Apache ECharts 教程


再來試試 圓餅圖

 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Pie Chart</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script>
    <!-- 引入 vitage 樣式 js -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/theme/vintage.js"></script>
</head>
<body>
    <!-- 為 ECharts 準備一個具備大小(寬高)的 DOM -->
    <div id="main" style="width:600px; height:400px;"></div>
    
    <script type="text/javascript">
        <?php
            $aExam = [  ['name' => '初等考試', 'value' => 7],
                        ['name' => '大學指考', 'value' => 15],
                        ['name' => '高考護理師', 'value' => 26],
                        ['name' => '國中會考', 'value' => 1],
                        ['name' => '機車駕照', 'value' => 17],
                        ['name' => '汽車駕照', 'value' => 32]
                    ];

            // 如果是從資料庫撈出來的, 做法如下:
            // $aExam = array();
            // ...
            // ...
            // foreach($rs => $row)
            //    array_push($aExam, ['name' => $row['考試科目'], 'value' => $row['下載次數']]);


            echo 'var aExam = '.json_encode($aExam,JSON_NUMERIC_CHECK).";\n";    // 將 PHP 陣列轉出成 javascript 陣列
                                                                                   // 要注意 json_encode() 的第 2 個參數
                                                                                   // 若沒有第 2 個參數, json_encode 預設會轉出成 字串 陣列, 每個數字會以雙引號包住
                                                                                   // 這樣會造成圖表的顯示出現無法預期的結果,ex: 線亂畫、座標點錯誤...
        ?>
        // 基於準備好的 DOM,初始化 echarts 實體
        var myChart = echarts.init(document.getElementById('main'), 'vintage');    // 第 2 個參數 是 樣式 選項: 預設, light(內建), dark(內建), vintage, macarons, infographic, shine, roma
                                                                                   // 如果沒有 "樣式" 參數,就是預設樣式
                                                                                   // light樣式 與 預設樣式 的差異在 light 的顏色比預設更淡
                                                                                   // 若要採用不同樣式, 除了內建的 light/dark,其他樣式則上面也要引入相應的 js
 
        // 指定圖表的配置項和數據
        var option = {
                        title: {
                                text: '考試下載比例',
                                left: 'center'
                            },
                        tooltip: {
                                    trigger: 'item'
                                },
                        legend: {
                                    orient: 'vertical',
                                    left: 'left'
                                },
                        series: [{
                                    name: '考試科目',
                                    type: 'pie',
                                    data: aExam,
                                },
                                ],
                    };
 
        // 使用剛才指定的配置項和數據顯示圖表。
        myChart.setOption(option);
    </script>
</body>
</html>

 



滑鼠移至某個考試科目時,就會顯示該科考試的下載數,這是參數 tooltip 的效果。
點擊左上角(legend 區域) 的考試科目,該科考試的色塊就會隱藏,再點擊一次會再出現。


相關筆記 ----


沒有留言:

張貼留言