初学echarts的excel数据导入遇到的小问题

最新推荐文章于 2024-02-22 13:49:02 发布
最新推荐文章于 2024-02-22 13:49:02 发布
阅读量1.2w 收藏 26
点赞数 2
分类专栏： 图形学
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010614372/article/details/44517183
版权

1，单引号声明的字符串中如果有转义符（比如一个路径中的斜杠），这其实就是当作斜杠处理，不是转义字符。

但是当你在下文又和双引号声明的字符串链接时，就会导致问题，出现路径不对情况。

2，在定义SheetName的时候要在最后加一个$号。

3，同一个script快内的函数调用顺序与声明的顺序没有要求，但是如果两个函数在不同的acript块内，则被调用函数的声明必须在前一个script块中

4，在option的定义中，如过一个data后面如果少逗号，页面是完全不会显示的。 如果data是null，则会部分显示标题，或者注解。


以下是导入本地数据的echarts的helloworld：

<!DOCTYPE html>
<head>
    <meta charset="GBK">
    <title>ECharts</title>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:200px"></div>
	<div id="main2" style="height:200px"></div>
	<div id="main3" style="height:200px"></div>
	<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
	<script type="text/javascript">
		function importXLS(field){  
				    var fileName = "xxxx";// xls文件的路径
					
					objCon = new ActiveXObject("ADODB.Connection");
					objCon.Provider = "Microsoft.Jet.OLEDB.4.0";
					objCon.ConnectionString = "Data Source=" + fileName + ";Extended Properties=Excel 8.0;";
					objCon.CursorLocation = 1;
					
					objCon.Open;
					var strQuery;
					//Get the SheetName
					var strSheetName = "Sheet1$"; //要导入的sheet的名字
					var rsTemp =   new ActiveXObject("ADODB.Recordset");
					
					rsTemp = objCon.OpenSchema(20);
					if(!rsTemp.EOF)strSheetName = rsTemp.Fields("Table_Name").Value;
						
					rsTemp = null;
					rsExcel =   new ActiveXObject("ADODB.Recordset");
					strQuery = "SELECT * FROM [" + strSheetName + "]";
					rsExcel.ActiveConnection = objCon;
					
					rsExcel.Open(strQuery);
					rsExcel.MoveNext;
					rsExcel.MoveNext;
                    var res = [];
					var temp;
                    var limit=339;		
					while(!rsExcel.EOF && limit >0){
					    if(field ==3 || field ==4 || field ==5)
						temp = parseInt(rsExcel.Fields(field).value);
						else
						temp = rsExcel.Fields(field).value;
						res.push(temp);		
						rsExcel.MoveNext;	
                        limit--;						
					}
					
					// Close the connection and dispose the file
					objCon.Close;
					objCon =null;
					rsExcel = null;
					return res;	
		}
    </script>
	<script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
				'echarts/chart/line' // 使用折线图就加载line模块，按需加载
            ],


            function (ec) {
			    var city = importXLS(2);
				var population = importXLS(3);
				var gdp = importXLS(4);	
				var gdpper = importXLS(5);
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main')); 
                	
                alert(gdpper[338]);				
                var axisData = city;

				option = {
					title : {
						text: '第六次全国人口普查主要城市数据'
					},
					tooltip : {
						trigger: 'axis',
						showDelay: 0,             // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
						formatter: function (params) {
									var res = params[0].name;
									res += '<br/>' + params[0].seriesName;
									res += '<br/>  人口总数 : ' + params[0].value + '  万 ' ;
									return res;
						}
					},
					legend: {
							data:['人口','GDP(万)','人均GDP']
					},
					toolbox: {
							show : true,
							feature : {
								mark : {show: true},
								dataZoom : {show: true},
								magicType : {show: true, type: ['line', 'bar']},
								restore : {show: true},
								saveAsImage : {show: true}
							}
					},
					dataZoom : {
							y: 250,
							show : true,
							realtime: true,
							start : 50,
							end : 100
					},
					grid: {
							x: 80,
							y: 40,
							x2:20,
							y2:25
					},
					xAxis : [
							{
								type : 'category',
								boundaryGap : true,
								axisTick: {onGap:false},
								splitLine: {show:false},
								data : axisData
							}
					],
					yAxis : [
							{
								type : 'value',
								scale:true,
								boundaryGap: [0.05, 0.05],
								splitArea : {show : true}
							}
					],
					series : [
								{
									name:'人口',
									type:'line',
									data:population,
									markPoint : {
										data : [
											{type : 'max', name: '最大值'},
											{type : 'min', name: '最小值'}
										]
									},
									markLine : {
										data : [
											{type : 'average', name: '平均值'}
										]
									}
								}
        
					]
				};

				option2 = {
						tooltip : {
							trigger: 'axis',
							showDelay: 0             // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
						},
						legend: {
							y : -30,
							data:['人口','GDP(万)','人均GDP']
						},
						toolbox: {
							y : -30,
							show : true,
							feature : {
									mark : {show: true},
									dataZoom : {show: true},
									dataView : {show: true, readOnly: false},
									magicType : {show: true, type: ['line', 'bar']},
									restore : {show: true},
									saveAsImage : {show: true}
							}
						},
						dataZoom : {
							show : true,
							realtime: true,
							start : 50,
							end : 100
						},
						grid: {
							x: 80,
							y:5,
							x2:20,
							y2:40
						},
						xAxis : [
								{
									type : 'category',
									position:'top',
									boundaryGap : true,
									axisLabel:{show:false},
									axisTick: {onGap:false},
									splitLine: {show:false},
									data : axisData
								}
						],
						yAxis : [
								{
									type : 'value',
									scale:true,
									splitNumber: 3,
									boundaryGap: [0.05, 0.05],
									axisLabel: {
										formatter: function (v) {
											return Math.round(v/10000) + ' 万'
										}
									},
									splitArea : {show : true}
								}
						],
						series : [
								{
									name:'GDP(万)',
									type:'line',
									symbol: 'none',
									data: gdp,
									markPoint : {
										data : [
											{type : 'max', name: '最大值'},
											{type : 'min', name: '最小值'}
										]
									},
									markLine : {
										data : [
											{type : 'average', name: '平均值'}
										]
									}
								}
						]
				};
				myChart2 = ec.init(document.getElementById('main2'));
				myChart2.setOption(option2);

				option3 = {
						tooltip : {
								trigger: 'axis',
								showDelay: 0             // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
						},
						legend: {
								y : -30,
								data:['人口','GDP(万)','人均GDP']
						},
						toolbox: {
								y : -30,
								show : true,
								feature : {
										mark : {show: true},
										dataZoom : {show: true},
										dataView : {show: true, readOnly: false},
										magicType : {show: true, type: ['line', 'bar']},
										restore : {show: true},
										saveAsImage : {show: true}
								}
						},
						dataZoom : {
								y:200,
								show : true,
								realtime: true,
								start : 50,
								end : 100
						},
						grid: {
								x: 80,
								y:5,
								x2:20,
								y2:30
						},
						xAxis : [
								{
									type : 'category',
									position:'bottom',
									boundaryGap : true,
									axisTick: {onGap:false},
									splitLine: {show:false},
									data : axisData
								}
						],
						yAxis : [
								{
									type : 'value',
									scale:true,
									splitNumber:3,
									boundaryGap: [0.05, 0.05],
									axisLabel: {
										formatter: function (v) {
											return Math.round(v/10000) + ' 万'
										}
									},
									splitArea : {show : true}
								}
						],
						series : [
								{
									name:'人均GDP',
									type:'bar',
									symbol: 'none',
     								data: gdpper,
									markPoint : {
										data : [
											{type : 'max', name: '最大值'},
											{type : 'min', name: '最小值'}
										]
									},
									markLine : {
										data : [
											{type : 'average', name: '平均值'}
										]
									}
								}
						]
				};
				myChart3 = ec.init(document.getElementById('main3'));
				myChart3.setOption(option3);

				myChart.connect([myChart2, myChart3]);
				myChart2.connect([myChart, myChart3]);
				myChart3.connect([myChart, myChart2]);

				setTimeout(function (){
						window.onresize = function () {
							myChart.resize();
							myChart2.resize();
							myChart3.resize();
						}
				},200)
                    
			        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );
	</script>
	
</body>




拜占庭里一棵草
关注
  • 2
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
使用Echarts制作散点图(Excel导入数据方式)
weixin_34209851的博客
06-29 5824
2019独角兽企业重金招聘Python工程师标准>>> ...
将html的echarts导入excel,echarts 数据 表格 excel-求Excel数据导入echarts实现成图的代码，不胜感激！...
weixin_30613239的博客
07-09 989
请问echarts 图表已经完成，怎么样将这个图导出到e...获取数据：即然已经生成了图表了，证明这些数据已经获取到了；写excel：可以通过jxl写excel，保存到服务器；下载excel：根据服务器地址 文件路径就可以下载excel文件了；echarts 怎么展现数据表格ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运...
根据Excel表格数据生成ECharts图表最新版.zip
09-03
根据Excel表格数据生成ECharts图表，随便一个浏览器就可以运行。 功能： 可以选择一个固定数据格式的excel文件，根据excel文件的数据，以平铺或堆叠的形式，生成对应的线图或柱状图或饼图。可保存图片到本地。 用到： xlsx.js、echarts.js
开源图表库Echarts 简介与基本使用
最新发布
u013558123的博客
02-22 840
开源图表库Echarts 简介与基本使用
使用echarts将Excel的数据可视化
zqk的博客
07-13 1万+
单纯的前端JS好像不能实现读取Excel，但是引用SheetJS就能很简单的实现这个功能。 Excel中数据 time为时间格式，读取的时候转化为浮点数的格式，要手动调整。 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> &l
Excel表格数据生成ECharts图表
热门推荐
Lhy的博客
03-25 1万+
什么东西： 是这样，前些时候有个网友问我，ECharts怎么用，我说我研究研究。。。 然后就做了这么个小东西，通过html页面，选择一个有数据（固定格式）的Excel文件，根据Excel里面的数据，生成对应的ECharts图表，如折线图、柱状图。 效果如下： 其实大家仔细一看就知道Excel的数据和转换后的图表是怎么对应上的。例如： 文件名 --图名 首列名 --x轴名 首列...
[转载]利用echarts将图片写入excel中
lw18751836671的专栏
12-17 540
参考博客：点击跳转 使用poi-3.10.1版本jar包 参考博客中代码写了一个测试，发现可行 import org.apache.poi.hssf.usermodel.HSSFClientAnchor; import org.apache.poi.hssf.usermodel.HSSFPatriarch; import org.apache.poi.hssf.usermodel.HSSF...
初学STM32遇到的一些问题
07-25
文章总结了作者自己初学STM32单片机时遇到的三个需要注意的问题。
Java数据导入导出Excel
05-17
Java数据导入导出Excel，对初学者有很大的帮助！
将ListView数据写入excel表
04-20
1.C++ Builder 2010 将ListView数据写入excel表 2.代码能够在C++ Builder 2010 正确运行 3.有不懂的可以联系我
数据可视化初学者练手 | 基于python，echarts,flask的大数据可视化大屏展示
06-27
使用python，echarts,flask实现数据可视化大屏，本地数据。 含有课程设计论文29页，6000字。 可修改省份，数据。 根据搜索展示某城市某商品的数据可视化展示。搜索框，地图，相关地市滚动窗口，饼图，雷达图，条形图...
Excel数据透视表应用大全
06-17
创建复合范围的数据透视表，通过导入外部数据“编辑0LE DB查询”创建数据透视表，使用“Microsoft Query”数据查询创建透视表，利用多样的数据源创建数据透视表，在Web上使用数据透视表，数据透视表与VBA，使用数据...
echarts引用excel数据_Excel 有哪些可能需要熟练掌握而很多人不会的技能？
weixin_36244383的博客
12-04 1129
===============排版篇==================· 给他人发送excel前，请尽量将光标定位在需要他人首先阅览的位置，例如Home位置（A1），例如结论sheet，长表尽量将位置定位到最顶端· 有必要的时候请冻结首行；没必要但可追究的内容，可以隐藏处理· 行标题、列标题加粗，适当处理文字颜色、填充颜色，利人利己，可参见：Excel 中的颜色要怎么搭配，视觉上更能接受且...
echarts读取excel数据_数据可视化(3Dbar)Step1
weixin_35941591的博客
12-27 2148
完成效果：这学期有这门课，赶鸭子上架。老师要求做3D的，可是我死活找不到3D能用的交互组件。echarts画图:声明要用的变量://实例化echartsvar myChart = echarts.init(document.getElementById('main'));var xData = [...];var yData = [...];var data = [...];全局配置:...
echarts读取excel数据_Matlab读取Excel数据并绘制二维图
weixin_36015463的博客
12-28 1238
大学时候选修Matlab，算是有了入门基础。现在工作了偶尔需要用到，将各种数据绘图进行对比，因此又安装使用上。------------------------分界线-以下正文-------------------现在有一个Excel数据文件，是一组时域信号，我需要将它的三个通道数据绘制曲线图，方便查看。（Excel本身也能绘图，但是为了以后有大量同类型数据文件的处理需求，我决定写一个.m文件以便以...
如何引入本地数据的echarts画图
yyyyy666_111的博客
06-11 2728
官网链接：Apache EChartsECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
实现excle表上传生成echarts图
qq_50951790的博客
03-10 772
实现excle表上传生成echarts图案例
echarts画折线图和数据excel导出
WSLHX944174132的博客
11-01 1841
最近一直使用echarts画折线图，在此做个记录 最后样式 代码 <!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/echarts/4.1.0...
c# 将excel数据导入access
10-23
首先，它的学习曲线相对较陡峭，对于初学者可能会比较困难。其次，C语言不提供现代编程语言中常见的高级特性，如面向对象编程和垃圾回收机制。因此，在某些编程任务上，C语言可能不如其他编程语言更为方便快捷。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值