echarts · WhalePHP完全開發手冊

首先需要在TBuilder上加載echarts組件 ~~~ recordWidgets( [['echarts']] ) ~~~ 例： ~~~ <div class="panel" id="pchart1"> <div class="panel-heading"> <span class="panel-icon"> <i class="fa fa-pencil"></i> </span> <span class="panel-title"> 分組得分占比圖</span> </div> <div class="panel-body bg-light dark"> <div class="echart-canvas" echart-data='{"1":{"key_id":1,"title":"\u57fa\u7840\u77e5\u8bc6","get_score":11,"group_total_score":13,"group_score_proportion":0.84615384615385,"analysis":[{"id":11,"project_id":2,"create_uid":1,"create_time":"2017-08-12 17:15:15","update_time":"2017-08-12 17:15:15","uuid":"62d03e7e-8c48-a0a6-8cfb-322f1b014c97","analysis_type":"topic_group_analysis","key_id":1,"min_score":9,"max_score":13,"group_total_score":13,"content":"\u57fa\u7840\u77e5\u8bc6\u8fd8\u884c"}],"group_score_proportion_format":"84.62%"},"2":{"key_id":2,"title":"\u52a0\u5206\u77e5\u8bc6","get_score":0,"group_total_score":5,"group_score_proportion":0,"analysis":[],"group_score_proportion_format":"0%"},"0":{"key_id":0,"title":"\u672a\u5206\u7ec4","get_score":1,"group_total_score":5,"group_score_proportion":0.2,"analysis":[],"group_score_proportion_format":"20%"}}' echart-config='{title:"分組得分占比圖",type:"pie",name_key:"title",value_key:"get_score"}' echart-option="{}" style="width: 100%; height: 430px; margin: 0 auto"> </div> </div> </div> ~~~ ![](https://box.kancloud.cn/c9199de419e8de1cbbb150b73dec1a59_1333x520.png) 需要在加載圖表的節點上增加類名echart-canvas，存在3個屬性：數據：echart-data 全局配置：echart-config ~~~ title 表格名稱 type 表格類型 pie 餅狀圖 radar 雷達圖 bar 柱狀圖 line 折線圖 name_key 字段名key value_key 字段值key name_value 屬性名稱（儀表盤） data_name 數值組名稱（雷達圖，柱狀圖，折線圖等） max_key 雷達圖（對應最大值字段key） ~~~ 覆蓋配置：echart-option，配置內容同echarts #### 混合配置 ~~~ <div class="panel" id="pchart2"> <div class="panel-heading"> <span class="panel-icon"><i class="fa fa-pencil"></i></span> <span class="panel-title fw600">分組得分對比</span> </div> <div class="panel-footer bg-light pn"> <div class="echart-canvas" echart-data='{$topic_group_analysis_arr|json_encode}' echart-config='{type:"bar",data_type:1,name_key:"title",value_key:"get_score",data_name:"得分"}' echart-option="{title:{},yAxis: {type: 'value',axisLabel: {formatter: '{value} 分'}}}" style="width: 100%; height: 300px; margin: 0 auto"></div> </div> </div> ~~~ ![](https://box.kancloud.cn/1d4ee31c5b653a7926087742d4d3c8c2_1330x379.png) #### 分組配置 ~~~ <div class="panel" id="pchart3"> <div class="panel-heading"> <span class="panel-icon"><i class="fa fa-pencil"></i></span> <span class="panel-title fw600">分類得分對比</span> </div> <div class="panel-footer bg-light pn"> <div class="echart-canvas" echart-data='{$topic_category_analysis_arr|json_encode}' echart-config='{type:"bar",data_type:1,name_key:"title",value_key:"get_score",data_name:"得分"}' echart-option="{title:{},yAxis: {type: 'value',axisLabel: {formatter: '{value} 分'}}}" style="width: 100%; height: 300px; margin: 0 auto"></div> </div> </div> ~~~ ![](https://box.kancloud.cn/9a671ecc0432d756a9a921bcb2db1a71_1319x362.png) ### 組件構建 #### 單組 ~~~ {php} echo TWidget($contObj)->groupEcharts([ 'panel_id' => 'pchart2', 'panel_icon' => 'fa fa-pencil', 'panel_title' => '測評分值走勢', 'height' => '300px', 'echart_data' => $list, 'echart_type' => [ 'echart-config' => '{type:"line",name_key:"start_time",value_key:"get_score",data_name:"分數"}', 'echart-option' => '{title:{},yAxis: {type: "value",axisLabel: {formatter: "{value} 分"}}}' ] ]); {/php} ~~~ ![](https://box.kancloud.cn/01472128e59994da28a0b24a3df6ed2a_1323x357.png) #### 多組 ~~~ {php} echo TWidget($contObj)->groupEcharts([ 'panel_id' => 'pchart2', 'panel_icon' => 'fa fa-pencil', 'panel_title' => '每日測評人次統計', 'echart_data' => $day_list, 'echart_type' => [ [ 'tab_title' => '折線圖', 'echart-config' => '{type:"line",name_key:"name",value_key:"value",data_name:"每日測評人次"}', 'echart-option' => '{title:{},yAxis: {type: "value",axisLabel: {formatter: "{value} 人次"}}}' ], [ 'tab_title' => '餅狀圖', 'echart-config' => '{type:"pie",name_key:"name",value_key:"value",data_name:"每日測評人次"}', 'echart-option' => '{title:{}}' ] ] ]); {/php} ~~~ ![](https://box.kancloud.cn/b966c28c30f4d715cbb9cdb96182fd87_1351x403.png) ![](https://box.kancloud.cn/bcf73185b61932ec0f2e40bd171f4602_1319x393.png) echart_data也可放在echart_type字段內配置 ~~~ {php} echo TWidget($contObj)->groupEcharts([ 'panel_title' => '維度總分統計', 'echart_type' => [ [ 'tab_title' => '分值', 'echart_data' => $topicConstituteAnalyse['topic_group_analysis'], 'echart-config' => '{type:"pie",name_key:"title",value_key:"score"}', 'echart-option' => '{title :{}}' ], [ 'tab_title' => '題量', 'echart_data' => $topicConstituteAnalyse['topic_group_analysis'], 'echart-config' => '{type:"pie",name_key:"title",value_key:"num"}', 'echart-option' => '{title :{}}' ] ] ]); {/php} ~~~ #### 簡潔模式（方法groupEcharts第二個參數設置為false即可，此時生成組合不含panle頭等信息） ~~~ {php} echo TWidget($contObj)->groupEcharts([ 'echart_data' => $analysis_data["topic_group_analysis"], 'echart_type' => [ [ 'tab_title' => '餅狀圖', 'echart-config' => '{type:"pie",name_key:"title",value_key:"get_score"}', 'echart-option' => '{title :{}}' ], [ 'tab_title' => '雷達圖', 'echart-config' => '{type:"radar",name_key:"title",value_key:"get_score",max_key:"group_total_score",data_name:"得分"}', 'echart-option' => '{title:{}}' ] ] ],false); {/php} ~~~ ![](https://box.kancloud.cn/1ec508849481fc069ade54e643ed5133_1399x440.png) #### 拼接單個table模式 ~~~ {php} echo TWidget($contObj)->groupEcharts([ 'panel_title' => '分組統計', 'echart_data' => $analysis_data["topic_group_analysis"], 'echart_type' => [ [ 'tab_title' => '餅狀圖', 'echart-config' => '{type:"pie",name_key:"title",value_key:"get_score"}', 'echart-option' => '{title :{}}' ], [ 'tab_title' => '雷達圖', 'echart-config' => '{type:"radar",name_key:"title",value_key:"get_score",max_key:"group_total_score",data_name:"得分"}', 'echart-option' => '{title:{}}' ] ], 'table' => [ 'tab_col' => 4, 'list' => $analysis_data['topic_group_analysis'], 'columns' => [ ['title','組名'], ['get_score','得分'], ['group_total_score','總分'], ['group_score_proportion_format','得分占比'], ] ] ]); {/php} ~~~ ![](https://box.kancloud.cn/b68f533d44d20af192bd63af1204ecb3_1329x394.png) #### 拼接多個Tab模式 ~~~ {php} echo TWidget($contObj)->groupEcharts([ 'panel_title' => '分組統計', 'echart_data' => $analysis_data["topic_group_analysis"], 'echart_type' => [ [ 'tab_title' => '餅狀圖', 'echart-config' => '{type:"pie",name_key:"title",value_key:"get_score"}', 'echart-option' => '{title :{}}' ], [ 'tab_title' => '雷達圖', 'echart-config' => '{type:"radar",name_key:"title",value_key:"get_score",max_key:"group_total_score",data_name:"得分"}', 'echart-option' => '{title:{}}' ] ], 'tabs'=>[ 'widgets' =>[ /* ['title'=>'html1','widget'=>[ 'type' => 'html', 'html' => '<h1>HTML</h1><br/>AAABBB<br/>AAABBB<br/>AAABBB<br/>AAABBB<br/>AAABBB<br/>AAABBB<br/>AAABBB<br/>AAABBB<br/>AAABBB<br/>AAABBB<br/>AAABBB<br/>AAABBB<br/>AAABBB<br/>AAABBB<br/>AAABBB<br/>AAABBB<br/>AAABBB<br/>AAABBB<br/>AAABBB<br/>AAABBB' ]], ['title'=>'html2','widget'=>[ 'type' => 'html', 'html' => '<h1>HTML</h1><br/>AAABBB<br/>AAABBB<br/>AAABBB<br/>AAABBB<br/>AAABBB<br/>AAABBB<br/>AAABBB<br/>AAABBB<br/>AAABBB<br/>AAABBB<br/>AAABBB<br/>AAABBB<br/>AAABBB<br/>AAABBB<br/>AAABBB<br/>AAABBB<br/>AAABBB<br/>AAABBB<br/>AAABBB<br/>AAABBB' ]], ['title'=>'內容','content'=>'2'], ['title'=>'圖表','widget'=>[ 'type' => 'echart', 'echart_data' => $analysis_data["topic_group_analysis"], 'echart_type' => [ 'tab_title' => '餅狀圖', 'echart-config' => '{type:"pie",name_key:"title",value_key:"get_score"}', 'echart-option' => '{title :{}}' ] ]], */ [ 'title'=>'得分', 'widget'=>[ 'type' => 'table', 'list' => $analysis_data['topic_group_analysis'], 'columns' => [ ['title','組名'], ['get_score','得分'], ['group_total_score','總分'], ['group_score_proportion_format','得分占比'], ] ] ], ['title'=>'解析','widget'=>[ 'type' => 'html', 'html' => getAnalysisHtml($analysis_data['topic_group_analysis']) ]] ] ] ]); {/php} ~~~ ![](https://box.kancloud.cn/c363348ff00d87b5eb55e81259e6029e_1338x407.png) #### 單獨HTML ~~~ {php} echo TWidget($contObj)->groupEcharts([ 'panel_title' => '測試日志', 'panel_id' => 'pchart20', 'tab_col' => 12, 'widget' => [ 'type' => 'html', 'html' => $html ] ]); {/php} ~~~ ![](https://box.kancloud.cn/0fcb0956ee8e1eec2eb6cdf5ab3fd2e2_1359x389.png) #### js直接調用 ~~~ $('#container0').getFormatDrawOneChart(url,opt,function(myChart,data,option){ var drawData = { echart_data : data.results.dataset, echart_config : {type:"line",name_key:"gather_date",value_key:"follower_num",data_name:"粉絲數",set_min:true}, echart_option : {title:{},toolbox:{show: false},yAxis: {type: "value",axisLabel: {formatter: "{value}"}}} }; // echart表格內容 var option = $(this).formatDrawOneChart(drawData,myChart); }); ~~~ 上例echart_data數據內容： ~~~ {"errcode":0,"interface_runtime":"0.0430s","interface_memory":"54kb","response":"ranking\/weibo_data","results":{"pageInfo":{"page_size":"20","page_now":1,"page_count":15,"total":"298"},"dataset":[{"id":"19222","gather_time":"1476329762","gather_date":"2016-10-13","musician_id":"416","attention_num":"210","follower_num":"6365928","weibo_num":"1734","gather_type":"0"},{"id":"20606","gather_time":"1476759045","gather_date":"2016-10-18","musician_id":"416","attention_num":"210","follower_num":"6386378","weibo_num":"1735","gather_type":"0"},{"id":"22497","gather_time":"1476844502","gather_date":"2016-10-19","musician_id":"416","attention_num":"210","follower_num":"6390086","weibo_num":"1735","gather_type":"0"},{"id":"24370","gather_time":"1476952669","gather_date":"2016-10-20","musician_id":"416","attention_num":"210","follower_num":"6393427","weibo_num":"1735","gather_type":"0"},{"id":"26680","gather_time":"1477017742","gather_date":"2016-10-21","musician_id":"416","attention_num":"210","follower_num":"6395497","weibo_num":"1735","gather_type":"0"},{"id":"29492","gather_time":"1477278329","gather_date":"2016-10-24","musician_id":"416","attention_num":"210","follower_num":"6409035","weibo_num":"1736","gather_type":"0"},{"id":"31996","gather_time":"1477364635","gather_date":"2016-10-25","musician_id":"416","attention_num":"210","follower_num":"6412314","weibo_num":"1736","gather_type":"0"},{"id":"34703","gather_time":"1477450713","gather_date":"2016-10-26","musician_id":"416","attention_num":"210","follower_num":"6415023","weibo_num":"1736","gather_type":"0"},{"id":"37218","gather_time":"1477534882","gather_date":"2016-10-27","musician_id":"416","attention_num":"210","follower_num":"6417492","weibo_num":"1736","gather_type":"0"},{"id":"39521","gather_time":"1477881378","gather_date":"2016-10-31","musician_id":"416","attention_num":"210","follower_num":"6426696","weibo_num":"1736","gather_type":"0"},{"id":"41608","gather_time":"1478057941","gather_date":"2016-11-02","musician_id":"416","attention_num":"210","follower_num":"6429612","weibo_num":"1736","gather_type":"0"},{"id":"44749","gather_time":"1478229519","gather_date":"2016-11-04","musician_id":"416","attention_num":"210","follower_num":"6438372","weibo_num":"1737","gather_type":"0"},{"id":"47654","gather_time":"1478486047","gather_date":"2016-11-07","musician_id":"416","attention_num":"210","follower_num":"6444170","weibo_num":"1737","gather_type":"0"},{"id":"50569","gather_time":"1478658404","gather_date":"2016-11-09","musician_id":"416","attention_num":"210","follower_num":"6448399","weibo_num":"1737","gather_type":"0"},{"id":"53513","gather_time":"1478832855","gather_date":"2016-11-11","musician_id":"416","attention_num":"210","follower_num":"6451918","weibo_num":"1737","gather_type":"0"},{"id":"56319","gather_time":"1479092683","gather_date":"2016-11-14","musician_id":"416","attention_num":"210","follower_num":"6456268","weibo_num":"1738","gather_type":"0"},{"id":"58867","gather_time":"1479184083","gather_date":"2016-11-15","musician_id":"416","attention_num":"210","follower_num":"6461122","weibo_num":"1738","gather_type":"0"},{"id":"59890","gather_time":"1479265890","gather_date":"2016-11-16","musician_id":"416","attention_num":"210","follower_num":"6464637","weibo_num":"1739","gather_type":"0"},{"id":"62945","gather_time":"1479357073","gather_date":"2016-11-17","musician_id":"416","attention_num":"210","follower_num":"6468793","weibo_num":"1739","gather_type":"0"},{"id":"66018","gather_time":"1479436225","gather_date":"2016-11-18","musician_id":"416","attention_num":"210","follower_num":"6472801","weibo_num":"1739","gather_type":"0"}]}} ~~~ 動態折線圖demo ~~~ function getWeiboDataChart( opt ){ var url = "/Api/Ranking/weibo_data/musician_id/{$_GET['musician_id']}"; $('#container0').getFormatDrawOneChart(url,opt,function(myChart,data){ var drawData = { echart_data : data.results.dataset, echart_config : {type:"line",name_key:"gather_date",value_key:"follower_num",data_name:"粉絲數",set_min:true}, echart_option : {title:{},toolbox:{show: false},yAxis: {type: "value",axisLabel: {formatter: "{value}"}}} }; // echart表格內容 var option = $(this).formatDrawOneChart(drawData,myChart); //+------------------------------------------------------------------ var is_stop_interval = false; var gather_date = data.results.dataset[ data.results.dataset.length-1 ]['gather_date']; function get_one_weibo_data(){ var get_one_url = "/Api/Ranking/get_one_weibo_data/musician_id/{$_GET['musician_id']}"; $.ajax({ type: "GET", url: get_one_url, data: {gather_date:gather_date}, async: false, success: function(one_data){ one_data = eval('(' + one_data + ')'); var results = one_data.results; if( results ){ option.series[0].data.shift(); option.series[0].data.push( results.follower_num ); gather_date = results.gather_date; option.xAxis[0].data.shift(); option.xAxis[0].data.push( results.gather_date ); //myChart.setOption(option); WhalePHP.Echarts.setChartOption(myChart,option,drawData.echart_config); }else{ is_stop_interval = true; } } }); } var interval = setInterval(function () { if( is_stop_interval ){ clearInterval(interval); } get_one_weibo_data(); }, 2000); //+------------------------------------------------------------------ }); } getWeiboDataChart( {page_size:20} ); ~~~ ![](https://box.kancloud.cn/20b24f3a08fcbea7c0406eb3aa8aa324_886x318.png)