參考資料 ----
再來試試 圓餅圖
- <!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>
點擊左上角(legend 區域) 的考試科目,該科考試的色塊就會隱藏,再點擊一次會再出現。
沒有留言:
張貼留言