您的位置: 首页  >  文章  >  Echarts中DataView显示Excel表格

Echarts中DataView显示Excel表格

分类: 文章 • 2023-12-02 19:46:46

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

Echarts中DataView显示Excel表格Echarts中DataView显示Excel表格Echarts中DataView显示Excel表格

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

相关推荐