老灰鴨的筆記本: 【WEB程式】以 Apache ECharts 繪製圖表 -- 折線圖(Line Chart)

參考資料 ----

Apache Echarts 原本由百度開發並開放源碼，之後百度貢獻給 Apache，成為 Apache 的專案項目之一，所以有詳盡豐富的中文參考文檔(雖然是簡體中文)。

這個真的要狂推！不僅免費，功能強大，又容易上手，而且有中文文檔。

要使用 ECharts 有多種方法，老人家選擇 "通过 jsDelivr 等 CDN 引入的方式"，除了 jsDelivr 外，還有 Staticfile；直接由 CDN 引入好像成了目前的趨勢，ZingChart 現在也採用這種方式。

最簡單的範例

 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</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
            $aDlday = [5, 20, 36, 10, 10, 20];
            $aExam = ["1"=>7, "2"=>15, "3"=>26, "4"=>1, "5"=>17, "6"=>32];
            echo 'var aDlday = '.json_encode($aDlday,JSON_NUMERIC_CHECK).";\n";    // 將 PHP 陣列轉出成 javascript 陣列
                                                                                   // 要注意 json_encode() 的第 2 個參數
                                                                                   // 若沒有第 2 個參數, json_encode 預設會轉出成 字串 陣列, 每個數字會以雙引號包住
                                                                                   // 這樣會造成圖表的顯示出現無法預期的結果，ex: 線亂畫、座標點錯誤...
            // 當陣列有索引時，要先轉成無索引陣列
            $arr = array_values($aExam);
            echo 'var aExam = '.json_encode($arr,JSON_NUMERIC_CHECK).";\n";
        ?>
        // 基於準備好的 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: 'ECharts 入門範例'    // 圖表標題
            },
            tooltip: {},
            legend: {   // 圖例(即折線, 直條, ...)說明
                        // 預設位置在圖表上方, 可在上 top, 左 left, 右 right
                        // 例如 left:30
                        // type: 'scroll',    // 當要畫的圖例很多項時, 可以捲動方式顯示
                        data:['下載數','練習數']    // 注意這裡的陣列元素就是下方 series 的 name 屬性
            },
            xAxis: {
                boundaryGap:false,    // 預設值 true，名稱會顯示在 x 軸兩個座標點中間
                                      // 值為 false 時，則名稱顯示在 x 軸座標點
                data: ["初等考試","大學指考","高考護理師","國中會考","機車駕照","汽車駕照"]
            },
            yAxis: {},    // y 軸座標, 預設是數值, 會自動隨 series 的數值改變
                          // 例如：本例 series 最大值 36, 則 y 軸座標點自動顯示為 10, 20, 30, 40
            series: [{
                        name: '下載數',
                        type: 'line',    // 圖表種類為 長條圖
                                        // 另有 line(折線圖), radar(雷達圖), pie(圓餅圖), tree(樹狀圖), gauge(儀表板),
                                        // k(K線圖), scatter(散點圖), ...
                                        // 可參考示例 https://echarts.apache.org/examples/zh/index.html#chart-type-scatter
                        data: aDlday,    // 這是由 PHP 轉出的陣列
                        symbol: 'emptyCircle', // 折點的樣式, 預設為 'emptyCircle', 其他值有 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
                    },
                    {
                        name: '練習數',
                        type: 'line',
                        data: aExam
                    }],
            tooltip: { // 是否顯示折點的數值, 預設為 none
                       // item: 滑鼠移至該折點時, 只顯示該折點的值
                       // axis: 會顯示一條通過滑鼠的垂直(虛)線, 及在垂直線上所有折點的值
                        trigger: 'axis'   // item, axis, none
                    },
        };

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

Echarts 會自動幫您為每條線配色，您也可以自己指定顏色。

點擊 legend 的某一項目，代表該項目的線就會隱藏，再點一次，就又出現，這在很多線條時很好用，可以將部份線隱藏，觀察您關心的某幾條線。

試著將陣列 aExam 的值放大 100 倍，這時 aDlday 的折線會因為數值太低而趜近水平線。

我們可以顯示雙 Y 軸，左邊的 Y 軸顯示下載數，右邊的 Y 軸顯示練習數。

 
            ...
            ...
            
            $aDlday = [5, 20, 36, 10, 10, 20];
            $aExam = ["1"=>700, "2"=>1500, "3"=>2600, "4"=>100, "5"=>1700, "6"=>3200];
            
            ...
            ...
            
            yAxis: [
                {   // 左右兩邊都有座標軸
                    name: '下載數',
                    type: 'value'
                },
                {
                    name: '練習數',
                    type: 'value',
                    // inverse: true    // 數字小的在上
                }
            ], 
            series: [{
                        name: '下載數',
                        type: 'line',
                        data: aDlday,
                        yAxisIndex:0,    // 加入這列參數
                        symbol: 'emptyCircle'
                    },
                    {
                        name: '練習數',
                        type: 'line',
                        yAxisIndex:1,    // 加入這列參數
                        data: aExam
                    }],