<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>統計</title>
<!-- 引入 echarts.js -->
<!--要先加載echarts.js 之后再執行方法 不然會報錯-->
<style>
#main{/* 通過ID獲取將div設置居中樣式*/
position: absolute;
width: 600px;
height: 400px;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -200px;
}
body > div {/*獲取body下的第一個div*/
border: 1px solid red;
/*水平居中*/
/*width: 380px;
height: 300px;
margin: auto;*/
/*絕對定位position:absolute，使用left和top設置對象距離上和左為50%，但如果設置50%，
實際上盒子是沒有實現居中效果，所以又設置margin-left:-200px;margin-top: -100px;，
這里有個技巧是，margin-left的值是寬度一半，margin-top的值也是對象高度一半，
同時設置為負，這樣就實現了水平和垂直居中。*/
position: absolute;
width: 600px;
height: 400px;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -200px;
border: 1px solid #00F
}
body {
height: 100%;
width: 100%;
background-image: url(https://ss2.bdstatic.com/lfoZeXSm1A5BphGlnYG/skin/877.jpg?2);
/*background-repeat: no-repeat;*/ /*設置背景圖像是否及如何重復*/
/*background-position: center 0;*/ /*設置背景圖像的起始位置*/
/*background-attachment: fixed;*/ /*背景圖像是否固定或者隨着頁面的其余部分滾動。*/
background-size: cover; /* 指定背景圖片的大小 cover 時會保持圖像的縱橫比並將圖像縮放成將完全覆蓋背景定位區域的最小大小。*/
}
</style>
</head>
<body>
<script type="text/javascript"> //需要在body內
var url="https://cdn.staticfile.org/echarts/4.2.1-rc1/echarts-en.min.js";
var btn=document.createElement("script");//createElement() 方法通過指定名稱創建一個元素
btn.src=url;
document.body.appendChild(btn);//需要appendChild();appendChild() 方法可向節點的子節點列表的末尾添加新的子節點。
//添加一個div 和一些常用屬性
/*let div=document.createElement("div");
div.id='main';
div.style="width: 600px;height:400px;"
document.body.appendChild(div);*/
function myFunction(){
var myChart = echarts.init(document.getElementById('main'));
// 基於准備好的dom，初始化echarts實例
/*
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
title: {
text: '請假統計'
},
tooltip: {},
legend: {
data:['天數']
},
xAxis: {
data: ["小王","小紅","小黑","小趙","小周","小白"]
},
yAxis: {},
series: [{
name: '天數',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);*/
// 繪制圖表。
/*
myChart.setOption(
{ title:
{ text: '請假統計' },
tooltip: {},
legend: { data:['天數'] },
xAxis: {
data: ["小王","小紅","小黑","小趙","小周","小白"] },
yAxis: {},
series: [{
name: '天數',
type: 'bar',
data: [5, 20, 36, 10, 10, 20] }]
});
*/
myChart.setOption({
series : [
{
name: '請假統計',
type: 'pie',
radius: '55%',
data:[
{value:235, name:'小周'},
{value:274, name:'小王'},
{value:310, name:'小白'},
{value:335, name:'小紅'},
{value:400, name:'小黑'}
],yAxis: {},
}
]
})
}
</script>
<!-- 為ECharts准備一個具備大小（寬高）的Dom -->
<div id="main"></div>
<button onclick="myFunction()">點我</button>
</body>
</html>
