echarts.js是百度推出的組件,可以十分便捷的繪製圖像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="js/echarts.min.js"></script>
<div id="main" style="width: 600px;height: 600px">
</div>
<script>
var main=document.getElementById("main")
var myChart=echarts.init(main);
var option={
//設置標題
title:{text:"demo02"},
//設置畫板顯示的圖像的
//圖例組件，通過點擊圖例控制系列的顯示
legend:{data:["系列一","系列二"]},
xAxisIndex:{data:["x1","x2","x3","x4"]},
yAxisIndex:{},
series:[{
//設置系列的名稱
name:"系列一",
type:"pie",//餅圖
//設置圖像所佔畫板的比例
radius:"80%",
//設置圖像是否展示爲南丁格爾圖（通過半徑區分數據大小）
roseType:"angle",
data:[
{value:100,name:"p1"},
{value:200,name:"p2"},
{value:300,name:"p3"},
{value:400,name:"p4"}
]
},
{
name:"系列二",
//餅圖
type:"pie",
//設置圖像所佔畫板的比例
radius:"80%",
roseType:"angle",
data:[
{value:100,name:"p1"},
{value:200,name:"p2"},
{value:300,name:"p3"},
{value:100,name:"p4"}
]
}]
};
myChart.setOption(option)
</script>
</body>
</html>
