echarts dataView数据对齐及表格复制

2023-12-24 22:08

本文主要是介绍echarts dataView数据对齐及表格复制,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

参考:https://segmentfault.com/a/1190000019547857

上面的链接介绍了"数据视图"表格数据对齐显示的问题(使用'\t'的小技巧),但是还是不能下载表格或者复制表格,如果想解决复制问题,可以给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

这篇关于echarts dataView数据对齐及表格复制的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/533302

相关文章

MySQL 删除数据详解(最新整理)

《MySQL删除数据详解(最新整理)》:本文主要介绍MySQL删除数据的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、前言二、mysql 中的三种删除方式1.DELETE语句✅ 基本语法: 示例:2.TRUNCATE语句✅ 基本语

MyBatisPlus如何优化千万级数据的CRUD

《MyBatisPlus如何优化千万级数据的CRUD》最近负责的一个项目,数据库表量级破千万,每次执行CRUD都像走钢丝,稍有不慎就引起数据库报警,本文就结合这个项目的实战经验,聊聊MyBatisPl... 目录背景一、MyBATis Plus 简介二、千万级数据的挑战三、优化 CRUD 的关键策略1. 查

python实现对数据公钥加密与私钥解密

《python实现对数据公钥加密与私钥解密》这篇文章主要为大家详细介绍了如何使用python实现对数据公钥加密与私钥解密,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录公钥私钥的生成使用公钥加密使用私钥解密公钥私钥的生成这一部分,使用python生成公钥与私钥,然后保存在两个文

mysql中的数据目录用法及说明

《mysql中的数据目录用法及说明》:本文主要介绍mysql中的数据目录用法及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、背景2、版本3、数据目录4、总结1、背景安装mysql之后,在安装目录下会有一个data目录,我们创建的数据库、创建的表、插入的

Navicat数据表的数据添加,删除及使用sql完成数据的添加过程

《Navicat数据表的数据添加,删除及使用sql完成数据的添加过程》:本文主要介绍Navicat数据表的数据添加,删除及使用sql完成数据的添加过程,具有很好的参考价值,希望对大家有所帮助,如有... 目录Navicat数据表数据添加,删除及使用sql完成数据添加选中操作的表则出现如下界面,查看左下角从左

SpringBoot中4种数据水平分片策略

《SpringBoot中4种数据水平分片策略》数据水平分片作为一种水平扩展策略,通过将数据分散到多个物理节点上,有效解决了存储容量和性能瓶颈问题,下面小编就来和大家分享4种数据分片策略吧... 目录一、前言二、哈希分片2.1 原理2.2 SpringBoot实现2.3 优缺点分析2.4 适用场景三、范围分片

Java Web实现类似Excel表格锁定功能实战教程

《JavaWeb实现类似Excel表格锁定功能实战教程》本文将详细介绍通过创建特定div元素并利用CSS布局和JavaScript事件监听来实现类似Excel的锁定行和列效果的方法,感兴趣的朋友跟随... 目录1. 模拟Excel表格锁定功能2. 创建3个div元素实现表格锁定2.1 div元素布局设计2.

Redis分片集群、数据读写规则问题小结

《Redis分片集群、数据读写规则问题小结》本文介绍了Redis分片集群的原理,通过数据分片和哈希槽机制解决单机内存限制与写瓶颈问题,实现分布式存储和高并发处理,但存在通信开销大、维护复杂及对事务支持... 目录一、分片集群解android决的问题二、分片集群图解 分片集群特征如何解决的上述问题?(与哨兵模

浅析如何保证MySQL与Redis数据一致性

《浅析如何保证MySQL与Redis数据一致性》在互联网应用中,MySQL作为持久化存储引擎,Redis作为高性能缓存层,两者的组合能有效提升系统性能,下面我们来看看如何保证两者的数据一致性吧... 目录一、数据不一致性的根源1.1 典型不一致场景1.2 关键矛盾点二、一致性保障策略2.1 基础策略:更新数

Oracle 数据库数据操作如何精通 INSERT, UPDATE, DELETE

《Oracle数据库数据操作如何精通INSERT,UPDATE,DELETE》在Oracle数据库中,对表内数据进行增加、修改和删除操作是通过数据操作语言来完成的,下面给大家介绍Oracle数... 目录思维导图一、插入数据 (INSERT)1.1 插入单行数据,指定所有列的值语法:1.2 插入单行数据,指