Layui表格中嵌套echarts图表

webhhhhhh

已于 2024-02-18 13:27:27 修改

阅读量1.4k

点赞数 11

CC 4.0 BY-SA版权

文章标签： layui echarts

于 2024-02-18 13:25:50 首次发布

本文链接：https://blog.youkuaiyun.com/webhhhhhh/article/details/136150223

本文介绍了如何在Layui表格中使用ECharts创建嵌套的柱状图，通过jQuery和layui插件实现动态数据绑定和图表显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Layui表格中嵌套echarts图表

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>echart表格示例</title>
    <link rel="stylesheet" href="../../Plugins/layui/css/layui.css">
    <style>
        .layui-table-cell {
            height: auto;
        }
    </style>
</head>
<body>
    <div class="layui-container">
        <table id="demoTable" lay-filter="test"></table>
    </div>
    <script src="../../Plugins/layui/layui.js"></script>
    <script src="../../js/jquery-2.1.1.min.js"></script>
    <script src="../../js/echarts5.4.1min.js"></script>
    <script>
        $(document).ready(function () {
            // 假设的数据源，实际中从服务器获取
            var demoData = [
                { id: 1, name: '项目一', chartData: { values: [1, 2, 3, 4] } },
                { id: 2, name: '项目二', chartData: { values: [11, 12, 13, 14] } },
            ];
            layui.use(['table', 'laytpl',], function () {
                var table = layui.table;
                var laytpl = layui.laytpl;
                // 定义表格列
                var cols = [
                    [
                        { field: 'name', title: '项目名称' },
                        {
                            field: 'chartData',
                            title: '图表展示',
                            align: 'center',
                            width: 180,
                            templet: function (d) {
                                return '<div id="echart_' + d.id + '" style="height:100%;width:100%"></div>';
                            },
                            unresize: true
                        }
                    ]
                ];
                // 渲染表格
                table.render({
                    elem: '#demoTable',
                    data: demoData,
                    cols: cols,
                    done: function (res, curr, count) {
                        layui.each(res.data, function (index, item) {
                            var chartDomId = 'echart_' + item.id;
                            var chartDom = document.getElementById(chartDomId);
                            // 初始化并配置Echarts图表（这里假设为一个柱状图）
                            var myChart = echarts.init(chartDom);
                            var option = {
                                grid: {
                                    top: 15,
                                    bottom: 25,
                                    left: 25,
                                    right: 10,
                                    "containable": true,
                                },
                                xAxis: {
                                    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                                },
                                yAxis: {},
                                series: [
                                    {
                                        name: '销量',
                                        type: 'bar',
                                        data: [5, 20, 36, 10, 10, 20]
                                    }
                                ]
                            };
                            myChart.setOption(option);
                        });
                    }
                });
            });
        })
    </script>
</body>
</html>