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

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

智能推荐

springMVC中文乱码_spring jdbc中文乱码-程序员宅基地

文章浏览阅读111次。一、页面编码<%@ page contentType="text/html;charset=UTF-8" language="java" %><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> 二、URL中的乱码　　改tomcat中server.xml中Connector_spring jdbc中文乱码

2021-06-09 Linux INIT_DELAYED_WORK schedule_work 延时队列使用学习-程序员宅基地

文章浏览阅读3.9k次，点赞5次，收藏13次。https://blog.csdn.net/qq_31339221/article/details/105057978https://blog.csdn.net/qq_31339221/article/details/105057978_init_delayed_work

linux设置双屏拼接_双屏、3屏拼接——A卡、N卡——Windows、Linux-程序员宅基地

文章浏览阅读2k次。“折腾是一种生活态度”。买了个显卡，在公司折腾了下双屏和3屏，记录一下。3个20英寸的显示器，分辨率都是1600x900。普通双屏：1个屏幕有任务栏，另一个没有任务栏，分辨率单独设置，壁纸重复显示一张，分辨率都是1600x900。双屏水平拼接：通过显卡驱动设置，操作系统检测到1个显示器，分辨率为3200x900，1个超长任务栏横跨2个屏幕，1个超长壁纸横跨2个屏幕。3屏水平拼接：分辨率为4800x..._横屏双屏壁纸拼接

反射之getDeclaredMethod和getMethod的区别以及一些小技巧_反射getdeclaredmethod-程序员宅基地

文章浏览阅读6.8k次，点赞2次，收藏8次。区别getDeclaredMethod：获取当前类的所有声明的方法，包括public、protected和private修饰的方法。需要注意的是，这些方法一定是在当前类中声明的，从父类中继承的不算，实现接口的方法由于有声明所以包括在内。getMethod：获取当前类和父类的所有public的方法。这里的父类，指的是继承层次中的所有父类。比如说，A继承B，B继承C，那么B和C都属于A的父类。..._反射getdeclaredmethod

计算机java毕业设计 JavaWeb的图书查询管理系统_怎么描述java项目中图书管理页面的内容-程序员宅基地

文章浏览阅读415次。 Hi，各位同学好呀，这里是L学长！今天向大家分享一个今年(2022)最新完成的毕业设计项目作品基于JavaWeb的图书查询管理系统学长根据实现的难度和等级对项目进行评分(最低0分，满分5分)难度系数：3分工作量：3分创新点：3分。_怎么描述java项目中图书管理页面的内容

html5安卓机判断刘海屏,Android判断是否为刘海屏-程序员宅基地

文章浏览阅读1.5k次。主要总结主流品牌小米、华为、oppo、vivo的刘海屏判断。在某些特殊页面需要适配刘海屏时，可以用以下方法判断。或者判断屏幕比例是否大于2。/*** 小米刘海屏判断.*/public static int getInt(String key,Activity activity) {int result = 0;if (isXiaomi()){try {ClassLoader classLoader..._h5中如何判断根据手机有没有刘海屏灵动岛

随便推点

开发ROS机器人的自动驾驶功能-程序员宅基地

文章浏览阅读302次，点赞7次，收藏10次。1.背景介绍自动驾驶技术是近年来迅速发展的一领域，它涉及到计算机视觉、机器学习、人工智能等多个领域的技术。在这篇文章中，我们将讨论如何使用Robot Operating System(ROS)开发机器人的自动驾驶功能。自动驾驶技术的目标是让机器人无人干预地完成驾驶任务，提高交通安全和效率。ROS是一个开源的软件框架，用于开发和控制机器人系统。它提供了一系列的库和工具，使得开发者可以轻松地构...

《Nature》发布毫米级软体机器人，可在没有任何物理干预情况下游走于人体-程序员宅基地

文章浏览阅读1.3k次。转载自公众号：机器人大讲堂概要：一直以来，微型机器人、软体机器人成为科学研究的热点，我们都期盼机器人能听从指挥的到达人体指定位置，在对人体危害最小的情况下递送药物或者切除病变组织。1966年著名作家艾萨克·阿西莫夫出版了一部著名的科幻小说《梦幻旅行》，讲述了通过科学手段把人缩小到了细胞大小，在人体内经历了梦幻般的冒险。这部小说启发了很多科学家，虽然我们很难把真人缩小到细胞大小，但制作一个微型机器人_nature的机器人

Git 生成SSH Key_git publikey生成-程序员宅基地

文章浏览阅读1.8w次。通过命令:$ ssh-keygen -t rsa -C "[email protected]" 然后回车 3,打开 Github-settings-SSH and GPG keys4，点击App Key5,创建仓库在Repository name填入testgit，其他保持默认设置，点击“Create repository”按钮，..._git publikey生成

itextpdf生成pdf中文乱码（乱码中挣扎的自述）_acrofields form = stamper.getacrofields();-程序员宅基地

文章浏览阅读1.4w次，点赞6次，收藏8次。生成pdf文件的方法有很多，网上也有很多的介绍，本文主要主要是讲生成pdf乱码的问题，而且还十分诡异，具体生成pdf的步骤同学们可以自己百度，也可以参考如下链接：https://www.cnblogs.com/LUA123/p/5108007.html 最开始我也是参考这篇文章来制作pdf的，但是坑爹的步骤开始了，一开始就是中文不显示的问题，然后我就想到了是不是字体什么的不支持的问题，..._acrofields form = stamper.getacrofields();

J.U.C之AQS源码解读以及ReentrantLock源码解读_reentrantlock 源码-程序员宅基地

文章浏览阅读1k次。文章目录前言AQS重要变量unsafeReentrantLocklock方法加锁原理公平锁非公平锁公平锁跟非公平锁的代码区别参考博客前言像我大佬烟说过：面试的时候颜值可以提高分数，没有颜值的话就需要会点J.U.C。人丑就要多读书，没错说的就是我。AQS是AbstractQueuedSynchronizer缩写，作者是@author Doug Lea并发大神，致敬一哈。J.U.C很多东..._reentrantlock 源码

测序总结，高通量测序名词-程序员宅基地

文章浏览阅读573次。主要来自：http://mp.weixin.qq.com/s/iTnsYajtHsbieGILGpUYgQ测序的黄金标准：一代测序了，故称之为黄金测序。高通量测序最近这几年很火越来越火，但是世界上更多的还是一帮天天做分子克隆、养细胞、养细菌、杂蛋白的生物学家，究其原因Sanger测序还是测序届的金标准，由于精确度高于2、3代测序且保持大白菜价格使之地位稳固。应用范围:De Novo测..._一个unigene在可以被注释到几个通路中吗