EChars學習(繪製餅狀圖,南丁格爾圖)
阿新 • • 發佈:2019-01-02
心靈一語:
對於世界而言,你是一個人;但是對於某個人,你是他的整個世界
--《飄》
簡單直接上程式碼,一切盡在程式碼中<( ̄ˇ ̄)/
這是一個HTML文件
<!DOCTYPE html>
<!--輸出南丁格爾圖的程式碼-->
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 為ECharts準備一個具備大小(寬高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基於準備好的dom,初始化echarts例項
var myChart = echarts.init(document.getElementById('main' ));
// 指定圖表的配置項和資料
var option = {
<!--設定背景顏色-->
backgroundColor: '#2c343c',//注意用逗號結尾
series : [
{
name: '訪問來源',
type: 'pie', //設定輸出的影象型別
radius: '70%', //設定輸出半徑
roseType: 'angle',//將輸出形式設定為南丁格爾圖,沒有這句將輸出餅狀圖
//資料
data:[
{value:400, name:'搜尋引擎'},
{value:335, name:'直接訪問'},
{value:310, name:'郵件營銷'},
{value:274, name:'聯盟廣告'},
{value:235, name:'視訊廣告'}
],
//設定標籤屬性
label: {
normal: {
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
//設定標籤線的樣式
labelLine: {
normal: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
//設定陰影
itemStyle: {
normal: {
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用剛指定的配置項和資料顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>