FastAdmin列表用echats渲染，使用表格的templateView实现一个图表渲染的功能

前言

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

原文地址：https://blog.csdn.net/qq_36303853/article/details/142355703

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！