这篇文章主要介绍“ECharts数据图表实例分析”，在日常操作中，相信很多人在ECharts数据图表实例分析问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”ECharts数据图表实例分析”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

ECharts缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

dataZoom

dataZoom 组件可以实现通过鼠标滚轮滚动，放大缩小图表的功能。 默认情况下 dataZoom 控制 x 轴，即对 x 轴进行数据窗口缩放和数据窗口平移操作。

实例

option={xAxis:{type:'value'},yAxis:{type:'value'},dataZoom:[{//这个dataZoom组件，默认控制x轴。type:'slider',//这个dataZoom组件是slider型dataZoom组件start:10,//左边在10%的位置。end:60//右边在60%的位置。}],series:[{type:'scatter',//这是个『散点图』itemStyle:{opacity:0.8},symbolSize:function(val){returnval[2]*40;},data:[["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]}]}

上面的实例只能拖动 dataZoom 组件来缩小或放大图表。如果想在坐标系内进行拖动，以及用鼠标滚轮（或移动触屏上的两指滑动）进行缩放，那么需要 再再加上一个 inside 型的 dataZoom 组件。 在以上实例基础上我们再增加 type: 的配置信息：

实例

option={...,dataZoom:[{//这个dataZoom组件，默认控制x轴。type:'slider',//这个dataZoom组件是slider型dataZoom组件start:10,//左边在10%的位置。end:60//右边在60%的位置。},{//这个dataZoom组件，也控制x轴。type:'inside',//这个dataZoom组件是inside型dataZoom组件start:10,//左边在10%的位置。end:60//右边在60%的位置。}],...}

当然我们可以通过 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 来指定 dataZoom 控制哪个或哪些数轴。

实例

vardata1=[];vardata2=[];vardata3=[];varrandom=function(max){return(Math.random()*max).toFixed(3);};for(vari=0;ifalse,legend:{data:['scatter','scatter2','scatter3']},tooltip:{},xAxis:{type:'value',min:'dataMin',max:'dataMax',splitLine:{show:true}},yAxis:{type:'value',min:'dataMin',max:'dataMax',splitLine:{show:true}},dataZoom:[{type:'slider',show:true,xAxisIndex:[0],start:1,end:35},{type:'slider',show:true,yAxisIndex:[0],left:'93%',start:29,end:36},{type:'inside',xAxisIndex:[0],start:1,end:35},{type:'inside',yAxisIndex:[0],start:29,end:36}],series:[{name:'scatter',type:'scatter',itemStyle:{normal:{opacity:0.8}},symbolSize:function(val){returnval[2]*40;},data:data1},{name:'scatter2',type:'scatter',itemStyle:{normal:{opacity:0.8}},symbolSize:function(val){returnval[2]*40;},data:data2},{name:'scatter3',type:'scatter',itemStyle:{normal:{opacity:0.8,}},symbolSize:function(val){returnval[2]*40;},data:data3}]}

到此，关于“ECharts数据图表实例分析”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！