Echarts中DataView显示Excel表格

echarts自定义视图数据(dataView) 因为我采用的是数组赋值的方式,因故代码做了稍许改动,以下是我的代码(重点是toolbox[工具] feature[自定义组件] dataView[数据视图] 中的optionToContent函数内)首先,先展示一下我这边的数据(数组格式生成,没有给x轴赋data),因为有些曲线在某些下标中是没有值的情况下。然后查询资料,发现echarts中;它将自动采用下标赋值的方式去生成数据视图。如图所示:因为数据定义的时候,部分曲线下标是没有值的,如果按照x轴下标自动生成的话,这边数据将不匹配;... 阅读详情

   最近项目用到功能:Echarts显示图表后,点击数据视图后显示对应的电子表格,并可以下载,具体如下:


DataView

将数据通过Echarts图表的形式展现出来

单击图表的数据视图用layer弹出新页面

新页面用handsontable显示Excel样式电子表格

电子表格可以下载(只兼容Google最新浏览器)

技术栈

  • echarts 3.6.2 展示图表
  • handsontable 0.32.0 展示Excel样式电子表格
  • layer-v3.0.3 Web弹层组件
  • localStorage HTML5在客户端存储数据

Echarts.js源码修改的地方

在3.6.2源码73097行:

 if (typeof optionToContent === 'function') {
	var htmlOrDom = optionToContent(api.getOption());
	if (typeof htmlOrDom === 'string') {
		viewMain.innerHTML = htmlOrDom;
	}
	else if (zrUtil.isDom(htmlOrDom)) {
		viewMain.appendChild(htmlOrDom);
	}
}

改为如下:

if (typeof optionToContent === 'function') {
   /* var htmlOrDom = optionToContent(api.getOption());
	if (typeof htmlOrDom === 'string') {
		viewMain.innerHTML = htmlOrDom;
	}
	else if (zrUtil.isDom(htmlOrDom)) {
		viewMain.appendChild(htmlOrDom);
	}*/
	var toGo='';
	toGo=optionToContent(api.getOption());
	//弹出即全屏
	var index = layer.open({
	  type: 2,
	  title: lang[0],
	  content: encodeURI(toGo),
	  area: ['100%' , '520px'],
	  anim :-1,
	  maxmin: true
	});
	layer.full(index);
	return ;
}

Echarts实例option设置

在Echarts实例中设置option的toolbox如下:

toolbox: {
	show: true,
	feature: {
	   /* dataZoom: {
			yAxisIndex: 'none'
		},*/
		dataView: {
			lang: ['预约日报表', '关闭', '下载'],
			readOnly: false,
			backgroundColor:'#39314a',
			textColor:'#fff',
			optionToContent: function(opt) {
				var otc='graph.html?formData=yuYueData&title=预约日报表';
				return otc;                
			}
		},
		magicType: {type: ['line', 'bar']},
		restore: {},
		saveAsImage: {}
	}
}


项目地址:https://github.com/bbc2005/DataView

echarts实现表格图例 饼图的表格图例 Pie实现表格图例,点击某行,图表显示除这条之外剩下的数据(会有多条被选中的情况) 阅读详情

相关推荐

echarts带table表格展示

整体思路就是用graphic这个属性去画线 表格里的值用的定位写的。

Z_Gleng的博客 4942

利用Echarts快速制作表格

1.Echarts图表库 https://echarts.apache.org/zh/index.html 2.下载echarts.min.js 3.Echarts图表库里面有快速入门,代码可以直接复制粘贴 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Echarts图表库</title> <!-- 1引入图文库 --&...

qq_44850339的博客 9900

Echarts数据视图格式化为Excel并导出

实现效果: 1. 自定义toolbox.feature.dataview; 2. 重新定义Echarts自带数据视图的刷新按钮为”导出Excel“; 3. 组装table; 贴部分代码: 饼图、矩形树图、china地图可使用使用以下代码(data[{name:xx,value:xx}]): //饼状图dataView function pieDataView(fi...

MaxVelika的博客 5156

如何绘制一个echarts带表格的图表

echarts带表格

m0_50478723的博客 3383

echarts数据视图对不齐且复制到excel格式错误

echarts数据视图对不齐且复制到excel格式错误

K1nney的博客 748

前端相关知识

vue

星光不负赶路人~ 1459

echarts将数据导出为Excel文件(重写dataview方法)

echarts将数据导出为Excel文件(重写dataview方法)前言代码实现效果 前言 本文在vue下的echarts图形插件中以存前端的方式实现将数据导出为Excel文件 代码 本文实现的是vue前端项目,一下代码均为vue下的代码 开头记得导入以下两个包,如果没安装的话在终端输入npm install file-saver以及npm install xlsx安装 <script> import FileSaver from "file-saver"; import XLSX fr

qq_43605229的博客 9641

从零开始学嵌入式之STM32——1.什么是STM32

它是ST公司推出的一系列单片机的统称。ST----指的是ST公司----意法半导体。意法半导体,成立于1987年,是由意大利的SGS微电子公司和法国的Thomson半导体公司合并而成。ARM目前主要是ARM架构处理器及外围组件的电路设计方案,知识产权授权的形式收取费用,其他公司根据ARM的方案设计出CPU产品。,它以应用为核心,软硬件可裁剪,旨在实现对设备的控制、监测或辅助功能,区别于通用计算机(如 PC、服务器)的 “一机多用” 属性。在嵌入式领域,目前主流的是cortex-M3内核推出的芯片。

qshdyy的博客 1854

[echarts]数据视图导出excel(纯前端)

[echarts]数据视图导出excel(纯前端)

ZhiMaHuyizhi的博客 1976

数据结构实验1.2—高精度计算PI值(西工大)

这是数据结构第二题的题目,是让我们根据用户的需求来计算派的值 这是题目的详细描述,刚看到这道题的时候,我是真的头大,完全没有思路,于是查找了一些大佬的笔记后才开始编写 这是我在写这些代码是所运用到的数学反三角函数幂次展开式的知识。 下面是正确的代码以及我的一些见解,和需要注意的一些地方。希望能对你有所帮助。如有更加精简的算法,请在评论区留下你的算法!!!谢谢!!! #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdl

abcdef0623的博客 5831

echarts显示数据视图并可以导出excel

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Sorts</title> <script src="../../static/js/echarts.js" type="text/javascript...

qq_45128278的博客 1949

YoloV10改进策略:卷积篇|基于PConv的二次创新|附结构图|性能和精度得到大幅度提高(独家原创)

在PConv的基础上做了二次创新,创新后的模型不仅在精度和速度上有了质的提升,还可以支持Stride为2的降采样。改进方法简单高效,需要发论文的同学不要错过!

m0_47867638的博客 1095

多种echart图转表格

项目中提到了一个需求,想要看到echarts图表中的数据,这里使用toolbox工具栏渲染出一个table表格,并加入导出excel功能。所以就用到echarts配置项中的toolbox工具栏,使用 jquery.table2excel.js实现 导出excel功能。首先引入jquery.js,再次引入 jquery.table2excel.js。

qq_63431773的博客 1769

RK3566/RK3568 Android 11 无操作自动隐藏导航栏、底部上拉显示导航栏

RK3566/RK3568 Android 11 定制大全在系统服务中增加无操作自动隐藏导航栏方法,在上层app动态调用无操作自动隐藏导航栏方法,系统会在5秒无操作后自动隐藏导航栏,隐藏导航栏后从底部上拉可显示导航栏,设备关机和重启后也能继续生效。

qq_23921815的博客 1260

VisionTransformer改进(11):结合CoordAtt注意力机制

​​CoordAtt模块​​:一个轻量级的坐标注意力机制​​ViT模型​​:基于标准Vision Transformer架构,但集成了CoordAtt模块模型最终通过CNNModel函数封装,虽然名称是CNN,但实际上是一个Transformer模型。引入了轻量级的CoordAtt注意力机制,增强了模型对空间位置信息的捕捉能力保持了ViT的主要优势,同时通过注意力机制提升了特征表示能力设计简洁高效,适合作为基础模型进行进一步研究和应用。

2401_82355416的博客 701

Python数据可视化入门:用Pyecharts绘制交互式折线图

数据可视化是将抽象数据转化为直观图形的技术,其核心原理是通过视觉编码(如位置、长度、颜色)映射数据维度,帮助人们快速识别模式、趋势和异常。在Python生态中,Pyecharts作为ECharts的Python接口,凭借其出色的交互性和默认美观的样式,成为快速实现专业级可视化的利器。它特别适合处理JSON等结构化数据,能够轻松完成从数据解析到图表渲染的完整流程。对于数据分析、业务监控和报告展示等场景,掌握Pyecharts绘制折线图等基础图表,是构建数据驱动决策能力的关键一步。本文将以折线图为例,详解如何利

weixin_33978044的博客 555

Open3D 点云数学形态学滤波(Python版本)

Open3D 点云数学形态学滤波(Python版本)

dayuhaitang1的博客 1396

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

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

徊忆羽菲 2480

移位寄存器——用Verilog实现串入串出、串并和并串转换并进行Modelsim仿真

用Verilog实现串并转换 首先我们先要了并串和串并转换的原理 并串转换:先将八位数据暂存于一个八位寄存器器中,然后左移输出到一位输出端口,这里可以通过一个“移位”来实现,相当于实现了移位寄存器的功能。 串并转换:新输入的位值成为原来数据的最低位,将原来数据的最高位舍去,这里可以通过一个简单的“连接符”来实现。 我们这里采用两种方式来进行串并转换 一:lsb优先 Least Significant Bit,最低比特,最低位优先 二:msb优先 Most Significant Bit,最高比特,

H19981118的博客 2万+

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

Echarts图表使用-“暂无数据“优化、饼图轮播、饼图静态当前高亮、柱状图画时间段(圆内各个扇形)

Echarts图表使用-"暂无数据"优化、饼图轮播、饼图静态当前高亮、柱状图画时间段(圆内各个扇形) 【包含】避免出现echarts.js:2218 There is a chart instance already initialized on the dom.警告

工作中遇到问题记录 2970

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

echarts优化数据视图dataView中的样式

在使用echart过程中,toolbox里有个dataView视图模式,里面的数据没有对整,影响展示效果,情形如下: 像这种标题跟数据没有整齐对应上,看起来乱 改问题解决方案为,option 》toolbox 》 feature 》 dataView 》optionTocontent 回调函数中处理,具体代码如下: option = { color: ['#f54c49','#1976d2'], tooltip: { trigger: 'axis', ...

qq_38626492的博客 3631

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

echarts-堆叠柱图+表格

【代码】echarts-堆叠柱图+表格。

Shi_haoliu的博客 1948

ECharts与Excel的火花

在数据爆炸的时代,如何有效地呈现和解析数据变得至关重要。ECharts和Excel作为两种广泛使用的数据处理和可视化工具,各自拥有其独特的魅力和功能。本文将深入探讨这两者之间的火花碰撞,以及如何结合它们以实现更强大的数据可视化效果。ECharts与Excel的结合,不仅可以充分发挥两者的优势,还可以实现更强大的数据可视化效果。无论是从数据处理、图表创建还是故事叙述的角度,这种结合都能为数据分析师、业务人员和决策者提供更丰富、更直观的数据洞察。

船到桥头自然直 2699

echarts统计图dataView显示表格样式

【代码】echarts统计图dataView显示表格样式。

hexianfan的博客 1215

【Echarts】Echarts常用图表

【Echarts】Echarts常用统计图表 (持续更新中)

qq_44862029的博客 755
上一篇: Python中的坑
下一篇: Eclipse安装反编译工具Eclipse Class Decompiler:实现不下载源码,查看源文件
凉茶微凉
博客等级 码龄18年 103粉丝 83原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值