讲解一下ECharts 交互组件

ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。

接下来的内容我们将介绍如何使用数据区域缩放组件 dataZoom。

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: ‘inside’ 的配置信息：

实例

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

尝试一下 »

以上就是良许教程网为各位朋友分享的Linu系统相关内容。想要了解更多Linux相关知识记得关注公众号“良许Linux”，或扫描下方二维码进行关注，更多干货等着你 ！