ECharts，一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，
兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），
底層依賴輕量級的矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定制的數據可視化圖表。
guanwang:http://echarts.baidu.com/index.html
使用起來也十分方便，只需引用js文件
<script type="text/javascript" src="js/echarts.common.min.js" ></script>
首先創建一個內容區：
<div id="chartmain" style="width:600px; height: 400px;"></div>
在script內配置參數，這里拿柱狀圖實例：
<script type="text/javascript"> //指定圖標的配置和數據 var option = { title:{ text:'ECharts 數據統計' }, tooltip:{}, legend:{ data:['用戶來源'] }, xAxis:{ data:["伊芙麗","Only","樂町","秋水伊人","OECE"] }, yAxis:{ }, series:[{ name:'訪問量', // type:圖形形狀----bar:柱狀,line:折線 type:'bar', data:[500,200,360,200,280] }] }; //初始化echarts實例 var myChart = echarts.init(document.getElementById('chartmain')); //使用制定的配置項和數據顯示圖表 myChart.setOption(option); </script>
餅狀圖：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>echarts餅狀圖</title>
<script type="text/javascript" src="js/echarts.common.min.js" ></script>
</head>
<body>
<div id="chartmain" style="width:600px; height: 400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('chartmain'));
//使用制定的配置項和數據顯示圖表
myChart.setOption({
series : [{
name: '訪問來源',
type: 'pie',
roseType: 'angle',
// roseType: 'angle'------表示有層次感
radius: '55%',
data:[
{value:235, name:'視頻廣告'},
{value:274, name:'聯盟廣告'},
{value:310, name:'郵件營銷'},
{value:335, name:'直接訪問'},//設置某個扇形顏色
{value:400,name:'搜索引擎',itemStyle: {color: 'pink'}}
]
}
],
itemStyle: {
// 陰影的大小
shadowBlur: 200,
// 陰影水平方向上的偏移
shadowOffsetX: 0,
// 陰影垂直方向上的偏移
shadowOffsetY: 0,
// 陰影顏色
shadowColor: 'rgba(0, 0, 0, 0.5)',
//圖形顏色
//color: '#c23531',
}
});
</script>
</body>
</html>
