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);    });});

最终的效果图为

希望以上内容对你有所帮助！如果还有其他问题，请随时提问。 各类知识收集 拥有多年CMS企业建站经验，对 iCMS， LeCMS， ClassCMS， Fastadmin， PbootCMS， PHPCMS， 易优CMS， YzmCMS， 讯睿CMS， 极致CMS， Wordpress， HkCMS， YznCMS， WellCMS， ThinkCMF， 等各类cms的相互转化，程序开发，网站制作，bug修复，程序杀毒，插件定制都可以提供最佳解决方案。