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

相关文章

批量导入txt数据到的redis过程

《批量导入txt数据到的redis过程》用户通过将Redis命令逐行写入txt文件,利用管道模式运行客户端,成功执行批量删除以Product*匹配的Key操作,提高了数据清理效率... 目录批量导入txt数据到Redisjs把redis命令按一条 一行写到txt中管道命令运行redis客户端成功了批量删除k

SpringBoot多环境配置数据读取方式

《SpringBoot多环境配置数据读取方式》SpringBoot通过环境隔离机制,支持properties/yaml/yml多格式配置,结合@Value、Environment和@Configura... 目录一、多环境配置的核心思路二、3种配置文件格式详解2.1 properties格式(传统格式)1.

解决pandas无法读取csv文件数据的问题

《解决pandas无法读取csv文件数据的问题》本文讲述作者用Pandas读取CSV文件时因参数设置不当导致数据错位,通过调整delimiter和on_bad_lines参数最终解决问题,并强调正确参... 目录一、前言二、问题复现1. 问题2. 通过 on_bad_lines=‘warn’ 跳过异常数据3

C#监听txt文档获取新数据方式

《C#监听txt文档获取新数据方式》文章介绍通过监听txt文件获取最新数据,并实现开机自启动、禁用窗口关闭按钮、阻止Ctrl+C中断及防止程序退出等功能,代码整合于主函数中,供参考学习... 目录前言一、监听txt文档增加数据二、其他功能1. 设置开机自启动2. 禁止控制台窗口关闭按钮3. 阻止Ctrl +

java如何实现高并发场景下三级缓存的数据一致性

《java如何实现高并发场景下三级缓存的数据一致性》这篇文章主要为大家详细介绍了java如何实现高并发场景下三级缓存的数据一致性,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 下面代码是一个使用Java和Redisson实现的三级缓存服务,主要功能包括:1.缓存结构:本地缓存:使

在MySQL中实现冷热数据分离的方法及使用场景底层原理解析

《在MySQL中实现冷热数据分离的方法及使用场景底层原理解析》MySQL冷热数据分离通过分表/分区策略、数据归档和索引优化,将频繁访问的热数据与冷数据分开存储,提升查询效率并降低存储成本,适用于高并发... 目录实现冷热数据分离1. 分表策略2. 使用分区表3. 数据归档与迁移在mysql中实现冷热数据分

C#解析JSON数据全攻略指南

《C#解析JSON数据全攻略指南》这篇文章主要为大家详细介绍了使用C#解析JSON数据全攻略指南,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、为什么jsON是C#开发必修课?二、四步搞定网络JSON数据1. 获取数据 - HttpClient最佳实践2. 动态解析 - 快速

使用Go实现文件复制的完整流程

《使用Go实现文件复制的完整流程》本案例将实现一个实用的文件操作工具:将一个文件的内容完整复制到另一个文件中,这是文件处理中的常见任务,比如配置文件备份、日志迁移、用户上传文件转存等,文中通过代码示例... 目录案例说明涉及China编程知识点示例代码代码解析示例运行练习扩展小结案例说明我们将通过标准库 os

MyBatis-Plus通用中等、大量数据分批查询和处理方法

《MyBatis-Plus通用中等、大量数据分批查询和处理方法》文章介绍MyBatis-Plus分页查询处理,通过函数式接口与Lambda表达式实现通用逻辑,方法抽象但功能强大,建议扩展分批处理及流式... 目录函数式接口获取分页数据接口数据处理接口通用逻辑工具类使用方法简单查询自定义查询方法总结函数式接口

SQL中如何添加数据(常见方法及示例)

《SQL中如何添加数据(常见方法及示例)》SQL全称为StructuredQueryLanguage,是一种用于管理关系数据库的标准编程语言,下面给大家介绍SQL中如何添加数据,感兴趣的朋友一起看看吧... 目录在mysql中,有多种方法可以添加数据。以下是一些常见的方法及其示例。1. 使用INSERT I