Echarts中DataView显示Excel表格_echarts有没有表格-优快云博客

本文链接：https://blog.youkuaiyun.com/bbc2005/article/details/76038784

本文介绍如何使用Echarts和Handsontable实现图表数据视图点击后显示可下载的Excel样式电子表格功能。该方案利用layer弹窗展示电子表，并详细说明了必要的技术栈及Echarts源码修改步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目用到功能：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