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

相关推荐
小*-^-*九20 分钟前
php 使用html 生成pdf word wkhtmltopdf 系列1
pdf·html·php
爱隐身的官人9 小时前
cfshow-web入门-php特性
python·php·ctf
leo__52018 小时前
在Ubuntu 22.04系统中无需重启设置静态IP地址
tcp/ip·ubuntu·php
爱隐身的官人1 天前
ctfshow - web - 命令执行漏洞总结(二)
php·命令执行
悠悠~飘2 天前
php简介(第一天打卡)
php
久绊A2 天前
Hydra-SSH 破解安全防范
开发语言·php
黑白世界46482 天前
开源分享: php-tools php gui的一次尝试
后端·php
OEC小胖胖2 天前
Next.js数据获取入门:`getStaticProps` 与 `getServerSideProps`
前端·前端框架·web·next.js
2503_928411562 天前
9.8 ajax+php基础语法
ajax·okhttp·php
普通网友2 天前
支持二次开发的代练App源码:订单管理、代练监控、安全护航功能齐全,一站式解决代练护航平台源码(PHP+ Uni-app)
安全·uni-app·php