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

相关文章

golang内存对齐的项目实践

《golang内存对齐的项目实践》本文主要介绍了golang内存对齐的项目实践,内存对齐不仅有助于提高内存访问效率,还确保了与硬件接口的兼容性,是Go语言编程中不可忽视的重要优化手段,下面就来介绍一下... 目录一、结构体中的字段顺序与内存对齐二、内存对齐的原理与规则三、调整结构体字段顺序优化内存对齐四、内

Redis的数据过期策略和数据淘汰策略

《Redis的数据过期策略和数据淘汰策略》本文主要介绍了Redis的数据过期策略和数据淘汰策略,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录一、数据过期策略1、惰性删除2、定期删除二、数据淘汰策略1、数据淘汰策略概念2、8种数据淘汰策略

轻松上手MYSQL之JSON函数实现高效数据查询与操作

《轻松上手MYSQL之JSON函数实现高效数据查询与操作》:本文主要介绍轻松上手MYSQL之JSON函数实现高效数据查询与操作的相关资料,MySQL提供了多个JSON函数,用于处理和查询JSON数... 目录一、jsON_EXTRACT 提取指定数据二、JSON_UNQUOTE 取消双引号三、JSON_KE

Python给Excel写入数据的四种方法小结

《Python给Excel写入数据的四种方法小结》本文主要介绍了Python给Excel写入数据的四种方法小结,包含openpyxl库、xlsxwriter库、pandas库和win32com库,具有... 目录1. 使用 openpyxl 库2. 使用 xlsxwriter 库3. 使用 pandas 库

SpringBoot定制JSON响应数据的实现

《SpringBoot定制JSON响应数据的实现》本文主要介绍了SpringBoot定制JSON响应数据的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们... 目录前言一、如何使用@jsonView这个注解?二、应用场景三、实战案例注解方式编程方式总结 前言

使用Python在Excel中创建和取消数据分组

《使用Python在Excel中创建和取消数据分组》Excel中的分组是一种通过添加层级结构将相邻行或列组织在一起的功能,当分组完成后,用户可以通过折叠或展开数据组来简化数据视图,这篇博客将介绍如何使... 目录引言使用工具python在Excel中创建行和列分组Python在Excel中创建嵌套分组Pyt

在Rust中要用Struct和Enum组织数据的原因解析

《在Rust中要用Struct和Enum组织数据的原因解析》在Rust中,Struct和Enum是组织数据的核心工具,Struct用于将相关字段封装为单一实体,便于管理和扩展,Enum用于明确定义所有... 目录为什么在Rust中要用Struct和Enum组织数据?一、使用struct组织数据:将相关字段绑

在Mysql环境下对数据进行增删改查的操作方法

《在Mysql环境下对数据进行增删改查的操作方法》本文介绍了在MySQL环境下对数据进行增删改查的基本操作,包括插入数据、修改数据、删除数据、数据查询(基本查询、连接查询、聚合函数查询、子查询)等,并... 目录一、插入数据:二、修改数据:三、删除数据:1、delete from 表名;2、truncate

如何利用Python实现给Excel表格截图

《如何利用Python实现给Excel表格截图》这篇文章主要为大家详细介绍了如何利用Python实现给Excel表格截图功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 我搜索了网络上的方案,感觉把 Excel 表格转换为 html 再用 platwright 截图是比China编程较顺

Java实现Elasticsearch查询当前索引全部数据的完整代码

《Java实现Elasticsearch查询当前索引全部数据的完整代码》:本文主要介绍如何在Java中实现查询Elasticsearch索引中指定条件下的全部数据,通过设置滚动查询参数(scrol... 目录需求背景通常情况Java 实现查询 Elasticsearch 全部数据写在最后需求背景通常情况下