首先需要在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>
~~~
需要在加载图表的节点上增加类名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>
~~~
#### 分组配置
~~~
<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>
~~~
### 组件构建
#### 单组
~~~
{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}
~~~
#### 多组
~~~
{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}
~~~
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}
~~~
#### 拼接单个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}
~~~
#### 拼接多个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}
~~~
#### 单独HTML
~~~
{php}
echo TWidget($contObj)->groupEcharts([
'panel_title' => '测试日志',
'panel_id' => 'pchart20',
'tab_col' => 12,
'widget' => [
'type' => 'html',
'html' => $html
]
]);
{/php}
~~~
#### 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} );
~~~
- 序言
- 环境搭建
- 下载及安装
- 构建器
- 构建器概述
- 模版构建器（TBuilder）
- Tab组件
- Topbar组件
- 按钮
- 顶部按钮配置
- 按钮配置明细
- 表格（table）
- Table案例
- 「方法」加载数据
- 「方法」设置数据列
- 「方法」列排序
- 「组件」检索过滤器
- 「组件」顶部按钮
- 「组件」列表按钮
- 「配置」列快速编辑
- 「配置」列附加内容
- 「配置」显隐列表复选框
- 「配置」自定义样式
- 表单（form）
- Form案例
- 「方法」添加组件（addWidgets）
- 「方法」数据检索过滤（filter）
- 「组件」富文本编辑器（kindeditor|editormd）
- 「组件」图片组件（images|cropper）
- 「组件」select listbox组件（listbox）
- 「组件」颜色选择器（button_color）
- 「组件」自定义内容
- 「配置」显隐字段关联（open_by）
- 「配置」form布局（layoutView）
- 「配置」隐藏描述区（hideWidgetsDesc）
- 「配置」数据验证（validate）
- 「配置」隐藏表单底部按钮（hideFormButton）
- 「配置」字段tip提示（tip）
- 自定义页面（custom）
- Custom案例
- 「组件」echart
- 「组件」Tile Widgets
- 「配置」custom布局
- 「配置」自定义html内容
- 「配置」自定义提醒页面
- 树形（tree）
- Tree案例
- 左侧菜单区配置
- 关闭左侧菜单（hideLeftMenu）
- 顶部按钮配置
- 自定义菜单配置
- 展现方式配置
- 表内增删改（Tabullet）
- 通用设置
- 依赖文件加载（插件/js/css）
- 指定布局/模版
- 内容定位栏（setTrayMenu）
- 设置内容区侧栏
- 模态框打开页面
- 组件构建器（TWidget）
- echarts
- table
- form组件
- Tabs组件
- builder构建
- titleLine
- 数据构建器（DBuilder）
- 概述（案例）
- 「方法」获取单条记录详情
- 「方法」获取分页列表数据
- 「方法」排序
- 「方法」设置查询字段
- 「方法」快速编辑
- 「方法」数据导出
- 「方法」联表查询
- 「方法」查询数据再处理
- 「配置」回调处理
- 「配置」设置过滤字段
- 「配置」指定过滤字段匹配值
- 「配置」增加编辑支持
- 「配置」查询出全部数据
- 辅助类
- Excle
- 模块开发
- 插件开发
- 扩展
- 行为扩展
- 行为日志
- 杂项
- 图片异步加载
- jquery插件zeroModal
- 提示
- form表单验证
- ajax相关
- 展开收起
- 常用函数
- 其他插件
- DEMO
- 增删改查
- 安全
- XSS 攻击
- 注入攻击
- CSRF 攻击
- 其他攻击和漏洞
- 开发
- TBuilder组件开发
- 更新日志
- 关于文档