xmnk
/
wkshi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899
							<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="lib/esl.js"></script>
        <script src="lib/config.js"></script>
        <script src="lib/facePrint.js"></script>
        <link rel="stylesheet" href="lib/reset.css">
    </head>
    <body>
        <style>
            .chart {
                height: 500px;
            }
            h1 {
                font-size: 20px;
                text-align: center;
                background: #bbb;
                padding: 10px 0;
            }
        </style>

        <h1>visual on hue</h1>
        <div class="chart" id="mainH"></div>
        <h1>visual on color opacity</h1>
        <div class="chart" id="mainZ"></div>
        <h1>pieces | auto split | check: min &gt; dataMin; max &lt; dataMax; </h1>
        <div class="chart" id="mainX"></div>
        <h1>pieces | auto split | check: minOpen/maxOpen</h1>
        <div class="chart" id="mainX2"></div>
        <h1>pieces | check: auto-sort</h1>
        <div class="chart" id="main0"></div>
        <h1>continuous | check: area that greater than dataMax</h1>
        <div class="chart" id="main1"></div>
        <h1>continuous | log axis | inverse axis | gradient on xAxis</h1>
        <div class="chart" id="main2"></div>
        <h1>continuous | positive and negative | check: min &gt; dataMin; max &lt; dataMax; </h1>
        <div class="chart" id="main4"></div>
        <h1>category axis</h1>
        <div class="chart" id="mainX0"></div>


        <script>

            require([
                'echarts'
                // 'echarts/chart/line',
                // 'echarts/chart/bar',
                // 'echarts/component/legend',
                // 'echarts/component/grid',
                // 'echarts/component/tooltip',
                // 'echarts/component/visualMap',
                // 'echarts/component/dataZoom'
            ], function (echarts) {

                var main = document.getElementById('mainH');
                if (!main) {
                    return;
                }
                var chart = echarts.init(main);

                var data0 = [];

                var MAX_DIM1 = 100;

                var itemStyle = {
                    normal: {
                        opacity: 0.8,
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.3)'
                    }
                };

                var last = 60;
                var lastDelta = 20;
                for (var i = 0; i < MAX_DIM1; i++) {
                    lastDelta += (Math.random() - 0.5) * 15;
                    data0.push([
                        i,
                        last += lastDelta
                    ]);
                }

                chart.setOption({
                    grid: {
                        top: 100,
                        bottom: 100
                    },
                    xAxis: {
                        type: 'value',
                        splitLine: {
                            show: false
                        }
                    },
                    yAxis: {
                        type: 'value',
                        splitLine: {
                            show: false
                        }
                    },
                    visualMap: [
                        {
                            show: true,
                            left: 'center',
                            bottom: 20,
                            orient: 'horizontal',
                            itemWidth: 20,
                            itemHeight: 200,
                            min: 0,
                            max: MAX_DIM1,
                            calculable: true,
                            range: [5, 95],
                            dimension: 0,
                            inRange: {
                                colorHue: [0, 300],
                                colorLightness: 0.35,
                                colorSaturation: 1
                            },
                            outOfRange: {
                                color: '#eee'
                            }
                        }
                    ],
                    series: [
                        {
                            name: 'hue',
                            type: 'line',
                            barMaxWidth: 10,
                            itemStyle: itemStyle,
                            areaStyle: {normal: {}},
                            data: data0
                        }
                    ]
                });
            });

        </script>


        <script>

            require([
                'echarts'
                // 'echarts/chart/line',
                // 'echarts/component/legend',
                // 'echarts/component/grid',
                // 'echarts/component/tooltip',
                // 'echarts/component/visualMap',
                // 'echarts/component/dataZoom'
            ], function (echarts) {

                var main = document.getElementById('mainZ');
                if (!main) {
                    return;
                }
                var chart = echarts.init(main);

                var xAxisData = [];
                var data1 = [];
                var data2 = [];
                var min = Infinity;
                var max = -Infinity;

                var base1 = Math.round(Math.random() * 30);
                var base2 = base1;
                for (var i = 0; i < 10; i++) {
                    xAxisData.push('类目' + i);
                    base1 += Math.round(Math.random() * 60);

                    if (i > 500 && i < 550) {
                        data1.push(180);
                    }
                    else if (i > 700 && i < 740) {
                        data1.push(-90);
                    }
                    else {
                        data1.push(base1);
                    }

                    base2 += Math.round(Math.random() * 30 - 5);
                    data2.push(base2);

                    min = Math.min(data1[data1.length - 1], data2[data2.length - 1], min);
                    max = Math.max(data1[data1.length - 1], data2[data2.length - 1], max);
                }

                chart.setOption({
                    color: ['#01003D', '#004202'],
                    legend: {
                        data: ['line1', 'line2']
                    },
                    visualMap: {
                        type: 'piecewise',
                        top: 'center',
                        inRange: {
                            opacity: [0.1, 1]
                        },
                        outOfRange: {
                            color: '#fff'
                        },
                        min: min,
                        max: max,
                        minOpen: true,
                        maxOpen: true
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'line'
                        }
                    },
                    xAxis: {
                        data: xAxisData,
                        boundaryGap: false
                    },
                    yAxis: {},
                    series: [{
                        name: 'line1',
                        type: 'line',
                        stack: 'all',
                        symbol: 'none',
                        lineStyle: { normal: {width: 8}},
                        data: data1
                    }, {
                        name: 'line2',
                        type: 'line',
                        stack: 'all',
                        symbol: 'none',
                        lineStyle: { normal: {width: 8}},
                        data: data2
                    }]
                });
            });

        </script>


        <script>

            require([
                'echarts'
                // 'echarts/chart/line',
                // 'echarts/component/legend',
                // 'echarts/component/grid',
                // 'echarts/component/tooltip',
                // 'echarts/component/visualMap',
                // 'echarts/component/dataZoom'
            ], function (echarts) {

                var main = document.getElementById('mainX0');
                if (!main) {
                    return;
                }
                var chart = echarts.init(main);

                var xAxisData = [];
                var data1 = [];

                var base = Math.round(Math.random() * 30);
                for (var i = 0; i < 10; i++) {
                    xAxisData.push('类目' + i);
                    base += Math.round(Math.random() * 10 - 5);

                    if (i > 500 && i < 550) {
                        data1.push(180);
                    }
                    else if (i > 700 && i < 740) {
                        data1.push(-90);
                    }
                    else {
                        data1.push(base);
                    }
                }

                chart.setOption({
                    visualMap: {
                        type: 'piecewise',
                        top: 'center',
                        inRange: {
                            color: ['red', 'green', 'black']
                        },
                        outOfRange: {
                            color: '#aaa'
                        },
                        dimension: 0,
                        min: 0,
                        max: 10
                    },
                    dataZoom: {
                        orient: 'vertical'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'line'
                        }
                    },
                    xAxis: {
                        data: xAxisData,
                        boundaryGap: false
                    },
                    yAxis: {},
                    series: [{
                        name: 'line',
                        type: 'line',
                        stack: 'all',
                        symbol: 'circle',
                        areaStyle: { normal: {} },
                        symbolSize: 10,
                        data: data1
                    }]
                });
            });

        </script>


        <script>

            require([
                'echarts'
                // 'echarts/chart/line',
                // 'echarts/component/legend',
                // 'echarts/component/grid',
                // 'echarts/component/tooltip',
                // 'echarts/component/visualMap',
                // 'echarts/component/dataZoom'
            ], function (echarts) {

                var main = document.getElementById('mainX');
                if (!main) {
                    return;
                }
                var chart = echarts.init(main);

                var xAxisData = [];
                var data1 = [];

                var base = Math.round(Math.random() * 30);
                for (var i = 0; i < 1000; i++) {
                    xAxisData.push('类目' + i);
                    base += Math.round(Math.random() * 10 - 5);

                    if (i > 500 && i < 550) {
                        data1.push(180);
                    }
                    else if (i > 700 && i < 740) {
                        data1.push(-90);
                    }
                    else {
                        data1.push(base);
                    }
                }

                chart.setOption({
                    visualMap: {
                        type: 'piecewise',
                        top: 'center',
                        inRange: {
                            color: ['red', 'green', 'black']
                        },
                        outOfRange: {
                            color: '#aaa'
                        },
                        min: -70,
                        max: 150
                    },
                    dataZoom: {
                        orient: 'vertical'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'line'
                        }
                    },
                    xAxis: {
                        data: xAxisData,
                        boundaryGap: false
                    },
                    yAxis: {},
                    series: [{
                        name: 'line',
                        type: 'line',
                        stack: 'all',
                        symbol: 'circle',
                        areaStyle: { normal: {} },
                        symbolSize: 10,
                        data: data1
                    }]
                });
            });

        </script>


        <script>

            require([
                'echarts'
                // 'echarts/chart/line',
                // 'echarts/component/legend',
                // 'echarts/component/grid',
                // 'echarts/component/tooltip',
                // 'echarts/component/visualMap',
                // 'echarts/component/dataZoom'
            ], function (echarts) {

                var main = document.getElementById('mainX2');
                if (!main) {
                    return;
                }
                var chart = echarts.init(main);

                var xAxisData = [];
                var data1 = [];

                var base = Math.round(Math.random() * 30);
                for (var i = 0; i < 1000; i++) {
                    xAxisData.push('类目' + i);
                    base += Math.round(Math.random() * 10 - 5);

                    if (i > 500 && i < 550) {
                        data1.push(180);
                    }
                    else if (i > 700 && i < 740) {
                        data1.push(-90);
                    }
                    else {
                        data1.push(base);
                    }
                }

                chart.setOption({
                    visualMap: {
                        type: 'piecewise',
                        top: 'center',
                        inRange: {
                            color: ['red', 'green', 'black']
                        },
                        outOfRange: {
                            color: '#aaa'
                        },
                        min: -70,
                        max: 150,
                        minOpen: true,
                        maxOpen: true
                    },
                    dataZoom: {
                        orient: 'vertical'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'line'
                        }
                    },
                    xAxis: {
                        data: xAxisData,
                        boundaryGap: false
                    },
                    yAxis: {},
                    series: [{
                        name: 'line',
                        type: 'line',
                        stack: 'all',
                        symbol: 'circle',
                        areaStyle: { normal: {} },
                        symbolSize: 10,
                        data: data1
                    }]
                });
            });

        </script>


        <script>

            require([
                'echarts'
                // 'echarts/chart/line',
                // 'echarts/component/legend',
                // 'echarts/component/grid',
                // 'echarts/component/tooltip',
                // 'echarts/component/visualMap',
                // 'echarts/component/dataZoom'
            ], function (echarts) {

                var main = document.getElementById('main0');
                if (!main) {
                    return;
                }
                var chart = echarts.init(main);

                var xAxisData = [];
                var data1 = [];

                var base = Math.round(Math.random() * 100);
                for (var i = 0; i < 1000; i++) {
                    xAxisData.push('类目' + i);
                    base += Math.round(Math.random() * 10 - 5);

                    if (i > 500 && i < 550) {
                        data1.push(130);
                    }
                    else if (i > 700 && i < 740) {
                        data1.push(-20);
                    }
                    else {
                        data1.push(base);
                    }
                }

                chart.setOption({
                    visualMap: {
                        type: 'piecewise',
                        top: 'center',
                        inRange: {
                            color: ['red', 'green', 'black']
                        },
                        outOfRange: {
                            color: '#aaa'
                        },
                        pieces: [{
                            lte: 120,
                            gt: 100,
                            color: 'red'
                        }, {
                            lt: 80,
                            gt: 70
                        }, {
                            lt: 90,
                            gt: 50
                        }, {
                            lte: 40
                        }]
                    },
                    dataZoom: {
                        orient: 'vertical'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'line'
                        }
                    },
                    xAxis: {
                        data: xAxisData,
                        boundaryGap: false
                    },
                    yAxis: {},
                    series: [{
                        name: 'line',
                        type: 'line',
                        stack: 'all',
                        symbol: 'circle',
                        areaStyle: { normal: {} },
                        symbolSize: 10,
                        data: data1
                    }]
                });
            });

        </script>


        <script>

            require([
                'echarts'
                // 'echarts/chart/line',
                // 'echarts/component/legend',
                // 'echarts/component/grid',
                // 'echarts/component/tooltip',
                // 'echarts/component/visualMap',
                // 'echarts/component/dataZoom'
            ], function (echarts) {

                var main = document.getElementById('main1');
                if (!main) {
                    return;
                }
                var chart = echarts.init(main);

                var xAxisData = [];
                var data1 = [];

                var base = -Math.round(Math.random() * 500 + 500);
                var min = Infinity;
                var max = -Infinity;
                for (var i = 0; i < 1000; i++) {
                    xAxisData.push('类目' + i);
                    base -= Math.round(Math.random() * 2);
                    data1.push(base);

                    base > max && (max = base);
                    base < min && (min = base);
                }

                max += 500;
                min -= 500;

                chart.setOption({
                    visualMap: {
                        top: 'center',
                        calculable: true,
                        type: 'continuous',
                        inRange: {
                            color: ['red', 'green', 'black']
                        },
                        outOfRange: {
                            color: '#aaa'
                        },
                        range: [min + 100, max - 100],
                        min: min,
                        max: max
                    },
                    dataZoom: {
                        orient: 'vertical'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'line'
                        }
                    },
                    xAxis: {
                        data: xAxisData,
                        boundaryGap: false
                    },
                    yAxis: {},
                    series: [{
                        name: 'line',
                        type: 'line',
                        stack: 'all',
                        symbol: 'circle',
                        areaStyle: { normal: {} },
                        symbolSize: 10,
                        data: data1
                    }]
                });
            });

        </script>


        <script>

            require([
                'echarts'
                // 'echarts/chart/line',
                // 'echarts/component/legend',
                // 'echarts/component/grid',
                // 'echarts/component/tooltip',
                // 'echarts/component/visualMap',
                // 'echarts/component/dataZoom'
            ], function (echarts) {

                var main = document.getElementById('main2');
                if (!main) {
                    return;
                }
                var chart = echarts.init(main);

                var xAxisData = [];
                var data1 = [];

                var base = Math.round(Math.random() * 500 + 500);
                var min = Infinity;
                var max = -Infinity;
                for (var i = 0; i < 1000; i++) {
                    xAxisData.push('类目' + i);
                    base += Math.round(Math.random() * 500);
                    data1.push(base);

                    base > max && (max = base);
                    base < min && (min = base);
                }

                max += 100;
                min -= 100;

                chart.setOption({
                    visualMap: {
                        orient: 'horizontal',
                        left: 'center',
                        top: 0,
                        inverse: true,
                        calculable: true,
                        type: 'continuous',
                        inRange: {
                            color: ['red', 'green', 'black']
                        },
                        outOfRange: {
                            color: '#aaa'
                        },
                        range: [min + 80, max - 80],
                        dimension: 0,
                        min: min,
                        max: max
                    },
                    dataZoom: {
                        orient: 'vertical'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'line'
                        }
                    },
                    yAxis: {
                        data: xAxisData,
                        boundaryGap: false
                    },
                    xAxis: {
                        type: 'log',
                        inverse: true
                    },
                    series: [{
                        name: 'line',
                        type: 'line',
                        stack: 'all',
                        symbol: 'circle',
                        areaStyle: { normal: {} },
                        symbolSize: 10,
                        data: data1
                    }]
                });
            });

        </script>


        <script>

            require([
                'echarts'
                // 'echarts/chart/line',
                // 'echarts/component/legend',
                // 'echarts/component/grid',
                // 'echarts/component/tooltip',
                // 'echarts/component/visualMap',
                // 'echarts/component/dataZoom'
            ], function (echarts) {

                var main = document.getElementById('main4');
                if (!main) {
                    return;
                }
                var chart = echarts.init(main);

                var xAxisData = [];
                var data1 = [];

                var base = Math.round(Math.random() * 100);
                var min = Infinity;
                var max = -Infinity;
                for (var i = 0; i < 1000; i++) {
                    xAxisData.push('类目' + i);
                    base += Math.round(Math.random() * 240 - 120);
                    data1.push(base);

                    base > max && (max = base);
                    base < min && (min = base);
                }

                var span = max - min;

                max -= span / 6;
                min += span / 6;

                chart.setOption({
                    visualMap: {
                        top: 'center',
                        calculable: true,
                        type: 'continuous',
                        inRange: {
                            color: ['red', 'green', 'black']
                        },
                        outOfRange: {
                            color: '#aaa'
                        },
                        min: min,
                        max: max
                    },
                    dataZoom: {
                        orient: 'vertical'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'line'
                        }
                    },
                    xAxis: {
                        data: xAxisData,
                        boundaryGap: false
                    },
                    yAxis: {},
                    series: [{
                        name: 'line',
                        type: 'line',
                        stack: 'all',
                        symbol: 'circle',
                        areaStyle: { normal: {} },
                        symbolSize: 10,
                        data: data1
                    }]
                });
            });

        </script>

    </body>
</html>