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>