test/line-visual.html - master - githubmirror/echarts

test/line-visual.html
863 строки24 KB
pissang
test: use simpleRequire to replace esl
06 май 2021, 11:47
06 май 2021, 11:478544dd7

<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="lib/simpleRequire.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'
            ], 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'
            ], 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'
            ], 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'
            ], 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'
            ], 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'
            ], 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'
            ], 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'
            ], 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'
            ], 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>