80 lines
1.8 KiB
HTML
80 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>ECharts 圓餅圖 - 完整範例</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
/* 設定圖表容器，讓它能隨視窗大小縮放 */
|
|
#main {
|
|
width: 100%;
|
|
height: 100vh; /* 讓圖表高度等於視窗高度 */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="main"></div>
|
|
|
|
<script type="text/javascript">
|
|
// 取得 HTML 容器 DOM
|
|
var chartDom = document.getElementById('main');
|
|
// 初始化 ECharts 實例
|
|
var myChart = echarts.init(chartDom);
|
|
var option;
|
|
|
|
// 設定圓餅圖的 option
|
|
option = {
|
|
title: {
|
|
text: '這是一個圓餅圖',
|
|
subtext: '簡單範例',
|
|
left: 'center'
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left',
|
|
},
|
|
series: [
|
|
{
|
|
name: '資料類別',
|
|
type: 'pie',
|
|
radius: '50%',
|
|
data: [
|
|
{value: 1048, name: 'Google'},
|
|
{value: 735, name: 'Apple'},
|
|
{value: 580, name: 'Microsoft'},
|
|
{value: 484, name: 'Amazon'},
|
|
{value: 300, name: 'Facebook'}
|
|
],
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
// 使用 option 顯示圖表
|
|
myChart.setOption(option);
|
|
|
|
// 加上 RWD 監聽事件
|
|
// 當瀏覽器視窗大小改變時，重新繪製圖表
|
|
window.addEventListener('resize', function() {
|
|
myChart.resize();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|