#### 基礎
> 使用 drawEChart 直接渲染數據
html
~~~
<div class="canvas-box echart-canvas-01"></div>
~~~
js
~~~
var drawData = {
echart_data : [{"title":"基礎知識","get_score":11},{"title":"加分知識","get_score":12},{"title":"未分組","get_score":8}],
echart_config : {title:"分組得分占比圖",type:"pie",name_key:"title",value_key:"get_score"}
};
$('.canvas-box echart-canvas-01').drawEChart(drawData);
~~~
#### 異步
> 使用 getDrawEChart 請求url獲取數據并渲染圖表
配置參數說明
~~~
var defaultSetting = {
'url':'', // 數據請求地址
'param':{}, // 數據請求附加參數
'data_key':null, // 數據字段key,多層用 . 號進行分割
'success_key':'code', // 數據請求成功標識字段名
'success_val':'1', // 數據請求成功標識字段值
'success':null, // 數據請求成功回調函數
'drow_data':{ // 圖表配置（參考入門說明）
echart_data : [],
echart_config : {},
echart_option : {}
}
};
var setting = $.extend(defaultSetting,option);
~~~
html
~~~
<div class="canvas-box echart-canvas-01"></div>
<div class="canvas-box echart-canvas-02"></div>
<div class="canvas-box echart-canvas-03"></div>
~~~
###### js 簡單綁定數據 / url標簽綁定 (一)
簡單數據格式請求
~~~
<div class="echart-canvas canvas-box echart-canvas-01-01"
echart-url='./data_simple.js'
echart-config='{data_name:"分值占比",type:"pie",name_key:"title",value_key:"get_score"}'></div>
~~~
完整數據格式請求
~~~
<div class="echart-canvas canvas-box echart-canvas-01-02"
echart-ajax='{url:"./data_profession.js",success_key:"code",success_val:1,data_key:"dataset"}'
echart-config='{data_name:"分值占比",type:"pie",name_key:"title",value_key:"get_score"}'></div>
~~~
###### js 簡單定義數據 (二)
~~~
// data_simple.js 在 demo中返回數據為：[{"title":"基礎知識","get_score":11},{"title":"加分知識","get_score":12},{"title":"未分組","get_score":8}]
$('.echart-canvas-02').getDrawEChart({
'url' : './data_simple.js',
'drow_data' : {
echart_config : {title:"分組得分占比圖",type:"pie",name_key:"title",value_key:"get_score"}
}
});
~~~
###### js 復雜請求數據 (三)
~~~
// data_profession.js 在 demo中返回數據為：{"code":1,"dataset":[{"title":"基礎知識","get_score":5},{"title":"加分知識","get_score":10},{"title":"未分組","get_score":5}]}
$('.echart-canvas-04').getDrawEChart({
'url' : './data_profession.js',
'type' : 'POST',
'data' : {p:1},
'success_key' : 'code', // 數據請求成功標識字段名
'success_val' : '1', // 數據請求成功標識字段值
'data_key' : 'dataset', // 數據使用字段
'drow_data' : {
echart_config : {title:"分組得分占比圖",type:"pie",name_key:"title",value_key:"get_score"}
}
});
~~~
###### 異步多圖
> 使用場景為同一個數據源的數據，使用不同類型的圖表展示，異步請求只進行一次。
js
~~~
// 待完善...
~~~
###### 定時刷新
js
~~~
// 待完善...
~~~
###### 切換配置
js
~~~
// 待完善...
~~~
