我是靠谱客的博主 开心小丸子,最近开发中收集的这篇文章主要介绍echarts toolbar的数据视图改写成表格,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: {
              show: true, readOnly: true,
              optionToContent: function (opt) {
                var axisData = opt.xAxis[0].data;
                var series = opt.series;
                // console.log(series);
                // console.log(axisData);
                var table =
                  `<table border="1px solid #ccc" cellspacing="0" cellpadding="10" style="font-size:14px">
                  <thead style="background:#ccc">
                    <tr>`;
                var th = "", tr = "", td = "";
                for (var i = 0; i < axisData.length; i++) {
                  th += `<th style="padding:5px">${axisData[i]}</th>`
                }
                series.forEach(item => {
                  item.data.forEach(item2 => {
                    td += `<td style="padding:2px 0">${item2}</td>`
                  })
                  tr += `<tr><td>${item.name}</td>${td}</tr>`;
                  td = ""
                })
                console.log(tr);
                table = table + `<th></th>` + th + `</tr></thead>` + `<tbody>` + tr + `</tbody></table>`;
                return table;
              }
            },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },

最后

以上就是开心小丸子为你收集整理的echarts toolbar的数据视图改写成表格的全部内容,希望文章能够帮你解决echarts toolbar的数据视图改写成表格所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(36)

评论列表共有 0 条评论

立即
投稿
返回
顶部