xmnk
/
wkshi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
							<html>
    <head>
        <meta charset="utf-8">
        <script src="lib/esl.js"></script>
        <script src="lib/config.js"></script>
        <script src="lib/jquery.min.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="lib/reset.css">
    </head>
    <body>
        <style>
        </style>
        <div id="main"></div>
        <script>


            var echarts;
            var colorTool;
            var chart;
            var myChart;
            var groupCategories = [];
            var groupColors = [];

            require([
                'echarts'
                // 'zrender/tool/color',
                // 'echarts/chart/scatter',
                // 'echarts/chart/graph',
                // 'echarts/component/singleAxis',
                // 'echarts/component/tooltip',
                // 'echarts/component/toolbox',
                // 'echarts/component/dataZoom',
                // 'echarts/component/visualMap'
            ], function (ec) {
                echarts = ec;
                colorTool = echarts.color;


        var myChart = echarts.init(document.getElementById('main'));
        var xAxisData = [
            'Aries', 'Taurus', 'Gemini', 'Cancer', 'Leo', 'Virgo', 'Libra',
            'Scorpio', 'Sagittarius', 'Capricornus', 'Aquarius', 'Pisces'
        ];
        var data0 = [];
        var data1 = [];
        var data2 = [];
        var data3 = [];

        for (var i = 0; i < xAxisData.length; i++) {
            data0.push([Math.random() * 100, Math.random() * 30]);
            data1.push(Math.random() * 30);
            data2.push([Math.random() * (i % 2 === 0 ? 100 : 1000000), Math.random() * 30]);
            data3.push([+new Date() + Math.round(Math.random() * 3600 * 24 * 30), Math.random() * 30]);
        }

        var height = '18%';

        myChart.setOption({
            backgroundColor: '#fff',
            tooltip: {
                trigger: 'axis'
            },
            dataZoom: [{
                type: 'inside',
                singleAxisIndex: [0]
            }, {
                type: 'inside',
                singleAxisIndex: [1]
            }, {
                type: 'inside',
                singleAxisIndex: [2]
            }, {
                type: 'inside',
                singleAxisIndex: [3]
            }],
            singleAxis: [{
                type: 'value',
                id: 'a',
                height: height
            }, {
                type: 'category',
                id: 'b',
                data: xAxisData,
                height: height,
                axisPointer: {
                    type: 'shadow'
                },
                top: '27%'
            }, {
                type: 'log',
                id: 'c',
                height: height,
                axisPointer: {
                    snap: false,
                    label: {
                        show: true
                    }
                },
                top: '55%'
            }, {
                type: 'time',
                id: 'd',
                height: height,
                top: '77%'
            }],
            series: [{
                type: 'scatter',
                coordinateSystem: 'singleAxis',
                singleAxisId: 'a',
                symbolSize: function (val) {
                    return val[1];
                },
                data: data0
            }, {
                type: 'scatter',
                coordinateSystem: 'singleAxis',
                singleAxisId: 'b',
                symbolSize: function (val) {
                    return val;
                },
                data: data1
            }, {
                type: 'scatter',
                coordinateSystem: 'singleAxis',
                singleAxisId: 'c',
                symbolSize: function (val) {
                    return val[1];
                },
                data: data2
            }, {
                type: 'scatter',
                coordinateSystem: 'singleAxis',
                singleAxisId: 'd',
                symbolSize: function (val) {
                    return val[1];
                },
                data: data3
            }]
        });


            });

        </script>
    </body>
</html>