echarts2簡單例項+ $.extend()方法解析
ECharts，縮寫來自Enterprise Charts，商業級資料圖表，一個純Javascript的圖表庫，可以流暢的執行在PC和移動裝置上，相容當前絕大部分瀏覽器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底層依賴輕量級的Canvas類庫ZRender，提供直觀，生動，可互動，可高度個性化定製的資料視覺化圖表。創新的拖拽重計算、資料檢視、值域漫遊等特性大大增強了使用者體驗，賦予了使用者對資料進行挖掘、整合的能力。
支援折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環形圖）、雷達圖（填充雷達圖）、和絃圖、力導向佈局圖、地圖、儀表盤、漏斗圖、事件河流圖等12類圖表，同時提供標題，詳情氣泡、圖例、值域、資料區域、時間軸、工具箱等7個可互動元件，支援多圖表、元件的聯動和混搭展現。
1.模組化單檔案引入
<body> <!-- 為ECharts準備一個具備大小（寬高）的Dom --> <div id="main" style="height:400px"></div> <!-- ECharts單檔案引入 --> <script type="text/javascript" src="${ctxStatic}/js/echarts/echarts.js" charset="utf-8"></script> <script type="text/javascript"> // 路徑配置 require.config({ paths: { echarts: '${ctxStatic}/js/echarts' } }); // 使用 require( [ 'echarts', 'echarts/chart/pie' // 使用餅狀圖就載入pie模組，按需載入 ], function (ec) { // 基於準備好的dom，初始化echarts圖表 var myChart = ec.init(document.getElementById('main')); option = { title : { text: '信訪統計', subtext: '按信訪類別', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, series : [ { name:'信訪類別', selectedMode: 'single', type:'pie', radius : '75%', center: ['50%', '60%'], data:[ {value:33, name:'求決'}, {value:16, name:'檢舉'}, {value:3, name:'建議'}, {value:0, name:'諮詢'}, {value:1, name:'其他'} ] } ] }; } ); </script> </body>
官方推薦使用此方法，因為可以按需載入js，但是發現option變數變成了區域性，非動態載入。所以選擇第二種標籤載入
2.標籤式單檔案引入
<script type="text/javascript" src="${ctxStatic}/js/echarts/echarts-all.js" charset="utf-8"></script><div id="main" style="height:400px"></div>datagrid非同步載入form資料的時候順便也載入圖形資料，當然你可以用在使用其他非同步載入資料的方法:如$.ajax 在onLoadSuccess、complete方法載入資料
function classDatagrid(){
$class_datagrid = $('#class_datagrid').datagrid({
url: ctx + '/petition/petition-info/class-datagrid',
fit:true,
pagination: false,//底部分頁
rownumbers: true,//顯示行數
fitColumns: false,//自適應列寬
striped: true,//顯示條紋
// pageSize: 20,//每頁記錄數
singleSelect: true, //只能選中一行
remoteSort:false,//是否通過遠端伺服器對資料排序
/* sortName:'BAL_MONTH',//預設排序欄位
sortOrder:'desc',//預設排序方式 'desc' 'asc' */
nowrap: true,
border: false,
columns: [ [
{field: 'class1',title: '求決',align: 'center', width: 146 } ,
{field: 'class2',title: '檢舉',align: 'center',width: 146 },
{field: 'class3', title: '建議',align: 'center', width: 146} ,
{field: 'class4', title: '諮詢',align: 'center', width: 146},
{field: 'class5', title: '其他',align: 'center', width: 146}
]],
onLoadSuccess: function (data) {
//alert(JSON.stringify(data));
retData = {
'信訪類別' : []
};
var row0=data.rows[0];
retData["信訪類別"].push({
name : '求決',
value : row0.class1
});
retData["信訪類別"].push({
name : '檢舉',
value : row0.class2
});
retData["信訪類別"].push({
name : '建議',
value : row0.class3
});
retData["信訪類別"].push({
name : '諮詢',
value : row0.class4
});
retData["信訪類別"].push({
name : '其他',
value : row0.class5
});
$.extend(classoption.series[0], {
data : retData["信訪類別"]
});
// 為echarts物件載入資料
myChart.setOption(classoption,true);
}
}).datagrid("showTooltip");
}參考手冊：可查閱http://echarts.baidu.com/doc/doc.html
例子：http://echarts.baidu.com/doc/example.html
3.上面的例子用到 $.extend()方法，這裡順便了解一下
$.extend()
因為專案中有些地方看到有用到這個方法，當時也不知道是什麼意思，見的多了就想了
解一下。原來這個方法還是挺有用的，多用在編寫外掛，當然，它本身也有一些過載原型。
2.1 extend(result,item1,item2…..)
這裡這個方法主要用來合併，將所有的引數項都合併result中，並返回result，但是這
樣就會破壞result的結構。
2.2 extend({},item1,item2,……)
用這個方法，可以將所得的結果全部合併在{}中，並返回，而且還不會破壞原有的項的結構。
示例：
Var item={name:”olive”,age:23};
Var item1={name:”Momo”,sex:”gril”};
Var result=$.extend({},item,item1);
結果：
Result={name:”Momo”,age:23,sex:”gril”};
說明：
以上的結果表明extend方法將所有的項都合併到了{}中，但是，細心一點就會發現，其中item1中的name：“Momo” 將item中的name：“olive”給覆蓋了，這是怎麼回事？請接著往下看。
2.3 extend(bool,{},item1,item2….)
Extend方法還有帶bool型引數的過載。
bool型引數為true表示深拷貝，為false時表示淺拷貝。具體可以通過一下示例來說明：
示例：
var item={name：“olive”,age:23,address{provice:”河南”,city:”鄭州”}};
var item1={sex:”girl”,address{city:”北京”}};
var result=$.extend(true,item,item1);
var result1=$.extend(false,item,item1);
結果：
Result={name：“olive”,age:23,sex:”gril”,address:{provice:”河南”,city:”北京”}};
Result1={name：“olive”,age:23,sex:”gril”,address:{ city:”北京”}};
說明：
以上結果說明，當引數為ture時，即為深拷貝，當子項item1中的子項有與item中的子項相同屬性的值不一樣時，item1中子項的值會將item子項中的值給覆蓋，當子項item1的屬性跟item中的屬性不同時，會與item進行合併。
當引數為false時，子項item1中的子項中與item中的子項屬性相同時，item1中子項的屬性值會將item中的值給完全覆蓋。
2.4 $.extend(item)
該方法是將item合併到Jquery的全域性物件中去，相當於為Jquery全域性物件添加了一個
靜態方法（對應這裡的靜態方法，當然還有例項方法，在後邊有介紹）。
示例：
$.extend({SayHello:function(value){alert(“hello “+value);}});
這樣寫過之後，就可以直接呼叫SayHello方法：
$.SayHello(“Olive”);
說明：該方法相當於為Jquery類添加了新的方法。
2.5 $.fn.extend(item)
上邊提到的$.extend(item)說是為Jquery類添加了靜態方法，那麼這裡的$.fn.extend(item
)就是為每一個例項新增一個例項方法了。
示例：
$.fn.extend({hello:function(value){alert(“hello “+value);}});
這樣寫過之後，在獲取每一個示例之後，都可以呼叫該方法：
$(“#id”).hello(“Olive”);