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