bootstrapTable 嵌入 echart
在使用 Bootstrap Table 插件时，可以在其中嵌入 ECharts 图表。以下是一个简单的例子，展示如何在 Bootstrap Table 的某个单元格中嵌入 ECharts 图表：
1.确保你已经引入了 Bootstrap Table 和 ECharts 的 CSS 和 JavaScript 文件。
<!-- 引入 Bootstrap 样式文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- 引入 Bootstrap Table 的 CSS 和 JavaScript 文件 -->
<link rel="stylesheet" href="path/to/bootstrap-table.min.css">
<script src="path/to/jquery.min.js"></script>
<script src="path/to/bootstrap.min.js"></script>
<script src="path/to/bootstrap-table.min.js"></script>
<!-- 引入 ECharts 的 JavaScript 文件 -->
<script src="path/to/echarts.min.js"></script>
2.在 HTML 中定义 Bootstrap Table 容器。
<div id="table" class="fixed-table-container">
<table id="myTable"
class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>ECharts</th>
</tr>
</thead>
</table>
</div>
3.使用 JavaScript 初始化 Bootstrap Table 并在某个单元格中添加 ECharts 图表。
$(function() {
var $table = $('#myTable');
$table.bootstrapTable({
data: [{
name: 'Item 1',
value: '20'
}, {
name: 'Item 2',
value: '30'
}],
columns: [{
field: 'name',
title: 'Name'
}, {
field: 'value',
title: 'ECharts',
formatter: function(value, row, index) {
var chartContainer = document.createElement('div');
chartContainer.style.height = '100%';
var myChart = echarts.init(chartContainer);
var option = {
// ECharts 配置项
series: [
{
type: 'bar',
data: [value]
}
]
};
myChart.setOption(option);
return chartContainer;
}
}]
});
});
在上述代码中，formatter 函数负责创建 ECharts 图表实例，并将其渲染到单元格中。option 对象包含了 ECharts 图表的配置信息，可以根据实际需求进行调整。这样，当 Bootstrap Table 被初始化时，它会在相应的单元格内显示 ECharts 图表。
=我是一个分割线======
下面是一个具体的例子，展示了如何在 Bootstrap Table 的某个单元格中嵌入一个简单的 ECharts 柱状图。这个例子假设你已经有了一个 Bootstrap Table，并且想要在某个特定的列中显示 ECharts 图表。
首先，确保你的 HTML 文件中包含了 Bootstrap、Bootstrap Table 和 ECharts 的相关依赖。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Table with ECharts</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Bootstrap Table CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.css">
<!-- ECharts -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script>
</head>
<body>
<div class="container mt-5">
<table id="myTable" class="table table-striped table-hover">
<thead>
<tr>
<th>Name</th>
<th>Sales</th>
<th>ECharts</th>
</tr>
</thead>
<tbody>
<!-- 数据行将会通过 JavaScript 动态生成 -->
</tbody>
</table>
</div>
<!-- jQuery and Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Bootstrap Table JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.js"></script>
<script>
$(document).ready(function() {
// 示例数据
var data = [
{name: 'Item 1', sales: 100, echartsData: [120, 200]},
{name: 'Item 2', sales: 200, echartsData: [150, 80]},
{name: 'Item 3', sales: 150, echartsData: [80, 70]}
];
// 初始化 Bootstrap Table
$('#myTable').bootstrapTable({
data: data,
columns: [
{field: 'name', title: 'Name'},
{field: 'sales', title: 'Sales'},
{
field: 'echartsData',
title: 'ECharts',
formatter: function(value, row, index) {
// 创建图表容器
var chartContainer = $('<div class="echarts-container" style="width:100%; height:200px;"></div>');
// 初始化 ECharts 实例
var myChart = echarts.init(chartContainer[0]);
// 设置图表配置项
var option = {
title: {
text: row.name
},
tooltip: {},
xAxis: {
data: ['Jan', 'Feb']
},
yAxis: {},
series: [{
name: 'Sales',
type: 'bar',
data: value
}]
};
// 使用配置项和数据显示图表
myChart.setOption(option);
// 返回图表容器
return chartContainer;
}
}
]
});
});
</script>
</body>
</html>
在这个例子中，data 数组包含了表格所需的数据，其中 echartsData 是一个数组，用于传递给 ECharts 作为图表数据。formatter 函数创建了一个包含 echarts-container 类的 div 元素作为图表的容器，并且初始化了 ECharts 实例，设置了相应的配置项，并将数据传递给了图表。最后，将图表容器返回，以便在表格的对应单元格中显示
=我是一个分割线======
在 Bootstrap Table 中嵌入 ECharts 折线图与柱状图类似，只是你需要调整 ECharts 的配置项以显示折线图。以下是一个例子，展示了如何在 Bootstrap Table 的某个单元格中嵌入一个 ECharts 折线图。
首先，请确保你已经包含了 Bootstrap、Bootstrap Table 和 ECharts 的相关文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Table with ECharts Line Chart</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Bootstrap Table CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.css">
<!-- ECharts -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
</head>
<body>
<div class="container mt-5">
<table id="myTable" class="table table-striped table-hover">
<thead>
<tr>
<th>Date</th>
<th>Sales</th>
<th>ECharts Line Chart</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<!-- jQuery and Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Bootstrap Table JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.js"></script>
<script>
$(document).ready(function() {
// 示例数据
var data = [
{date: '2021-01-01', sales: 100, echartsData: [120, 132, 101, 134, 90, 230, 210]},
{date: '2021-01-02', sales: 150, echartsData: [130, 134, 90, 230, 210, 120, 132]},
{date: '2021-01-03', sales: 120, echartsData: [90, 230, 210, 120, 132, 134, 101]}
];
// 初始化 Bootstrap Table
$('#myTable').bootstrapTable({
data: data,
columns: [
{field: 'date', title: 'Date'},
{field: 'sales', title: 'Sales'},
{
field: 'echartsData',
title: 'ECharts Line Chart',
formatter: function(value, row, index) {
// 创建图表容器
var chartContainer = $('<div class="echarts-container" style="width:100%; height:200px;"></div>');
// 初始化 ECharts 实例
var myChart = echarts.init(chartContainer[0]);
// 设置图表配置项
var option = {
title: {
text: 'Sales Over Time'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Sales']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
一个新的完整例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Table with ECharts Line Chart</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.css">
<style>
.chart-container {
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<div class="container">
<table id="myTable" class="table table-bordered">
<thead>
<tr>
<th data-field="name">Name</th>
<th data-field="chart">Chart</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>
<div class="chart-container" id="chart1"></div>
</td>
</tr>
<tr>
<td>Data 2</td>
<td>
<div class="chart-container" id="chart2"></div>
</td>
</tr>
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
<script>
$(document).ready(function() {
$('#myTable').bootstrapTable();
// Initialize ECharts charts
var chart1 = echarts.init(document.getElementById('chart1'));
var chart2 = echarts.init(document.getElementById('chart2'));
// Configure and render the charts
var option1 = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
chart1.setOption(option1);
var option2 = {
xAxis: {
type: 'category',
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'line'
}]
};
chart2.setOption(option2);
});
</script>
</body>
</html>
再来一个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Table with ECharts Line Chart</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Bootstrap Table CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.css">
<!-- ECharts -->
<script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script>
</head>
<body>
<div class="container mt-5">
<table id="myTable" class="table table-striped table-hover">
<thead>
<tr>
<th>Date</th>
<th>Sales</th>
<th>ECharts Line Chart</th>
</tr>
</thead>
<tbody>
<!-- 数据行将在这里动态生成 -->
</tbody>
</table>
</div>
<!-- jQuery and Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Bootstrap Table JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.js"></script>
<script>
$(document).ready(function() {
// 示例数据
var data = [
{date: '2021-01-01', sales: 100, echartsData: [[0, 120], [1, 132], [2, 101], [3, 134], [4, 90], [5, 230], [6, 210]]},
{date: '2021-01-02', sales: 150, echartsData: [[0, 130], [1, 134], [2, 90], [3, 230], [4, 210], [5, 120], [6, 132]]},
{date: '2021-01-03', sales: 120, echartsData: [[0, 90], [1, 230], [2, 210], [3, 120], [4, 132], [5, 134], [6, 101]]}
];
// 初始化 Bootstrap Table
$('#myTable').bootstrapTable({
data: data,
columns: [
{field: 'date', title: 'Date'},
{field: 'sales', title: 'Sales'},
{
field: 'echartsData',
title: 'ECharts Line Chart',
formatter: function(value) {
// 返回空字符串，因为我们将在cell-render事件中处理图表的渲染
return '';
},
cellRender: function(value, row, index) {
// 创建一个ECharts实例的容器
var chartContainer = $('<div class="chart-container" style="width: 100%; height: 200px;"></div>');
$(this).append(chartContainer);
// 初始化ECharts实例
var chart = ECharts.init(chartContainer[0]);
// 设置ECharts图表的选项
var option = {
xAxis: {
type: 'category',
data: ['Category ' + (index + 1).toString().padStart(2, '0')] // 这里简单地将类别设置为Category 01, Category 02等
},
yAxis: {
type: 'value'
},
series: [{
data: value,
type: 'line'
}]
};
// 使用指定的配置项和数据显示图表
chart.setOption(option);
// 返回处理后的HTML内容
return chartContainer[0].outerHTML;
}
}
]
});
});
</script>
</body>
</html>
扫一扫
7982
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
