独角兽企业重金招聘Python工程师标准>>>
Echarts相当于一款JS插件，可以制作出绚丽多彩的图表，其支持制作的图表类型和可以使用的样式都非常丰富。本文以Echarts制作散点图为例，向大家展示该工具的实用性。
Echarts的使用门槛非常简单，但使用条件必须符合规则，在官网（/）上下载开发包之后，自己准备一个项目主文件夹，在该文件夹新建一个js文件夹（名称自选），将开发包下的build文件夹下的dist文件夹拷贝到js文件夹下，便可以开始使用了。
Echarts的使用方式可以分为AMD模块化导入和单文件导入方式，本文介绍一种简单的单文件导入方式，首先准备好一个html文件，导入echarts.js文件即可。当然你还需要准备一个div控件用于安放图表位置，也可以认为是要为Echarts实例化的Dom对象，这里JavaScript代码也放在body标签下。
<!DOCTYPEhtml><head><metacharset="GBK"><title>Echartsofscatter</title></head><body><!--为Echarts准备一个大小为600*400的div--><divid="main"style="width:600px;height:400px"></div><!--Echarts单文件导入--><scripttype="text/javascript"src="./js/dist/echarts.js"></script></body>
至此，echarts文件已完成导入，在使用之前，还需要进行路径配置：
<!DOCTYPEhtml><head><metacharset="GBK"><title>Echartsofscatter</title></head><body><!--为Echarts准备一个大小为600*400的div--><divid="main"style="width:600px;height:400px"></div><!--Echarts单文件导入--><scripttype="text/javascript"src="./js/dist/echarts.js"></script><scripttype="text/javascript">//配置路径require.config({paths:{echarts:'./js/dist'}})</script></body>
路径配置好后，可以进行使用，首先需要指定要制作的图表，进行模块导入，可以根据需要导入多个图表模块：
<scripttype="text/javascript">//配置路径require.config({paths:{echarts:'./js/dist'}})//使用require(['echarts','echarts/chart/scatter'])</script>
基于原先的div创建echarts，并使用，主要是图表option的配置:
<scripttype="text/javascript">//配置路径require.config({paths:{echarts:'./js/dist'}});//使用require(['echarts','echarts/chart/scatter'],function(ec){//基于准备好的DOM，初始化echarts图表varmyChart=ec.init(document.getElementById('main'),'shine');//这里的shine可以改成其他样式，可以参照官网实例的样式表varoption={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中加载数据--><scripttype="text/javascript">functionimportXLS(field){varfullpath=window.document.location.pathname;varpos1=fullpath.indexOf("/");varfileName1=fullpath.substring(pos1+1);varpos2=fileName1.lastIndexOf("/");varfileName=fileName1.substring(0,pos2)+"/scatter_data.xls";//xls文件的路径objCon=newActiveXObject("ADODB.Connection");objCon.Provider="Microsoft.Jet.OLEDB.4.0";objCon.ConnectionString="DataSource="+fileName+";ExtendedProperties=Excel8.0;";objCon.CursorLocation=1;objCon.Open;varstrQuery;//GettheSheetNamevarstrSheetName="Sheet1$";//要导入的sheet的名字varrsTemp=newActiveXObject("ADODB.Recordset");rsTemp=objCon.OpenSchema(20);if(!rsTemp.EOF)strSheetName=rsTemp.Fields("Table_Name").Value;rsTemp=null;rsExcel=newActiveXObject("ADODB.Recordset");strQuery="SELECT*FROM["+strSheetName+"]";rsExcel.ActiveConnection=objCon;rsExcel.Open(strQuery);varres=[];vartemp;while(!rsExcel.EOF){temp=rsExcel.Fields(field).value;res.push(temp);rsExcel.MoveNext;}//ClosetheconnectionanddisposethefileobjCon.Close;objCon=null;rsExcel=null;returnres;}</script>
导入的Excel数据是读取某个字段的一维数组数据，我们需要导入x,y两个字段的数据，并组装成xyData二维数组格式：
function(ec){varxData=importXLS(1);varyData=importXLS(2);varxyData=[];vari;//转化为散点图需要的二维数组系列for(i=0;i<xData.length;i++){xyData.push(newArray(xData[i],yData[i]));}//基于准备好的DOM，初始化echarts图表varmyChart=ec.init(document.getElementById('main'),'shine');...//接着上面的使用Echarts的代码}
这样便实现了从Excel中导入数据，重新组装，充填为散点图所需要的二维数组格式。给一个本程序生成的静态图片如下：
