Echarts柱形图数据表格表格化

最新推荐文章于 2025-05-19 11:17:04 发布

转载最新推荐文章于 2025-05-19 11:17:04 发布 · 2.6k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b440ae9e51d45198469544c

文章标签：

#javascript #ViewUI

本文介绍了一种使用JavaScript将图表数据转换为HTML表格的方法，并提供了具体的实现代码。通过遍历图表的轴数据和系列数据，可以生成带有样式控制的响应式表格。

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

JS：

        if (res.data.code === '00') {
          let dataView = {
            show : true,
            readOnly : true,
            optionToContent : function(opt) {
            //console.info(opt);
            var axisData = opt.xAxis[0].data;
            var series = opt.series;
            var tdHeaders = '<td>时间</td>'; //表头
            series.forEach(function(item) {
              tdHeaders += '<td>' + item.name + '</td>'; //组装表头
            });
            var table = '<div class="table-responsive"><table class="table table-bordered table-striped table-hover" style="text-align:center"><tbody><tr>' + tdHeaders + '</tr>';
            var tdBodys = ''; //数据
            for (let i = 0, l = axisData.length; i < l; i++) {
              for (let j = 0; j < series.length; j++) {
                tdBodys += '<td>' + series[j].data[i] + '</td>'; //组装表数据
              }
              table += '<tr><td>' + axisData[i] + '</td>' + tdBodys + '</tr>';
              tdBodys = '';
            }
            table += '</tbody></table></div>';
            return table;
          }
        }
复制代码

Css:

        .table-responsive {
            min-height: .01%;
            overflow-x: auto;
          }
          .table-striped > tbody > tr:nth-of-type(odd) {
            background-color: #f9f9f9;
          }
          .table-responsive .table-bordered {
            border: 1px solid #ddd;
          }
          .table-responsive .table {
            width: 100%;
            max-width: 100%;
            margin-bottom: 20px;
          }
          .table-responsive table {
            background-color: transparent;
          }
          .table-responsive table {
            border-spacing: 0;
            border-collapse: collapse;
          }
          .table-responsive tbody {
            display: table-row-group;
            vertical-align: middle;
            border-color: inherit;
          }
          .table-responsive tr {
            display: table-row;
            vertical-align: inherit;
            border-color: inherit;
          }
          .table-responsive .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
            padding: 8px;
            line-height: 1.42857143em;
            vertical-align: top;
            border-top: 1px solid #ddd;
          }复制代码