#### 基础
> 使用 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
~~~
// 待完善...
~~~
