ECharts中dataZoom组件及散点图的绘制-CFANZ编程社区

ECharts中dataZoom组件及散点图的绘制

dataZoom 组件是对数轴（axis）进行『数据窗口缩放』『数据窗口平移』操作。
可以通过 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 来指定 dataZoom 控制哪个或哪些数轴。
dataZoom 组件可同时存在多个，起到共同控制的作用。控制同一个数轴的组件，会自动联动。下面例子中会详细说明。
dataZoom 的运行原理是通过『数据过滤』来达到『数据窗口缩放』的效果。
dataZoom 的数据窗口范围的设置，目前支持两种形式：
百分比形式：参见 dataZoom.start 和 dataZoom.end。

绝对数值形式：参见 dataZoom.startValue 和 dataZoom.endValue。

dataZoom 组件现在支持几种子组件：

内置型数据区域缩放组件（dataZoomInside）：内置于坐标系中。
滑动条型数据区域缩放组件（dataZoomSlider）：有单独的滑动条操作。
框选型数据区域缩放组件（dataZoomSelect）：全屏的选框进行数据区域缩放。入口和配置项均在 toolbox中。

在代码中加入dataZoom组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>代码加入dataZoom组件</title>
    <!--引入Echarts文件-->
    <script src="js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 800px;height:400px;"></div>
<script type="text/javascript">
    var dom=document.getElementById("main");
    var myChart=echarts.init(dom);
    var app={};
    var option=null;
    //先只在对单独一个横轴，加上 dataZoom 组件，代码示例如下：
    option = {
        tooltip:{},//提示框
        xAxis: {
            type: 'value'
        },
        yAxis: {
            type: 'value'
        },
        dataZoom: [
            {
                type: 'slider', //这个dataZoom组件是slider型dataZoom组件
                xAxisIndex:0,   //dataZoom-slider组件控制第一个XAxis
                start: 10,       //左边在10%位置
                end: 60         //右边在60%位置
            },
            {
                type: 'inside', //这个dataZoom组件是inside型dataZoom组件
                xAxisIndex:0,   //dataZoom-inslide组件控制第一个XAxis
                start: 10,       //左边在10%的位置
                end: 60         //右边在60%的位置
            },{
                type:'slider',
                yAxisIndex:0,   //dataZoom-slider组件控制第一个yAxis
                start:30,
                end:80
            },{
                type:'inside',
                yAxisIndex:0,   //dataZoom-inside组件控制第一个yAxis
                start:30,
                end:80
            }
        ],
        series: [
            {
                name: 'scatter',
                type: 'scatter',
                itemStyle: {
                    normal: {
                        opacity: 0.8
                    }
                },
                symbolSize: function (val) {//控制点的大小,(参数为data中第三列的数据)
                    return val[2] * 40;     //用回调函数控制点的大小(请查看官方文档)
                },
                data: [//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"]
                ]
            }
        ]
    }
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
</body>
</html>