效果如圖:

代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一個 ECharts 實體</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 為ECharts準備一個具備大小(寬高)的Dom -->
<div id="main" style="width: 800px;height:600px;"></div>
<script type="text/javascript">
// 基于準備好的dom,初始化echarts實體
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
series : [
{
name: '訪問來源',
type: 'pie', // 設定圖表型別為餅圖
radius: '55%', // 餅圖的半徑,外半徑為可視區尺寸(容器高寬中較小一項)的 55% 長度,
data:[ // 資料陣列,name 為資料項名稱,value 為資料項值
{value:235, name:'武漢市'},
{value:274, name:'襄陽市'},
{value:310, name:'咸寧市'},
{value:335, name:'仙桃市'},
{value:400, name:'荊州市'}
]
}
]
})
</script>
</body>
</html>
轉載請註明出處,本文鏈接:https://www.uj5u.com/qita/197227.html
標籤:其他
下一篇:事件流
