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) {               return val[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 控制哪个或哪些数轴。 

实例

var data1 = [];var data2 = [];var data3 = [];var random = function (max) {   return (Math.random() * max).toFixed(3);};for (var i = 0; i false,   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) {               return val[2] * 40;           },           data: data1       },       {           name: 'scatter2',           type: 'scatter',           itemStyle: {               normal: {                   opacity: 0.8               }           },           symbolSize: function (val) {               return val[2] * 40;           },           data: data2       },       {           name: 'scatter3',           type: 'scatter',           itemStyle: {               normal: {                   opacity: 0.8,               }           },           symbolSize: function (val) {               return val[2] * 40;           },           data: data3       }   ]}