最近因爲項目需要用到圖形,所以在網上搜了一下,發現echarts很實用,我們做網站/應用的時候,很多需要數據統計報表,接下來就分享一下我的第一個echarts
首先你需要下載開發包,建議去官網http://echarts.baidu.com/下載,選擇需要的版本,開發環境建議選擇源代碼版本,該版本包含了常見的警告和錯誤提示。
1、下載ECharts源碼,我這裏下載的是2.2.7版本的,如果不知道哪下載,百度一下ECharts,然後就能看到官網了。
2、下載後,可以看到build文件夾,如果不是爲了調測,可以直接使用dist文件夾下的。echarts.js和echarts-all.js區別在於後者已經把map.js打包進去了。如果網站上不用map,應該使用echarts.js,這樣因爲文件小能減少加載時間。
3、把build下的文件拷貝到你想要放的工程目錄中,我拷貝進來後把dist改成了echarts
html代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="./echarts/echarts-all.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
title : {
text : 'ECharts 入門示例'
},
tooltip : {},
legend : {
data : [ '銷量' ]
},
xAxis : {
data : [ "襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子" ]
},
yAxis : {},
series : [ {
name : '銷量',
type : 'bar',
data : [ 5, 20, 36, 10, 10, 20 ]
} ]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
效果圖如下:
第一個echarts就完成啦。