【WEB程式】以 Apache ECharts 繪製圖表

參考資料 ----

Apache ECharts 教程

 

 

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 轉出的陣列
                    },
                    {
                        name: '練習數',
                        type: 'line',
                        data: aExam
                    }]
        };

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

 



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

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

 


 

 相關筆記 ----

【WEB程式】以 Chartjs 繪製圖表 



沒有留言:

張貼留言