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

前言

FastAdmin中Bootstrap-table表格参数templateView拥有强大的自定义功能,这里我们使用templateView来实现一个图表渲染的功能。

首先我们itemtpl模板中的数据需要填充为一个JSON数据,包含column和data两列 ,chartdata为我们服务器返回的行中的数据。其次在js中添加一个表格渲染后的事件绑定。此功能会使用上Echarts图表渲染,因此需在头部define处添加好echarts和echats-theme依赖,以下是详细步骤和代码

视图index.html中的itemtpl的模板数据为

xml 复制代码
<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的方法为

php 复制代码
/**
 * 查看
 */
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");后追加一个渲染数据后的处理,代码如下

javascript 复制代码
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

相关推荐
ejinxian2 小时前
PHP 超文本预处理器 发布 8.5 版本
开发语言·php
zorro_z3 小时前
PHP语法基础篇(九):正则表达式
php
SuperherRo14 小时前
WEB攻防-文件包含&LFI&RFI&伪协议编码算法&无文件利用&黑白盒
php·文件包含·伪协议·lfi·无文件·黑白盒·rfi
OEC小胖胖18 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
用户Taobaoapi20141 天前
Taobao agent USA丨美国淘宝代购1688代采集运系统搭建指南
数据挖掘·php
蓝色记忆1 天前
Classmap 如何兼容旧代码
php
蓝色记忆1 天前
Composer PSR-4 自动加载机制的完整流程
php
aiprtem1 天前
基于Flutter的智能设备web前端设计
物联网·flutter·web
only-lucky1 天前
C语言socket编程-补充
服务器·c语言·php
蓝黑20201 天前
PHP从字符串到数值的类型转换
php