带有表格的Echarts图表随便写写

最新推荐文章于 2024-05-16 22:32:26 发布

李浩东@

最新推荐文章于 2024-05-16 22:32:26 发布

阅读量432

点赞数

文章标签： echarts arcgis 前端

本文链接：https://blog.csdn.net/m0_64180190/article/details/133742557

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Echarts 图表和表格示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<style>
#chartContainer {
width: 600px;
height: 400px;
}

table {
border-collapse: collapse;
margin-top: 20px;
}

th, td {
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="chartContainer"></div>

// 使用配置项和数据渲染图表
myChart.setOption(option);

// 创建表格
var table = document.createElement('table');

// 创建表头
var thead = document.createElement('thead');
var tr = document.createElement('tr');
var th1 = document.createElement('th');
th1.innerHTML = 'Header 1';
var th2 = document.createElement('th');
th2.innerHTML = 'Header 2';
tr.appendChild(th1);
tr.appendChild(th2);
thead.appendChild(tr);

// 创建表格内容
var tbody = document.createElement('tbody');
for (var i = 0; i < 3; i++) {
var tr = document.createElement('tr');
var td1 = document.createElement('td');
td1.innerHTML = 'Data ' + (i + 1);
var td2 = document.createElement('td');
td2.innerHTML = 'Data ' + (i + 1) * 2;
tr.appendChild(td1);
tr.appendChild(td2);
tbody.appendChild(tr);
}

// 将表头和表格内容添加到表格中
table.appendChild(thead);
table.appendChild(tbody);

// 将表格添加到页面中
document.body.appendChild(table);
</script>
</body>
</html>

李浩东@

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
带有表格的Echarts图表随便写写

title>Echarts 图表和表格示例</title>// 定义图表的类型（例如柱状图、折线图等）// 创建 Echarts 图表实例。// 将表头和表格内容添加到表格中。// 使用配置项和数据渲染图表。// 定义图表的配置项和数据。// 将表格添加到页面中。
复制链接

扫一扫