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
       }
   ]
}