Echarts数据视图样式重写_echarts 样式复写-程序员宅基地

重写 optionToContent: function(opt) {...}

在使用Echarts 组件时，在数据视图显示的时候会发现表格数据没有行列对齐显示，如下。

可见，与预期的表格形式有很大的出路，通过查找发现在官方的文档有如下的说明：

从而，只需要按照自己的格式重写 optionToContent: function(opt) {...} ，其中opt就是视图option对象，只需从中取出相应的值填入表格即可

opt对象：

重写的代码如下（bootstrap 表格样式）：

DataView.defaultOption = {
        show: true,
        readOnly: false,
        // optionToContent: null,
        optionToContent: function (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 style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
                tdBodys = '';
            }

            table += '</tbody></table></div>';
            return table;
        },
        contentToOption: null,

        icon: 'M17.5,17.3H33 M17.5,17.3H33 M45.4,29.5h-28 M11.5,2v56H51V14.8L38.4,2H11.5z M38.4,2.2v12.7H51 M45.4,41.7h-28',
        title: clone(dataViewLang.title),
        lang: clone(dataViewLang.lang),
        backgroundColor: '#fff',
        textColor: '#000',
        textareaColor: '#fff',
        textareaBorderColor: '#333',
        buttonColor: '#c23531',
        buttonTextColor: '#fff'
    };

重写后的数据表格视图：

另外，想要将数据视图的更新按钮隐藏，只需要将dataView里面的readonly置为true

toolbox: {
        show: true,
        right: '1%',
        feature: {
            dataView: {show: true, readOnly: true},
            saveAsImage: {show: true}
        }
},

本文链接：https://blog.csdn.net/wangchaox123/article/details/90486825

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

7-10 集合划分 (10 分)_7个元素的集合有多少种划分-程序员宅基地

文章浏览阅读973次，点赞3次，收藏3次。当n=4 时，集合{1,2,3,4}可以划分为15个不同的非空子集如下：{{1}，{2}，{3}，{4}}，{{1，2}，{3}，{4}}，{{1，3}，{2}，{4}}，{{1，4}，{2}，{3}}，{{2，3}，{1}，{4}}，{{2，4}，{1}，{3}}，{{3，4}，{1}，{2}}，{{1，2}，{3，4}}，{{1，3}，{2，4}}，{{1，4}，{2，3}}，{{1，2，3}，{4}}，{{1，2，4}，{3}}，{{1，3，4}，{2}}，{{2，3，4}_7个元素的集合有多少种划分

全网唯一的echarts树状图——单个节点样式修改_echarts 怎么在修改节点文本使用dom模板-程序员宅基地

文章浏览阅读6.2k次，点赞3次，收藏11次。前段时间一直在用Echarts做一个树状图，本来是挺简单的，Echarts官网也有，不过官网上的节点数据是封装在一个Json文件中去，这里就不再赘述，有兴趣自行去官网查看链接：https://echarts.apache.org/examples/zh/editor.html?c=tree-basicJson数据链接：https://echarts.apache.org/examples/da..._echarts 怎么在修改节点文本使用dom模板

php include传参数,解决PHP的include带参数的有关问题-程序员宅基地

文章浏览阅读1k次。php的include可以载入一个外部php文件，其参数是一个文件名，既然是文件名，就不能带参数了。php中，如果include载入的文件一定要带参数，就只有一种办法，即这个参数是一个全路径的URL地址。例如：include "http://localhost/aaa.php?id=1";　//正确include "aaa.php?id=1";　//错误其实include本义就只是用来载入一个外部..._php include 传参

iOS越狱开发常用检测Hook 代码闪退检测断点_ios hook exit-程序员宅基地

文章浏览阅读1.8k次。__attribute__((constructor)) static void entry(){ rebind_symbols((struct rebinding[1]){{"abort", abort_hook, (void *)&abort_old}}, 1); rebind_symbols((struct rebinding[2]){{"exit", ..._ios hook exit

python转dll_python调用dll方法-程序员宅基地

文章浏览阅读376次。【转载】python调用dll方法python调用dll方法来自http://blog.csdn.net/lf8289/article/details/2322550分类：python2008-04-2412:276833人阅读评论(6)收藏举报在python中调用dll文件中的接口比较简单，实例代码如下：如我们有一个test.dll文件，内部定义如下：extern"C"{int__st..._python 转dll 第三方库

hihocoder 1388 Periodic Signal FFT-程序员宅基地

文章浏览阅读204次。最近做了几个FFT的题，实在是如果不记录一下就转头忘了 T T传送门题意：求思路：将上式拆开，那么就变成了，前两项都是固定的值那么我们求的最大值就可以了，n的数据范围为6*1e4，所以要用FFT优化下面是我现在的理解，如果有错还恰巧被大佬看到了，求指出T T如果有两个数组：A：1到n-1；B：1到m-1那么得到的卷积C：1到m+n-2，其中，注意这里