使用Echarts制作散点图(Excel导入数据方式)

2019独角兽企业重金招聘Python工程师标准>>>

Echarts相当于一款JS插件，可以制作出绚丽多彩的图表，其支持制作的图表类型和可以使用的样式都非常丰富。本文以Echarts制作散点图为例，向大家展示该工具的实用性。

Echarts的使用门槛非常简单，但使用条件必须符合规则，在官网（http://echarts.baidu.com/）上下载开发包之后，自己准备一个项目主文件夹，在该文件夹新建一个js文件夹（名称自选），将开发包下的build文件夹下的dist文件夹拷贝到js文件夹下，便可以开始使用了。

Echarts的使用方式可以分为AMD模块化导入和单文件导入方式，本文介绍一种简单的单文件导入方式，首先准备好一个html文件，导入echarts.js文件即可。当然你还需要准备一个div控件用于安放图表位置，也可以认为是要为Echarts实例化的Dom对象，这里JavaScript代码也放在body标签下。

<!DOCTYPE html>
<head>    <meta charset="GBK"> <title>Echarts of scatter</title>
</head>
<body><!--为Echarts准备一个大小为600*400的div--><div id="main" style="width:600px;height:400px"></div> <!--Echarts单文件导入-->     <script type="text/javascript" src="./js/dist/echarts.js"></script>
</body>

至此，echarts文件已完成导入，在使用之前，还需要进行路径配置：

<!DOCTYPE html>
<head>    <meta charset="GBK"> <title>Echarts of scatter</title>
</head>
<body><!--为Echarts准备一个大小为600*400的div--><div id="main" style="width:600px;height:400px"></div> <!--Echarts单文件导入-->     <script type="text/javascript" src="./js/dist/echarts.js"></script> <script type="text/javascript">//配置路径require.config({paths:{         echarts:'./js/dist'}}) </script>
</body>

路径配置好后，可以进行使用，首先需要指定要制作的图表，进行模块导入，可以根据需要导入多个图表模块：

<script type="text/javascript">    //配置路径 require.config({paths:{echarts:'./js/dist'} }) //使用     require([     'echarts','echarts/chart/scatter' ] )
</script>

基于原先的div创建echarts，并使用，主要是图表option的配置:

<script type="text/javascript">//配置路径require.config({paths:{echarts:'./js/dist'}});//使用require(['echarts','echarts/chart/scatter'],function(ec){//基于准备好的DOM，初始化echarts图表var myChart = ec.init(document.getElementById('main'),'shine'); //这里的shine可以改成其他样式，可以参照官网实例的样式表var option = {title:{//可以指定图表标题},renderAsImage : true,//symbolList : ["emptyCircle"],tooltip:{//提示框的显示，主要具有web效果show:true,trigger: 'axis',showDelay : 0,axisPointer:{show: true,type : 'cross',lineStyle: {type : 'dashed',width : 1}}},xAxis:[{name : 'WrG',type : 'value',scale:true,}],yAxis:[{name: 'Cu',type : 'value',scale:true,}],series:[{"name":"CuOre","type":"scatter","data":xyData,//注意这里的xyData就是关键的散点图显示数据，是一个二维数组，即数组内部每一个元素都是xy值对"markPoint" : {//标记点 data : [{type:'max'},{type:'min'} ]},"markLine" : {//标记线自己定制 }}]};//为ECharts对象加载数据myChart.setOption(option);});</script>

现在图表的各项已经配置完毕，关键就是xyData数据的充填，当然用户可以自行指定为：

[[1,2],[2,2],[3,4],[4,5]]

数据少的时候我们可以直接充填，但是数据条目一旦很多，人工输入就很难完成了，因此这里介绍一种从Excel导入数据,再利用js重新组装来进行xyData的充填。代码如下：

<!-- 以下是设置从Excel中加载数据--><script type="text/javascript">  function importXLS(field){   var fullpath = window.document.location.pathname;var pos1 = fullpath.indexOf("/");var fileName1 = fullpath.substring(pos1+1);var pos2 = fileName1.lastIndexOf("/");var fileName = fileName1.substring(0,pos2) + "/scatter_data.xls";// 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);  var res = [];  var temp;  while(!rsExcel.EOF){  temp = rsExcel.Fields(field).value; res.push(temp);       rsExcel.MoveNext;     }   // Close the connection and dispose the file  objCon.Close;  objCon =null;  rsExcel = null;  return res;   }  </script>

导入的Excel数据是读取某个字段的一维数组数据，我们需要导入x,y两个字段的数据，并组装成xyData二维数组格式：

function(ec){var xData = importXLS(1);var yData = importXLS(2);var xyData = [];var i;//转化为散点图需要的二维数组系列for(i=0;i<xData.length;i++){xyData.push(new Array(xData[i],yData[i]));}//基于准备好的DOM，初始化echarts图表var myChart = ec.init(document.getElementById('main'),'shine');... //接着上面的使用Echarts的代码
}

这样便实现了从Excel中导入数据，重新组装，充填为散点图所需要的二维数组格式。给一个本程序生成的静态图片如下：

转载于:https://my.oschina.net/u/1258323/blog/471910

使用Echarts制作散点图(Excel导入数据方式)相关推荐

excel导入数据校验_从Excel数据验证列表中选择多个项目
excel导入数据校验 You've probably used an Excel data validation drop down list, where you can click the ar ...
SpringBoot提供接口实现Excel导入数据并存储到数据库中
SpringBoot提供接口实现Excel导入数据并存储到数据库中完整项目文件 1 效果展示 1.1 Excel数据 zxy.xlsx 1.2 导入后数据库中数据 CREATE TABLE `use ...
Excel导入数据（图片处理）
在用excel导入数据的时候,如果一条数据,包含图片,甚至每条数据图片数量不固定. 图片放到excel里面直接拖进去就可以,再鼠标拉缩小到指定单元格内 package com.ydcloud.smar ...
灰色模型代码GM(1,1)，从excel导入数据，亦可导出数据到excel中。
灰色模型代码GM(1,1),从excel导入数据,亦可导出数据到excel中. 总结1:直接输出结果 %clc W= MicrosoftExcel;(从EXCEL导入数据后,matlab自动储存的数组 ...
Excel导入数据轻松生成智能图表，助力数据分析
运营助手,Excel导入数据轻松生成智能图表,助力数据分析 2023-04-18 10:21·淡定海风L 智能问答BI是一种先进的数据分析,它可以帮助用户快速地从海量数据中获取有用的信息,并将其可视化 ...
Excel导入数据时间格式问题处理
问题背景:java中使用poi进行excel导入数据时,日期格式在数据库中存放为varchar2类型.问题:存放数据日期读取数据为"44439"的数字,因判断格式类型为yyyy-m ...
sqlserver excel导入数据时有null，为空值
sqlserver excel导入数据时有null,最完美解决办法 1.说明为什么会出现导入的数据会为null? 因为在数据库导入数据时,他会自动检测数据的类型,文字一般检测为nvarchar类型,而 ...
excel导入数据校验_Excel数据验证更新
excel导入数据校验 I've finally updated my Data Validation intro video, so it shows the steps for creating ...
excel导入数据校验_使用Excel数据验证限制日期范围
excel导入数据校验 Yesterday, one of my clients emailed to let me know that she was having trouble entering ...

使用Echarts制作散点图(Excel导入数据方式)

使用Echarts制作散点图(Excel导入数据方式)相关推荐

最新文章

热门文章