学习在echarts中优化数据视图dataView样式带表格样式,支持复制功能

news2024/11/24 19:02:48

学习在echarts中优化数据视图dataView样式 带表格样式

toolbox里有个dataView视图模式,里面的数据没有对整,影响展示效果,情形如下:
在这里插入图片描述像这种标题跟数据没有整齐对应上,看起来乱

改问题解决方案为,option 》 toolbox 》 feature 》 dataView 》optionTocontent 回调函数中处理,具体代码如下:

option = {
    color: ['#f54c49','#1976d2'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    toolbox: {
        show : true,
        feature : {
             dataView : {show: true, readOnly: false,
                 optionToContent: function (opt) {
                     var axisData = opt.xAxis[0].data;//x轴作为条件,y轴需改成yAxis[0].data;
                     var series = opt.series;
                     var tdHeads = '<td  style="padding:0 10px">名称</td>';
                     series.forEach(function (item) {
                         tdHeads += '<td style="padding: 0 10px">'+item.name+'</td>';
                     });
                     var table = '<table border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center;background-color:#666"><tbody><tr>'+tdHeads+'</tr>';
                     var tdBodys = '';
                     for (var i = 0, l = axisData.length; i < l; i++) {
                         for (var j = 0; j < series.length; j++) {
                             if(typeof(series[j].data[i]) == 'object'){
                                 tdBodys += '<td>'+series[j].data[i].value+'</td>';
                             }else{
                                 tdBodys += '<td>'+ series[j].data[i]+'</td>';
                             }
                         }
                         table += '<tr><td style="padding: 0 10px">'+axisData[i]+'</td>'+ tdBodys +'</tr>';
                         tdBodys = '';
                     }
                     table += '</tbody></table>';
                     return table;
                 }
            },
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        },
        iconStyle:{
            borderColor:'white'
        }
    }}

修改后的效果为:
在这里插入图片描述
在这里插入图片描述
如果想解决复制问题,可以给table加个样式就解决了

var table = '<table style="width:100%;user-select: text;text-align:center;"><tbody><tr>' 

主要是这个user-select: text; 就能复制了

result = {
    "title": {
        "text": "互动情况(UV)",
        "subtext": "注: 点击下方说明项可选择是否展示, UV计算方式: 各个行为对应用户总数(去重)",
        "textStyle": {
            "color": "rgba(255, 0, 0, 1)",
            "fontSize": 20
        }
    },
    "tooltip": {
        "trigger": "axis",
        "formatter": function (params) {
            let str = '';
            params.forEach((item, idx) => {
                str += `${item.marker} ${item.data.time}_${item.seriesName}:  ${item.data.value}`
                str += idx === params.length - 1 ? '' : '<br/>'
            })
            return str
        },
    },
    "legend": {
        "type": "scroll",
        "bottom": 6,
        "data": [
            "like",
            "comment",
            "collect",
            "share",
            "dislike",
            "ALL"
        ]
    },
    "toolbox": {
        "show": true,
        "feature": {
            "dataZoom": {
                "yAxisIndex": "none"
            },
            "dataView": {
                "show": true,
                "optionToContent": function (opt) {
                    // console.log(opt) 
                    //该函数可以自定义列表为table,opt是给我们提供的原始数据的obj。 可打印出来数据结构查看
                    var axisData = opt.xAxis[0].data; //坐标轴
                    var series = opt.series; //折线图的数据
                    console.log("1")
                    console.log(series)
                    console.log("2")
                    var tdHeads = `<td  style="margin-top:10px; padding: 0 15px">日期</td>`; //表头
                    var tdBodys = "";
                    series.forEach(function (item) {
                        tdHeads += `<td style="padding:5px 15px">${item.name}</td>`;
                    });
                    var table = `<table border="1" style="margin-left:20px;user-select:text;border-collapse:collapse;font-size:14px;text-align:center"><tbody><tr>${tdHeads} </tr>`;
                    for (var i = 0, l = axisData.length; i < l; i++) {
                        for (var j = 0; j < series.length; j++) {
                            if (series[j].data[i] == undefined) {
                                tdBodys += `<td>${"-"}</td>`;
                            } else {
                                tdBodys += `<td>${series[j].data[i]["value"]}</td>`;
                            }
                        }
                        table += `<tr><td style="padding: 0 15px">${axisData[i]}</td>${tdBodys}</tr>`;
                        tdBodys = "";
                    }
                    table += "</tbody></table>";
                    return table;
                },
                "contentToOption": function (HTMLDomElement, opt) {
                    return opt;
                },
                "readOnly": false
            },
            "magicType": {
                "type": [
                    "line",
                    "bar"
                ]
            },
            "restore": {
            },
            "saveAsImage": {
            }
        }
    },
    "xAxis": {
        "type": "category",
        "boundaryGap": false,
        "data": config.xAxis_data,
    },
    "yAxis": {
        "type": "value",
        "axisLabel": {
            "formatter": "{value}"
        }
    },
    "series": [
        {
            "name": "like",
            "type": "line",
            "data": config.interaction_data.like
        },
        {
            "name": "comment",
            "type": "line",
            "data": config.interaction_data.comment
        },
        {
            "name": "collect",
            "type": "line",
            "data": config.interaction_data.collect
        },
        {
            "name": "share",
            "type": "line",
            "data": config.interaction_data.share
        },
        {
            "name": "dislike",
            "type": "line",
            "data": config.interaction_data.dislike
        },
        {
            "name": "ALL",
            "type": "line",
            "data": config.interaction_data.ALL
        },
    ]
}
 
 
return result

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1183140.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

IO多路复用 Linux C Server-Client 多用户聊天系统

目录 Server-Client mutiplexingServer mutiplexingClient mutiplexing Server-Client 在Linux系统中&#xff0c;IO多路复用是一种机制&#xff0c;它允许一个进程能够监视多个文件描述符&#xff08;sockets、pipes等&#xff09;的可读、可写和异常等事件。这样&#xf…

6-会话、过滤器、监听器

6-会话、过滤器、监听器 文章目录 6-会话、过滤器、监听器会话会话概述为什么需要会话管理会话管理实现的手段 Cookie概述使用时效设置路径设置&#xff1a;特定请求才携带cookie SessionHttpSession的概述HttpSession的使用HttpSession的使用-getSession()方法原理HttpSession…

Django快速指南

开始构建 Web 应用程序不仅需要对编码和设计原则有深入的了解&#xff0c;还需要对安全性和性能坚定不移的承诺。在数字化存在至关重要的时代&#xff0c;构建强大而高效的在线平台的能力是一项具有不可估量价值的技能。本教程专门面向网络工匠&#xff0c;即那些希望将技术线索…

提高 bbr 的灵敏性

bbr draft 给出了 MaxBwFilterLen 的定义&#xff1a; MaxBwFilterLen: The filter window length for BBR.MaxBwFilter 2 (representing up to 2 ProbeBW cycles, the current cycle and the previous full cycle). 从 v1 到 v3 版本&#xff0c;该值均只跟状态机而不跟实际&…

#龙迅视频转换IC LT7911D是一款高性能Type-C/DP/EDP 转MIPI®DSI/CSI/LVDS 芯片,适用于VR/显示应用。

1.说明 应用功能&#xff1a;LT7911D适用于DP1.2转MIPIDSI/MIPICSI/LVDS&#xff0c;EDP转MIPIDSI/MIPICSI/LVDS&#xff0c;TYPE-C转MIPIDSI/MIPICSI/LVDS应用方案 分辨率&#xff1a;单PORT高达4K30HZ&#xff0c;双PORT高达4K 60HZ 工作温度范围&#xff1a;−40C to 85C 产…

Discourse 如何在 header 上添加 HTML

虽然现在大部分网站都开始支持使用 CDN 的网站校验了。 但还有些网站在你需要他们提供服务的时候要求使用 header 的 meta 数据校验。 Discourse 是可以轻松的实现上面的功能的。 添加方法 选择你的 Discourse 网站下的自定义。 然后在左侧选择你需要添加的主题。 为了方便…

【EI会议征稿】第三届电气、电力与电网系统国际会议(ICEPGS 2024)

第三届电气、电力与电网系统国际会议&#xff08;ICEPGS 2024&#xff09; 2024 3rd International Conference on Electrical, Power and Grid Systems 第三届电气、电力与电网系统国际会议&#xff08;ICEPGS 2024&#xff09;将于2024年1月26-28日在马来西亚吉隆坡隆重举行…

计算机毕业设计 基于SpringBoot的私人西服定制系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

【hexo博客配置】hexo icarus主题配置

配置icarus 步骤一&#xff1a;下载icarus github网址&#xff1a;[hexo-theme-icarus](ppoffice/hexo-theme-icarus: A simple, delicate, and modern theme for the static site generator Hexo. (github.com)) 可以从这个网址上下载zip文件&#xff0c;解压后&#xff0c…

【JAVA学习笔记】65 - 文件类,IO流--节点流、处理流、对象流、转换流、打印流

项目代码 https://github.com/yinhai1114/Java_Learning_Code/tree/main/IDEA_Chapter19/src/com/yinhai 文件 一、文件&#xff0c;流 文件,对我们并不陌生&#xff0c;文件是保存数据的地方,比如大家经常使用的word文档,txt文件,excel文件..都是文件。它既可以保存一张图片…

HK WEB3 MONTH Polkadot Hong Kong 火热报名中!

HK Web3 Month 11月除了香港金融科技周外&#xff0c;HK Web3 Month又是一大盛事&#xff0c;从10月29日开始开幕直到11月18日结束。此次将齐聚世界各地的Web3产业从业者、开发者、社群成员和学生来参与本次盛会。除外&#xff0c;超过75位产业知名的讲者与超过50场工作坊将为…

【笔记】回顾JavaWeb结合自身开发的项目——分层解耦与IOC、MySQL简单查询

分层解耦的三层架构 如下图所示是手术训练系统中的实现&#xff1a; 如果你需要从new EmpServiceA()变为new EmpServiceB()&#xff0c;那么必然需要修改Service和Controller层的代码&#xff0c;那么如果我们不new 这个对象呢&#xff1f;是不是就不需要依赖Controller层。 …

Kafka -- 架构、分区、副本

1、Kafka的架构&#xff1a; 1、producer&#xff1a;消息的生产者 2、consumer&#xff1a;消息的消费者 3、broker&#xff1a;kafka集群的服务者&#xff0c;一个broker就是一个节点&#xff0c;主要是负责处理消息的读、写的请求和存储消息。在kafka cluster中包含很多的br…

2023年10月Web3行业月度发展报告区块链篇 |陀螺研究院

10月是加密动荡的一月&#xff0c;围绕比特币现货ETF市场激荡不断&#xff0c;先有Cointelegraph“假消息”搅动市场以致合约遭血洗1.89亿美元&#xff0c;后有灰度、DCTT接二连三释放利好&#xff0c;市场情绪迅速激化&#xff0c;流动性显著提升&#xff0c;USDT 总市值突破8…

全场景数实融合聚焦北京——2023(第六届)行业信息技术应用创新大会隆重召开

2023年11月3日,2023(第六届)行业信息技术应用创新大会在北京裕龙国际酒店隆重举行。中国当前正处于经济转型的关键时期,数字经济的发展对中国新经济和新格局的形成至关重要,而信息技术是数字经济发展过程中必不可少的技术铺垫,企业对信息技术的应用非常依赖业务场景。因此,本届…

SPASS-数据收集及预处理

统计数据的收集 问卷设计 问卷构成 &#xff08;1&#xff09;标题 &#xff08;2&#xff09;导语&#xff08;前言&#xff09; &#xff08;3&#xff09;正文 &#xff08;4&#xff09;结束语 问卷的问题类型 &#xff08;1&#xff09;封闭型问题 &#xff08;2&…

Google关键词挖掘方法

Google关键词挖掘是一种用于搜索引擎优化&#xff08;SEO&#xff09;和市场营销的重要工具。通过挖掘与目标主题相关的关键词&#xff0c;您可以了解潜在客户的需求和兴趣&#xff0c;从而制定更有效的内容策略和广告计划。本文小编将讲讲Google关键词挖掘的方法。 一、Googl…

【Linux系统】文件 / 文件夹权限:chmod

文件 / 文件夹权限&#xff1a;chmod 1.介绍 chmod 命令用于改变文件或目录的访问权限。 改变文件权限 chmod 777 xxx.txt改变文件夹下所有文件的权限 chmod -R 777 *-R 是递归遍历子目录&#xff0c;* 通配符代表要操作的文件。 777 777 777 有 3 3 3 位&#xff0c;最高…

Docker:容器网络互联

Docker&#xff1a;容器网络互联 1. 网络2. 自定义网络 1. 网络 默认情况下&#xff0c;所有容器都是以bridge方式连接到Docker的一个虚拟网桥上&#xff1a; [root172 demo]# docker inspect mysql [root172 demo]# docker inspect dd 在dd容器中ping mysql 但是存在问题&a…

文件分片上传设计

shigen日更文章的博客写手&#xff0c;擅长Java、python、vue、shell等编程语言和各种应用程序、脚本的开发。记录成长&#xff0c;分享认知&#xff0c;留住感动。 现在是接近凌晨了&#xff0c;突然有伙伴给我提到了文件分片上传的事情&#xff0c;我一想&#xff0c;这个我熟…