前言
FastAdmin中Bootstrap-table表格参数templateView拥有强大的自定义功能,这里我们使用templateView来实现一个图表渲染的功能。
首先我们itemtpl模板中的数据需要填充为一个JSON数据,包含column和data两列 ,chartdata为我们服务器返回的行中的数据。其次在js中添加一个表格渲染后的事件绑定。此功能会使用上Echarts图表渲染,因此需在头部define处添加好echarts和echats-theme依赖,以下是详细步骤和代码
视图index.html中的itemtpl的模板数据为
<script id="itemtpl" type="text/html"><div class="col-sm-4 col-md-3"><div class="echart" style="height:200px;width:100%;"><textarea class="hide"><%=item.chartdata%></textarea></div></div>
</script>复制
服务端控制器index的方法为
/*** 查看*/
public function index()
{if ($this->request->isAjax()){list($where, $sort, $order, $offset, $limit) = $this->buildparams(NULL);$total = $this->model->where($where)->order($sort, $order)->count();$list = $this->model->where($where)->order($sort, $order)->limit($offset, $limit)->select();foreach ($list as $key => &$v){$v['chartdata'] = json_encode(array('column' => array('2017-06-16', '2017-06-17', '2017-06-18', '2017-06-19', '2017-06-20', '2017-06-21', '2017-06-22'),'data' => array(6, 32, 2, 3, 1, 7, 25),));}$result = array("total" => $total, "rows" => $list);return json($result);}return $this->view->fetch();
}复制
JS文件中我们在var table = $("#table");
后追加一个渲染数据后的处理,代码如下
table.on('post-body.bs.table', function (e, data) {$(".echart").each(function () {var json = JSON.parse($("textarea", this).val());// 基于准备好的dom,初始化echarts实例var myChart = Echarts.init($(this)[0], 'walden');// 指定图表的配置项和数据var option = {title: {text: '',subtext: ''},tooltip: {trigger: 'axis'},legend: {data: ['成交']},toolbox: {show: false,feature: {magicType: {show: true, type: ['stack', 'tiled']},saveAsImage: {show: true}}},xAxis: {type: 'category',boundaryGap: false,data: json.column},yAxis: {},grid: [{left: 'left',top: 'top',right: '10',bottom: 30}],series: [{name: '成交',type: 'line',smooth: true,areaStyle: {normal: {}},lineStyle: {normal: {width: 1.5}},data: json.data}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);});
});复制
最终的效果图为
参考
https://ask.fastadmin.net/article/117.html