xmnk
/
wkshi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668
							<!DOCTYPE>
<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>
        <script src="lib/facePrint.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="lib/reset.css">
    </head>
    <body>
        <style>
            .chart {
                position: relative;
                height: 500px;
                max-width: 1000px;
                margin: 0 auto;
            }
            h2 {
                text-align: center;
                font-size: 16px;
                line-height: 40px;
                font-weight: normal;
                background: #078302;
                color: #eee;
            }
        </style>

        <h2>scatter</h2>
        <div class="chart" id="main1"></div>
        <h2>Test: (1) click zoom btn (2) select (3) click zoom btn, expect: not change</h2>
        <div class="chart" id="main-test-y-range"></div>
        <h2>Multiple Y axis (default)</h2>
        <div class="chart" id="main-multiple-y-axis-default"></div>
        <h2>Specify Y axis (yAxisIndex: [1, 2, 4], xAxisIndex: false, should be 'lineY' brush)</h2>
        <div class="chart" id="main-specify-y-axis"></div>
        <h2>Specify Y axis (yAxisIndex: false, should be 'lineX' brush)</h2>
        <div class="chart" id="main-specify-x-axis"></div>

        <script>

            var lastChart;
            var globalColor = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'];

            function makeChart(id, option, cb) {
                require([
                    'echarts'
                    // 'echarts/model/globalDefault',
                    // 'echarts/chart/scatter',
                    // 'echarts/chart/line',
                    // 'echarts/chart/bar',
                    // 'echarts/chart/scatter',
                    // 'echarts/component/grid',
                    // 'echarts/component/markLine',
                    // 'echarts/component/legend',
                    // 'echarts/component/tooltip',
                    // 'echarts/component/toolbox',
                    // 'echarts/component/dataZoom'
                ], function (echarts, globalDefault) {
                    var main = document.getElementById(id);
                    if (main) {
                        var chartMain = document.createElement('div');
                        chartMain.style.cssText = 'height:100%';
                        main.appendChild(chartMain);
                        var chart = lastChart = echarts.init(chartMain);

                        if (typeof option === 'function') {
                            option = option(echarts, globalDefault);
                        }

                        chart.setOption(option);

                        window.addEventListener('resize', chart.resize);

                        cb && cb(echarts, chart);
                    }

                });
            }

        </script>


        <script>
            var data1 = [];
            var data2 = [];
            var data3 = [];

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

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

            makeChart('main1', {
                legend: {
                    data: ['scatter', 'scatter2', 'scatter3']
                },
                animationDuration: 1000,
                animationDurationUpdate: 1000,
                toolbox: {
                    feature: {
                        dataView: {},
                        dataZoom: {
                            show: true,
                            yAxisIndex: null
                        },
                        restore: {show: true},
                        saveAsImage: {}
                    }
                },
                tooltip: {
                },
                xAxis: {
                    type: 'value',
                    min: 'dataMin',
                    max: 'dataMax',
                    splitLine: {
                        show: true
                    }
                },
                yAxis: {
                    type: 'value',
                    min: 'dataMin',
                    max: 'dataMax',
                    splitLine: {
                        show: true
                    }
                },
                dataZoom: [
                    {
                        show: true,
                        xAxisIndex: [0],
                        start: 10,
                        end: 70
                    },
                    {
                        show: true,
                        yAxisIndex: [0],
                        start: 0,
                        end: 20
                    },
                    {
                        type: 'inside',
                        xAxisIndex: [0],
                        start: 10,
                        end: 70
                    },
                    {
                        type: 'inside',
                        yAxisIndex: [0],
                        start: 0,
                        end: 20
                    }
                ],
                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
                    }
                ]
            });
        </script>


        <script>
            makeChart('main-test-y-range', function (echarts, globalDefault) {
                return {
                    tooltip: {},
                    toolbox: {
                        feature: {
                            dataZoom: {},
                            restore: {}
                        }
                    },
                    legend: {
                        data: ['A1', 'A2', 'A3', 'B1', 'B2']
                    },
                    grid: [{
                        left: 40,
                        width: 300,
                    }],
                    xAxis: [{
                        data: ['z', 'y', 'x', 'w', 'v', 'u']
                    }],
                    yAxis: [{
                        type: 'value',
                        position: 'left',
                        axisLine: {
                            lineStyle: {
                                color: globalColor[0]
                            }
                        }
                    }, {
                        type: 'value',
                        position: 'right',
                        axisLine: {
                            lineStyle: {
                                color: globalColor[1]
                            }
                        }
                    }, {
                        type: 'value',
                        position: 'right',
                        offset: 80,
                        axisLine: {
                            lineStyle: {
                                color: globalColor[2]
                            }
                        }
                    }],
                    dataZoom: [{
                        type: 'slider',
                        height: 20
                    }, {
                        type: 'slider',
                        yAxisIndex: 1,
                        orient: 'vertical',
                        left: 365,
                        width: 20
                    }, {
                        type: 'slider',
                        yAxisIndex: 2,
                        orient: 'vertical',
                        left: 445,
                        width: 20
                    }],
                    series: [{
                        name: 'A1',
                        type: 'line',
                        data: [5, 1, 5, 1, 5, 10]
                    }, {
                        name: 'A2',
                        type: 'line',
                        yAxisIndex: 1,
                        data: [1, 5, 1, 5, 1, 10]
                    }, {
                        name: 'A3',
                        type: 'line',
                        yAxisIndex: 2,
                        data: [3, 8, 1, 4, 2, 5]
                    }]
                };
            });
        </script>


        <script>
            makeChart('main-multiple-y-axis-default', function (echarts, globalDefault) {
                return {
                    tooltip: {},
                    toolbox: {
                        feature: {
                            dataZoom: {},
                            restore: {}
                        }
                    },
                    legend: {
                        data: ['A1', 'A2', 'A3', 'B1', 'B2']
                    },
                    grid: [{
                        left: 40,
                        width: 300,
                    }, {
                        left: 550,
                        right: 40
                    }],
                    xAxis: [{
                        data: ['z', 'y', 'x', 'w', 'v', 'u']
                    }, {
                        data: ['z', 'y', 'x', 'w', 'v', 'u'],
                        gridIndex: 1
                    }],
                    yAxis: [{
                        type: 'value',
                        position: 'left',
                        axisLine: {
                            lineStyle: {
                                color: globalColor[0]
                            }
                        }
                    }, {
                        type: 'value',
                        position: 'right',
                        axisLine: {
                            lineStyle: {
                                color: globalColor[1]
                            }
                        }
                    }, {
                        type: 'value',
                        position: 'right',
                        offset: 80,
                        axisLine: {
                            lineStyle: {
                                color: globalColor[2]
                            }
                        }
                    }, {
                        type: 'value',
                        position: 'left',
                        gridIndex: 1,
                        boundaryGap: ['20%', '20%'],
                        axisLine: {
                            lineStyle: {
                                color: globalColor[3]
                            }
                        }
                    }, {
                        type: 'value',
                        position: 'right',
                        gridIndex: 1,
                        boundaryGap: ['20%', '20%'],
                        axisLine: {
                            lineStyle: {
                                color: globalColor[4]
                            }
                        }
                    }],
                    dataZoom: [{
                        type: 'slider',
                        height: 20
                    }, {
                        type: 'slider',
                        yAxisIndex: 1,
                        orient: 'vertical',
                        left: 365,
                        width: 20
                    }, {
                        type: 'slider',
                        yAxisIndex: 2,
                        orient: 'vertical',
                        left: 445,
                        width: 20
                    }],
                    series: [{
                        name: 'A1',
                        type: 'line',
                        data: [5, 1, 5, 1, 5, 10]
                    }, {
                        name: 'A2',
                        type: 'line',
                        yAxisIndex: 1,
                        data: [1, 5, 1, 5, 1, 10]
                    }, {
                        name: 'A3',
                        type: 'line',
                        yAxisIndex: 2,
                        data: [3, 8, 1, 4, 2, 5]
                    }, {
                        name: 'B1',
                        type: 'line',
                        xAxisIndex: 1,
                        yAxisIndex: 3,
                        data: [5, 1, 5, 1, 5, 3]
                    }, {
                        name: 'B2',
                        type: 'line',
                        xAxisIndex: 1,
                        yAxisIndex: 4,
                        data: [1, 5, 1, 5, 1, 10]
                    }]
                };
            });
        </script>


        <script>
            makeChart('main-specify-y-axis', function (echarts, globalDefault) {
                return {
                    tooltip: {},
                    toolbox: {
                        feature: {
                            dataZoom: {
                                yAxisIndex: [1, 2, 4],
                                xAxisIndex: false
                            },
                            restore: {}
                        }
                    },
                    legend: {
                        data: ['A1', 'A2', 'A3', 'B1', 'B2']
                    },
                    grid: [{
                        left: 40,
                        width: 300,
                    }, {
                        left: 550,
                        right: 40
                    }],
                    xAxis: [{
                        data: ['z', 'y', 'x', 'w', 'v', 'u']
                    }, {
                        data: ['z', 'y', 'x', 'w', 'v', 'u'],
                        gridIndex: 1
                    }],
                    yAxis: [{
                        type: 'value',
                        position: 'left',
                        axisLine: {
                            lineStyle: {
                                color: globalColor[0]
                            }
                        }
                    }, {
                        type: 'value',
                        position: 'right',
                        axisLine: {
                            lineStyle: {
                                color: globalColor[1]
                            }
                        }
                    }, {
                        type: 'value',
                        position: 'right',
                        offset: 80,
                        axisLine: {
                            lineStyle: {
                                color: globalColor[2]
                            }
                        }
                    }, {
                        type: 'value',
                        position: 'left',
                        gridIndex: 1,
                        boundaryGap: ['20%', '20%'],
                        axisLine: {
                            lineStyle: {
                                color: globalColor[3]
                            }
                        }
                    }, {
                        type: 'value',
                        position: 'right',
                        gridIndex: 1,
                        boundaryGap: ['20%', '20%'],
                        axisLine: {
                            lineStyle: {
                                color: globalColor[4]
                            }
                        }
                    }],
                    series: [{
                        name: 'A1',
                        type: 'line',
                        data: [5, 1, 5, 1, 5, 10]
                    }, {
                        name: 'A2',
                        type: 'line',
                        yAxisIndex: 1,
                        data: [1, 5, 1, 5, 1, 10]
                    }, {
                        name: 'A3',
                        type: 'line',
                        yAxisIndex: 2,
                        data: [3, 8, 1, 4, 2, 5]
                    }, {
                        name: 'B1',
                        type: 'line',
                        xAxisIndex: 1,
                        yAxisIndex: 3,
                        data: [5, 1, 5, 1, 5, 10]
                    }, {
                        name: 'B2',
                        type: 'line',
                        xAxisIndex: 1,
                        yAxisIndex: 4,
                        data: [1, 5, 1, 5, 1, 10]
                    }]
                };
            });
        </script>


        <script>
            makeChart('main-specify-x-axis', function (echarts, globalDefault) {
                return {
                    tooltip: {},
                    toolbox: {
                        feature: {
                            dataZoom: {
                                yAxisIndex: false
                            },
                            restore: {}
                        }
                    },
                    legend: {
                        data: ['A1', 'A2', 'A3', 'B1', 'B2']
                    },
                    grid: [{
                        left: 40,
                        width: 300,
                    }, {
                        left: 550,
                        right: 40
                    }],
                    xAxis: [{
                        data: ['z', 'y', 'x', 'w', 'v', 'u']
                    }, {
                        data: ['z', 'y', 'x', 'w', 'v', 'u'],
                        gridIndex: 1
                    }],
                    yAxis: [{
                        type: 'value',
                        position: 'left',
                        axisLine: {
                            lineStyle: {
                                color: globalColor[0]
                            }
                        }
                    }, {
                        type: 'value',
                        position: 'right',
                        axisLine: {
                            lineStyle: {
                                color: globalColor[1]
                            }
                        }
                    }, {
                        type: 'value',
                        position: 'right',
                        offset: 80,
                        axisLine: {
                            lineStyle: {
                                color: globalColor[2]
                            }
                        }
                    }, {
                        type: 'value',
                        position: 'left',
                        gridIndex: 1,
                        boundaryGap: ['20%', '20%'],
                        axisLine: {
                            lineStyle: {
                                color: globalColor[3]
                            }
                        }
                    }, {
                        type: 'value',
                        position: 'right',
                        gridIndex: 1,
                        boundaryGap: ['20%', '20%'],
                        axisLine: {
                            lineStyle: {
                                color: globalColor[4]
                            }
                        }
                    }],
                    series: [{
                        name: 'A1',
                        type: 'line',
                        data: [5, 1, 5, 1, 5, 10]
                    }, {
                        name: 'A2',
                        type: 'line',
                        yAxisIndex: 1,
                        data: [1, 5, 1, 5, 1, 10]
                    }, {
                        name: 'A3',
                        type: 'line',
                        yAxisIndex: 2,
                        data: [3, 8, 1, 4, 2, 5]
                    }, {
                        name: 'B1',
                        type: 'line',
                        xAxisIndex: 1,
                        yAxisIndex: 3,
                        data: [5, 1, 5, 1, 5, 10]
                    }, {
                        name: 'B2',
                        type: 'line',
                        xAxisIndex: 1,
                        yAxisIndex: 4,
                        data: [1, 5, 1, 5, 1, 10]
                    }]
                };
            });
        </script>


    </body>
</html>