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



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


相關筆記 ----


沒有留言:

張貼留言