ECharts 交互组件概述

共计 1376 个字符，预计需要花费 4 分钟才能阅读完成。

接下来的内容我们将介绍如何使用数据区域缩放组件 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 
 尝试一下 »

 阿里云 2 核 2G 服务器 3M 带宽 61 元 1 年，有高配 
 腾讯云新客低至 82 元 / 年，老客户 99 元 / 年 
 代金券：在阿里云专用满减优惠券