入門 · echart-helper開發手冊

### 基礎配置說明 * * * * * 綁定配置到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(); ~~~ ![](https://box.kancloud.cn/227f24858ddf1195aa21c0f25f5d1dfa_572x423.png) #### 雷達圖 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> ~~~ ![](https://box.kancloud.cn/6e30f6292e8e401746c20eed618d6e4d_831x369.png) #### 柱狀圖 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> ~~~ ![](https://box.kancloud.cn/ce9b74d7d418f03218bbc9b9f296b009_568x439.png) #### 折線圖 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> ~~~ ![](https://box.kancloud.cn/178b6972cc93cfb304273dfa1467dd6d_565x410.png) #### 組合折線圖 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> ~~~ ![](https://box.kancloud.cn/0d32ef8b09a0b551c9861b31a497e2d8_833x417.png) #### 組合柱狀圖 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> ~~~ ![](https://box.kancloud.cn/0c68622dff0eb153672cf6a0ecedc97a_831x437.png) #### 組合柱狀圖+折線圖 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> ~~~ ![](https://box.kancloud.cn/2fa43744c65c810552763b095e107bb5_833x436.png) #### 儀表盤 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> ~~~ ![](https://box.kancloud.cn/bfcc4bd9f0b7b6f9159084ed926c30ee_823x360.png)