2022-12-17

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

參考資料 ----

Apache ECharts 教程


再來試試　圓餅圖

  1.  
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>Pie Chart</title>
  7.     <!-- 引入 echarts.js -->
  8.     <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script>
  9.     <!-- 引入 vitage 樣式 js -->
  10.     <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/theme/vintage.js"></script>
  11. </head>
  12. <body>
  13.     <!-- 為 ECharts 準備一個具備大小（寬高）的 DOM -->
  14.     <div id="main" style="width:600px; height:400px;"></div>
  15.     
  16.     <script type="text/javascript">
  17.         <?php
  18.             $aExam = [  ['name' => '初等考試', 'value' => 7],
  19.                         ['name' => '大學指考', 'value' => 15],
  20.                         ['name' => '高考護理師', 'value' => 26],
  21.                         ['name' => '國中會考', 'value' => 1],
  22.                         ['name' => '機車駕照', 'value' => 17],
  23.                         ['name' => '汽車駕照', 'value' => 32]
  24.                     ];
  25.  
  26.             // 如果是從資料庫撈出來的, 做法如下：
  27.             // $aExam = array();
  28.             // ...
  29.             // ...
  30.             // foreach($rs => $row)
  31.             //    array_push($aExam, ['name' => $row['考試科目'], 'value' => $row['下載次數']]);
  32.  
  33.  
  34.             echo 'var aExam = '.json_encode($aExam,JSON_NUMERIC_CHECK).";\n";    // 將 PHP 陣列轉出成 javascript 陣列
  35.                                                                                    // 要注意 json_encode() 的第 2 個參數
  36.                                                                                    // 若沒有第 2 個參數, json_encode 預設會轉出成 字串 陣列, 每個數字會以雙引號包住
  37.                                                                                    // 這樣會造成圖表的顯示出現無法預期的結果，ex: 線亂畫、座標點錯誤...
  38.         ?>
  39.         // 基於準備好的 DOM，初始化 echarts 實體
  40.         var myChart = echarts.init(document.getElementById('main'), 'vintage');    // 第 2 個參數 是 樣式 選項： 預設, light(內建), dark(內建), vintage, macarons, infographic, shine, roma
  41.                                                                                    // 如果沒有 "樣式" 參數，就是預設樣式
  42.                                                                                    // light樣式 與 預設樣式 的差異在 light 的顏色比預設更淡
  43.                                                                                    // 若要採用不同樣式, 除了內建的 light/dark，其他樣式則上面也要引入相應的 js
  44.  
  45.         // 指定圖表的配置項和數據
  46.         var option = {
  47.                         title: {
  48.                                 text: '考試下載比例',
  49.                                 left: 'center'
  50.                             },
  51.                         tooltip: {
  52.                                     trigger: 'item'
  53.                                 },
  54.                         legend: {
  55.                                     orient: 'vertical',
  56.                                     left: 'left'
  57.                                 },
  58.                         series: [{
  59.                                     name: '考試科目',
  60.                                     type: 'pie',
  61.                                     data: aExam,
  62.                                 },
  63.                                 ],
  64.                     };
  65.  
  66.         // 使用剛才指定的配置項和數據顯示圖表。
  67.         myChart.setOption(option);
  68.     </script>
  69. </body>
  70. </html>
  71.  
  72.  



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


相關筆記 ----


Labels: , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)