echarts散点图带数据窗口平移

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Titletitle>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="csshelloword.css">
    <script src="echarts.common.min.js">script>
head>
<body>
<div id="main" style="width: 600px;height:400px;">div>
<script type="text/javascript">

    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));


    var data1 = [];
    var data2 = [];
    var data3 = [];

    var random = function (max) {
        return (Math.random() * max).toFixed(3);
    };

    for (var i = 0; i < 500; i++) {
        data1.push([random(15), random(10), random(1)]);
        data2.push([random(10), random(10), random(1)]);
        data3.push([random(15), random(10), random(1)]);
    }

    option = {
        animation: 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
            }
        ]
    }
    myChart.setOption(option);

script>
<script src="js/jquery-3.2.1.min.js">script>
<script src="js/bootstrap.min.js">script>
body>
html>
echarts散点图带数据窗口平移_第1张图片

你可能感兴趣的:(echarts)