echarts 基本使用
來源：程序員人生 發布時間：2014-09-10 03:25:24 閱讀次數：3464次
最近項目中要做圖形報表，要求使用echarts實現，圖形報表有很多中實現之前也接觸過，但echarts還是頭一次聽說，正好可以趁這個機會好好學習一下它。
之前不知道就不知道啦，現在知道了就了不得了，一下子喜歡上了echarts，今后項目中要是讓做報表我肯定首選echarts在沒有強制要求的前提下。主要是echarts太完美了：1，開源軟件，無私的為我們提供漂亮的圖形界面；2，使用簡單，默默的為我們封裝了重要的js，只要會引用就會使用echarts；3，種類多，echarts為我們提供了各種圖標，其中最具象征的就是地圖了；4，兼容性好，基于html5動畫渲染超棒。
echarts官網 提供了源碼和說明文檔，使用echarts需要先到官網下載需要的js源文件。
官網上的demo中夾雜著很多我們用不到的東西，想使用餅狀圖就得從demo中把不用的去掉，劈植斬葉留下最原始的功能實現。這樣畢竟比較費時，我就在裁剪后的代碼中加以總結于是乎新的使用教程如下所示：
echarts餅狀圖實現步驟：
1，在簡單的html中引入js文件
<head>
<meta charset="utf-8">
<title>Charts demo</title>
<script src="js/esl.js"></script>
</head>
<body>
</body>
2，為圖形準備容器
<head>
<meta charset="utf-8">
<title>Charts demo</title>
<script src="js/esl.js"></script>
</head>
<body>
<div id="picturePlace"></div>
</body>
就是在html中添加一個div給定id，圖表就會顯示在div中。
3，模塊導入js
<head>
<meta charset="utf-8">
<title>Charts demo</title>
<script src="js/esl.js"></script>
</head>
<body>
<div id="picturePlace"></div>
<script type="text/javascript">
// 路徑配置
require.config({
paths:{
'echarts' : 'js/echarts',
'echarts/chart/pie' : 'js/echarts'
}
});
</script>
</body>
4，添加顯示數據
<head>
<meta charset="utf-8">
<title>Charts demo</title>
<script src="js/esl.js"></script>
</head>
<body>
<div id="picturePlace"></div>
<script type="text/javascript">
// 路徑配置
require.config({
paths:{
'echarts' : 'js/echarts',
'echarts/chart/pie' : 'js/echarts'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/pie' // 使用柱狀圖就加載bar模塊，按需加載
],
function (ec) {
// 基于準備好的dom，初始化echarts圖表
var myChart = ec.init(document.getElementById('<span style="font-family:SimSun;">picturePlace</span><span style="font-family:FangSong_GB2312;">'</span>));
option = {
title : {
text: '某站點用戶訪問來源',
subtext: '純屬虛構',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} (mwsqua40mo%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:['直接訪問','郵件營銷','聯盟廣告','視頻廣告','搜索引擎']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'訪問來源',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接訪問'},
{value:310, name:'郵件營銷'},
{value:234, name:'聯盟廣告'},
{value:135, name:'視頻廣告'},
{value:1548, name:'搜索引擎'}
]
}
]
};
// 為echarts對象加載數據
myChart.setOption(option);
}
);
</script>
</body>
5，運行程序顯示結果
以上是餅狀圖的實現步驟，柱狀圖散點圖跟這個類似就是引用js時餅狀圖是pie，柱狀圖是bar，對應的option里面的數據不同，程序的架子是一樣的。。
點擊下載源碼：
地址1，地址2
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
