### 基础配置说明
* * * * *
绑定配置到HTML标签
* echart-data 图表数据内容，json格式
* echart-config 数据相关使用字段及名称等配置
* type 图表类型（例：pie饼状图，bar 柱状图，line 折线图...）
* name_key 数据名称字段名
* value_key 数据值字段名
* max_key 最大值字段名（仅雷达图有效）
* data_name 数据组名称
* echart-option 单表扩展配置，同echarts配置，将递归合并到框架内的配置
* echart-url 数据内容对应的 url 地址
* echart-ajax 数据内容对应的异步请求配置
以雷达图为例：
~~~
<div class="echart-canvas"
echart-data='[{"title":"基础知识","get_score":11,"group_total_score":13},{"title":"加分知识","get_score":5,"group_total_score":5},{"title":"未分组","get_score":1,"group_total_score":6}]'
echart-config='{type:"radar",name_key:"title",value_key:"get_score",max_key:"group_total_score",data_name:"得分"}'></div>
~~~
js配置
### DEMO演示
* * * * *
#### 饼图 pie
html
~~~
<div class="echart-canvas"
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"}'></div>
~~~
js（后续js部分代码与此处相同，皆省略）
~~~
$('body').EChartHelper();
~~~
#### 雷达图 radar
> 相对于饼图增加了一个总数字段
html
~~~
<div class="echart-canvas"
echart-data='[{"title":"基础知识","get_score":11,"group_total_score":13},{"title":"加分知识","get_score":5,"group_total_score":5},{"title":"未分组","get_score":1,"group_total_score":6}]'
echart-config='{type:"radar",name_key:"title",value_key:"get_score",max_key:"group_total_score",data_name:"得分"}'></div>
~~~
#### 柱状图 bar
html
~~~
<div class="echart-canvas"
echart-data='[{"use_second":99,"topic_tip":"第1题"},{"use_second":6,"topic_tip":"第2题"},{"use_second":3,"topic_tip":"第3题"},{"use_second":4,"topic_tip":"第4题"}]'
echart-config='{type:"bar",name_key:"topic_tip",value_key:"use_second",data_name:"单题用时/秒"}'
echart-option='{yAxis: {axisLabel: {formatter: "{value} 秒"}}}'></div>
~~~
#### 折线图 line
> 此处仅需要将柱状图 echart-config 中 type 属性改为 line 即可
html
~~~
<div class="echart-canvas"
echart-data='[{"use_second":99,"topic_tip":"第1题"},{"use_second":6,"topic_tip":"第2题"},{"use_second":3,"topic_tip":"第3题"},{"use_second":4,"topic_tip":"第4题"}]'
echart-config='{type:"line",name_key:"topic_tip",value_key:"use_second",data_name:"单题用时/秒"}' ></div>
~~~
#### 组合折线图 line
> 会自动将x轴无数据的字段填充0
html
~~~
<div class="echart-canvas"
echart-data='[{"count":2,"day":"2017-09-17","project_name":"中级PHP工程师"},{"count":3,"day":"2017-09-16","project_name":"中级PHP工程师"},{"count":1,"day":"2017-09-10","project_name":"中级PHP工程师"},{"count":2,"day":"2017-08-30","project_name":"极速职业测评"},{"count":1,"day":"2017-08-30","project_name":"中级PHP工程师"},{"count":1,"day":"2017-08-29","project_name":"极速职业测评"},{"count":1,"day":"2017-08-29","project_name":"中级PHP工程师"},{"count":1,"day":"2017-08-28","project_name":"极速职业测评"},{"count":1,"day":"2017-08-27","project_name":"极速职业测评"},{"count":1,"day":"2017-08-26","project_name":"极速职业测评"},{"count":1,"day":"2017-08-25","project_name":"极速职业测评"},{"count":2,"day":"2017-08-24","project_name":"极速职业测评"},{"count":2,"day":"2017-08-24","project_name":"中级PHP工程师"},{"count":1,"day":"2017-08-23","project_name":"中级PHP工程师"},{"count":1,"day":"2017-08-21","project_name":"中级PHP工程师"}]'
echart-config='{type:"line",name_key:"day",value_key:"count",data_key:"project_name"}'
echart-option='{yAxis: {axisLabel: {formatter: "{value} 人次"}}}'></div>
~~~
#### 组合柱状图 bar
> 同理，修改组合折线图 echart-config 中的 type 值为 bar 即可
html
~~~
<div class="echart-canvas"
echart-data='[{"count":2,"day":"2017-09-17","project_name":"中级PHP工程师"},{"count":3,"day":"2017-09-16","project_name":"中级PHP工程师"},{"count":1,"day":"2017-09-10","project_name":"中级PHP工程师"},{"count":2,"day":"2017-08-30","project_name":"极速职业测评"},{"count":1,"day":"2017-08-30","project_name":"中级PHP工程师"},{"count":1,"day":"2017-08-29","project_name":"极速职业测评"},{"count":1,"day":"2017-08-29","project_name":"中级PHP工程师"},{"count":1,"day":"2017-08-28","project_name":"极速职业测评"},{"count":1,"day":"2017-08-27","project_name":"极速职业测评"},{"count":1,"day":"2017-08-26","project_name":"极速职业测评"},{"count":1,"day":"2017-08-25","project_name":"极速职业测评"},{"count":2,"day":"2017-08-24","project_name":"极速职业测评"},{"count":2,"day":"2017-08-24","project_name":"中级PHP工程师"},{"count":1,"day":"2017-08-23","project_name":"中级PHP工程师"},{"count":1,"day":"2017-08-21","project_name":"中级PHP工程师"}]'
echart-config='{type:"bar",name_key:"day",value_key:"count",data_key:"project_name"}'
echart-option='{yAxis: {axisLabel: {formatter: "{value} 人次"}}}'></div>
~~~
#### 组合柱状图+折线图 bar+line
> 将 echart-config 中相关字段使用数组配置
html
~~~
<div class="echart-canvas"
echart-data='[{"use_second":140,"get_score":0,"get_score_proportion_centesimal":0,"participator":"第84位考生"},{"use_second":52,"get_score":10,"get_score_proportion_centesimal":40,"participator":"第86位考生"},{"use_second":162,"get_score":15,"get_score_proportion_centesimal":50,"participator":"第88位考生"}]'
echart-config='{type:["bar","line"],name_key:"participator",value_key:["get_score_proportion_centesimal","use_second"],data_name:["正确率","用时"]}'
echart-option='{yAxis: [{axisLabel: {formatter: "{value} %"}},{axisLabel: {formatter: "{value} 秒"}}]}'></div>
~~~
#### 仪表盘 gauge
html
~~~
<div class="echart-canvas"
echart-data='{"get_score_proportion_centesimal":70.833333333333}'
echart-config='{type:"gauge",data_name:"得分统计",name_value:"正确率",value_key:"get_score_proportion_centesimal"}' ></div>
~~~
