seimin
/
itsm-pc-handle


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842
							<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <script src="esl.js"></script>
        <script src="config.js"></script>
        <script src="lib/jquery.min.js"></script>
        <script src="lib/facePrint.js"></script>
        <script src="data/symbols.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="reset.css">
    </head>
    <body>
        <style>
            body {
            }
            .chart {
                position: relative;
                height: 500px;
                max-width: 1000px;
                margin: 0 auto;
            }
            h2 {
                text-align: center;
                font-size: 16px;
                line-height: 30px;
                font-weight: normal;
                background: #dde;
            }
        </style>

        <h2>vertical | no clip | symbol w/h ratio and margin '40%!'</h2>
        <div class="chart" id="main1"></div>
        <h2>vertical | no clip | symbol w/h ratio and margin '40%' (notice 0 value)</h2>
        <div class="chart" id="main1.x"></div>
        <h2>vertical | clip | fixed repeatTimes</h2>
        <div class="chart" id="main1.1"></div>
        <h2>dataURI | symbolSize responsive (<strong>TRY RESIZE</strong>)</h2>
        <div class="chart" id="symbolSize"></div>
        <h2>horizontal | clip | positive | rotate</h2>
        <div class="chart" id="main2"></div>
        <h2>horizontal | clip | negative | no animation</h2>
        <div class="chart" id="main3"></div>
        <h2>negative symbolMargin | symbolPosition (check whether overflow)</h2>
        <div class="chart" id="main4"></div>
        <h2>repeat strategy | dynamic data</h2>
        <div class="chart" id="dynamic-data"></div>

        <script>

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

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

                        cb && cb(echarts, chart);
                    }

                });
            }

        </script>


        <script>
            makeChart('main1', {
                legend: {
                    data: ['data', 'data2', 'bg', 'original bar', 'original bg'],
                    selected: {
                        'original bar': false,
                        'original bg': false
                    }
                },
                tooltip: {
                },
                yAxis: {
                    data: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'],
                    axisTick: {show: false}
                },
                xAxis: {
                    splitLine: {show: false}
                },
                // animationDuration: 2000,
                // animationDurationUpdate: 2000,
                series: [{
                    name: 'data',
                    type: 'pictorialBar',
                    label: {
                        normal: {
                            show: true,
                            position: 'outside',
                            offset: [40, 0]
                        }
                    },
                    symbol: pathSymbols.plane,
                    symbolRepeat: true,
                    symbolMargin: '40%!',
                    symbolSize: ['100%', '80%'],
                    z: 10,
                    data: [12, 60, 54, '-', 23, -16, 0, 25]
                }, {
                    name: 'data2',
                    type: 'pictorialBar',
                    symbol: pathSymbols.plane,
                    barGap: '20%',
                    symbolRepeat: true,
                    symbolMargin: '40%!',
                    symbolSize: ['100%', '80%'],
                    z: 10,
                    data: [33, 1, 41, -18, 23, -56, 0, 15]
                }, {
                    name: 'original bar',
                    type: 'bar',
                    color: ['rgba(0,0,0,0.5)'],
                    data: [12, 60, 54, '-', 23, -16, 0, 25]
                }, {
                    name: 'original bg',
                    type: 'bar',
                    color: ['rgba(0,0,0,0.5)'],
                    data: [60, 60, 60, '-', 60, -30, 60, 60]
                }]
            });
        </script>


        <script>
            makeChart('main1.x', {
                legend: {
                    data: ['data', 'data2', 'bg', 'original bar', 'original bg'],
                    selected: {
                        'original bar': false,
                        'original bg': false
                    }
                },
                tooltip: {
                },
                yAxis: {
                    data: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'],
                    axisTick: {show: false}
                },
                xAxis: {
                    splitLine: {show: false}
                },
                // animationDuration: 2000,
                // animationDurationUpdate: 2000,
                series: [{
                    name: 'data',
                    type: 'pictorialBar',
                    label: {
                        normal: {
                            show: true,
                            position: 'outside',
                            offset: [40, 0]
                        }
                    },
                    symbol: pathSymbols.plane,
                    symbolRepeat: true,
                    symbolMargin: '40%',
                    symbolSize: ['100%', '80%'],
                    z: 10,
                    data: [12, 60, 54, '-', 23, -16, 0, 25]
                }, {
                    name: 'data2',
                    type: 'pictorialBar',
                    symbol: pathSymbols.plane,
                    barGap: '20%',
                    symbolRepeat: true,
                    symbolMargin: '40%',
                    symbolSize: ['100%', '80%'],
                    z: 10,
                    data: [33, 1, 41, -18, 23, -56, 0, 15]
                }, {
                    name: 'original bar',
                    type: 'bar',
                    color: ['rgba(0,0,0,0.5)'],
                    data: [12, 60, 54, '-', 23, -16, 0, 25]
                }, {
                    name: 'original bg',
                    type: 'bar',
                    color: ['rgba(0,0,0,0.5)'],
                    data: [60, 60, 60, '-', 60, -30, 60, 60]
                }]
            });
        </script>


        <script>
            makeChart('main1.1', {
                legend: {
                    data: ['data'],
                    selected: {
                        'original bar': false,
                        'original bg': false
                    }
                },
                tooltip: {
                },
                yAxis: {
                    data: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'],
                    axisTick: {show: false},
                    axisLine: {show: false}
                },
                xAxis: {
                    splitLine: {show: false},
                    axisTick: {show: false},
                    axisLabel: {show: false},
                    axisLine: {show: false}
                },
                // animationDuration: 2000,
                // animationDurationUpdate: 2000,
                series: [{
                    name: 'data',
                    type: 'pictorialBar',
                    symbol: pathSymbols.pentagram,
                    symbolRepeat: 5,
                    itemStyle: {
                        normal: {
                            color: '#ddd'
                        }
                    },
                    animation: false,
                    silent: true,
                    data: [12, 60, 54, 25, 23, 16, 1, 25],
                    z: -1
                }, {
                    name: 'data',
                    type: 'pictorialBar',
                    symbol: pathSymbols.pentagram,
                    symbolRepeat: 5,
                    symbolClip: true,
                    z: 10,
                    data: [12, 60, 54, 25, 23, 16, 1, 25]
                }]
            });
        </script>


        <script>

            makeChart('symbolSize', {
                color: ['#e54035'],
                xAxis: {
                    splitLine: {show: false},
                    axisTick: {show: false},
                    axisLine: {show: false},
                    axisLabel: {show: false}
                },
                yAxis: {
                    data: ['a', 'b', 'c'],
                    axisTick: {show: false},
                    axisLine: {show: false},
                    axisLabel: {show: false}
                },
                grid: {
                    height: 80
                },
                series: [{
                    name: 'glyph',
                    type: 'pictorialBar',
                    symbol: imageSymbols.spirit,
                    symbolRepeat: 10,
                    symbolSize: [20, 20],
                    data: [100, 100, 100]
                }, {
                    name: 'glyph',
                    type: 'pictorialBar',
                    symbol: 'rect',
                    symbolSize: ['20%', 24],
                    symbolPosition: 'center',
                    itemStyle: {
                        normal: {
                            color: '#e54035'
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            formatter: '16 亿',
                            textStyle: {
                                color: '#fff',
                                fontSize: 18,
                                fontFamily: 'Arial',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    data: ['-', 100, '-'],
                    z: 100
                }]
            });
        </script>


        <script>
            makeChart('main2', {
                legend: {
                    data: ['data', 'original bar', 'original bg'],
                    selected: {
                        'original bar': false,
                        'original bg': false
                    }
                },
                tooltip: {
                    // trigger: 'axis',
                    // axisPointer: {
                    //     type: 'line'
                    // }
                },
                xAxis: {
                    data: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'],
                    axisTick: {show: false}
                },
                yAxis: {
                    splitLine: {show: false}
                },
                series: [{
                    name: 'data',
                    type: 'pictorialBar',
                    symbol: pathSymbols.pumpkin,
                    symbolRotate: 30,
                    itemStyle: {
                        normal: {
                            color: '#ddd'
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'outside',
                            textStyle: {
                                color: '#c23531',
                                fontSize: 20
                            }
                        }
                    },
                    silent: true,
                    symbolRepeat: 'fixed',
                    animation: false,
                    symbolBoundingData: 60,
                    data: [12, 60, 54, '-', 23, 2, 0, 25]
                }, {
                    name: 'data',
                    type: 'pictorialBar',
                    symbol: pathSymbols.pumpkin,
                    symbolRotate: 30,
                    symbolRepeat: true,
                    symbolClip: true,
                    symbolBoundingData: 60,
                    z: 10,
                    data: [12, 60, 54, '-', 23, -2, 0, 25]
                }, {
                    name: 'original bar',
                    type: 'bar',
                    color: ['rgba(0,0,0,0.5)'],
                    data: [12, 60, 54, '-', 23, -2, 0, 25]
                }, {
                    name: 'original bg',
                    type: 'bar',
                    color: ['rgba(0,0,0,0.5)'],
                    data: [60, 60, 60, '-', 60, 60, 60, 60]
                }]
            });
        </script>


        <script>
            makeChart('main3', {
                animation: false,
                legend: {
                    data: ['data', 'bg', 'original bar', 'original bg'],
                    selected: {
                        'original bar': false,
                        'original bg': false
                    }
                },
                tooltip: {
                    // trigger: 'axis',
                    // axisPointer: {
                    //     type: 'line'
                    // }
                },
                xAxis: {
                    data: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'],
                    axisTick: {show: false},
                    position: 'top'
                },
                yAxis: {
                    splitLine: {show: false}
                },
                series: [{
                    name: 'bg',
                    type: 'pictorialBar',
                    symbol: pathSymbols.pumpkin,
                    itemStyle: {
                        normal: {
                            color: '#ddd'
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'outside',
                            textStyle: {
                                color: '#c23531',
                                fontSize: 20
                            }
                        }
                    },
                    silent: true,
                    symbolRepeat: 'fixed',
                    symbolClip: false,
                    symbolBoundingData: -60,
                    symbolRotate: 30,
                    z: -1,
                    data: [-12, -60, -54, '-', -23, -2, 0, -25]
                }, {
                    name: 'data',
                    type: 'pictorialBar',
                    itemStyle: {
                        emphasis: {
                            color: 'blue'
                        }
                    },
                    symbol: pathSymbols.pumpkin,
                    symbolRepeat: true,
                    symbolClip: true,
                    symbolRotate: 30,
                    symbolBoundingData: -60,
                    data: [-12, -60, -54, '-', -23, -2, 0, -25]
                }, {
                    name: 'original bar',
                    type: 'bar',
                    color: ['rgba(0,0,0,0.5)'],
                    data: [-12, -60, -54, '-', -23, -2, 0, -25]
                }, {
                    name: 'original bg',
                    type: 'bar',
                    color: ['rgba(0,0,0,0.5)'],
                    data: [-60, -60, -60, '-', -60, -60, -60, -60]
                }]
            });
        </script>


        <script>

            makeChart('main4', {
                color: ['#bb0004', 'orange'],
                xAxis: {
                    data: [],
                    axisTick: {show: false},
                    axisLabel: {show: false}
                },
                yAxis: {
                    splitLine: {show: false},
                    axisTick: {show: false},
                    axisLine: {show: false},
                    axisLabel: {show: false}
                },
                grid: {
                    bottom: 100
                },
                animationEasing: 'elasticOut',
                series: [{
                    name: 'all',
                    type: 'pictorialBar',
                    barCategoryGap: '40%',
                    label: {
                        normal: {
                            show: true,
                            position: 'outside'
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderColor: 'rgba(0,0,0,0.5)',
                            borderWidth: 6
                        }
                    },
                    symbol: 'circle',
                    data: [{
                        value: 29000,
                        symbolBoundingData: 29000,
                        symbolRepeat: true,
                        label: {normal: {formatter: 'start'}}
                    }, {
                        value: 29000,
                        symbolBoundingData: 29000,
                        symbolRepeat: true,
                        symbolSize: ['80%', '20%'],
                        label: {normal: {formatter: 'start'}}
                    }, {
                        value: 29000,
                        symbolBoundingData: 29000,
                        symbolRepeat: true,
                        symbolMargin: 10,
                        label: {normal: {formatter: 'start'}}
                    }, {
                        value: 29000,
                        symbolBoundingData: 29000,
                        symbolRepeat: true,
                        symbolMargin: 30,
                        symbolSize: ['100%', 160],
                        label: {normal: {formatter: 'start'}}
                    }, {
                        value: 29000,
                        symbolBoundingData: 29000,
                        symbolRepeat: true,
                        symbolMargin: 30,
                        symbolSize: ['100%', 160],
                        symbolPosition: 'center',
                        label: {normal: {formatter: 'center'}}
                    }, {
                        value: 29000,
                        symbolBoundingData: 29000,
                        symbolRepeat: true,
                        symbolMargin: 30,
                        symbolSize: ['100%', 160],
                        symbolPosition: 'end',
                        label: {normal: {formatter: 'end'}}
                    }, {
                        value: 29000,
                        symbolBoundingData: 29000,
                        symbolRepeat: true,
                        symbolSize: ['80%', '120%'],
                        symbolMargin: '-30%',
                        label: {normal: {formatter: 'start'}}
                    }, {
                        value: 29000,
                        symbolBoundingData: 29000,
                        symbolRepeat: true,
                        symbolSize: ['80%', '120%'],
                        symbolMargin: '-30%',
                        symbolPosition: 'center',
                        label: {normal: {formatter: 'center'}}
                    }, {
                        value: 29000,
                        symbolBoundingData: 29000,
                        symbolRepeat: true,
                        symbolRotate: 80,
                        symbolSize: ['80%', '120%'],
                        symbolMargin: '-30%',
                        symbolPosition: 'end',
                        label: {normal: {formatter: 'end'}}
                    }, {
                        value: 19000,
                        symbolPosition: 'start',
                        label: {normal: {formatter: 'start'}}
                    }, {
                        value: 19000,
                        symbolSize: ['60%', '20%'],
                        symbolPosition: 'start',
                        label: {normal: {formatter: 'start'}}
                    }, {
                        value: 19000,
                        symbolSize: ['60%', '20%'],
                        symbolPosition: 'center',
                        label: {normal: {formatter: 'center'}}
                    }, {
                        value: 19000,
                        symbolSize: ['60%', '20%'],
                        symbolPosition: 'end',
                        label: {normal: {formatter: 'end'}}
                    }, {
                        value: 19000,
                        symbolSize: ['60%', '150%'],
                        symbolPosition: 'start',
                        label: {normal: {formatter: 'start'}}
                    }, {
                        value: 19000,
                        symbolSize: ['60%', '150%'],
                        symbolPosition: 'center',
                        label: {normal: {formatter: 'center'}}
                    }, {
                        value: 19000,
                        symbolSize: ['60%', '150%'],
                        symbolPosition: 'end',
                        label: {normal: {formatter: 'end'}}
                    }, {
                        value: 190,
                        symbolPosition: 'end',
                        label: {normal: {formatter: 'min'}}
                    }],
                    z: 10
                }, {
                    name: 'shadow2',
                    type: 'bar',
                    data: [29000, 29000, 29000, 29000, 29000, 29000, 29000, 29000, 29000, 19000, 19000, 19000, 19000, 19000, 19000, 19000, 19]
                }]
            });
        </script>


        <script>

            var startData = 13000;
            var maxData = 18000;
            var minData = 5000;

            makeChart('dynamic-data', {
                backgroundColor: '#0f375f',
                tooltip: {},
                legend: {
                    data: ['all'],
                    textStyle: {color: '#ddd'}
                },
                grid: {
                    bottom: 100
                },
                xAxis: [{
                    data: [
                        'standard',
                        'fix symbol margin\n(not accurate)\n(but more comparable)',
                        'use symbolBoundingData\nauto repeat times\n(accurate)\n(but symbolMargin not fixed)',
                        'use symbolBoundingData\nfix repeat times\n(accurate)\n(but less responsive)'
                    ],
                    axisTick: {show: false},
                    axisLine: {
                        lineStyle: {
                            color: '#ddd'
                        }
                    },
                    axisLabel: {
                        margin: 20,
                        interval: 0,
                        textStyle: {
                            color: '#ddd',
                            fontSize: 14
                        }
                    }
                }],
                yAxis: {
                    splitLine: {show: false},
                    axisTick: {
                        lineStyle: {
                            color: '#ddd'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#ddd'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#ddd'
                        }
                    }
                },
                animationEasing: 'cubicOut',
                animationDuration: 100,
                animationDurationUpdate: 2000,
                series: [{
                    type: 'pictorialBar',
                    name: 'all',
                    id: 'paper',
                    hoverAnimation: true,
                    label: {
                        normal: {
                            show: true,
                            position: 'top',
                            formatter: '{c} km',
                            textStyle: {
                                fontSize: 16,
                                color: '#e54035'
                            }
                        }
                    },
                    symbol: imageSymbols.paper,
                    symbolSize: ['70%', 50],
                    symbolMargin: '-25%',
                    data: [{
                        value: maxData,
                        symbolRepeat: true
                    }, {
                        value: startData,
                        symbolRepeat: true
                    }, {
                        value: startData,
                        symbolBoundingData: startData,
                        symbolRepeat: true
                    }, {
                        value: startData,
                        symbolBoundingData: startData,
                        symbolRepeat: 20
                    }],
                    markLine: {
                        symbol: ['none', 'none'],
                        label: {
                            normal: {show: false}
                        },
                        lineStyle: {
                            normal: {
                                color: '#e54035'
                            }
                        },
                        data: [{
                            yAxis: startData
                        }]
                    }
                }, {
                    name: 'all',
                    type: 'pictorialBar',
                    symbol: 'circle',
                    itemStyle: {
                        normal: {
                            color: '#185491'
                        }
                    },
                    silent: true,
                    symbolSize: ['150%', 50],
                    symbolOffset: [0, 20],
                    z: -10,
                    data: [1, 1, 1, 1]
                }]
            }, function (echarts, chart) {

                setInterval(function () {
                    var dynamicData = Math.round(Math.random() * (maxData - minData) + minData);

                    chart.setOption({
                        series: [{
                            id: 'paper',
                            data: [{
                                value: maxData,
                                symbolRepeat: true
                            }, {
                                value: dynamicData,
                                symbolRepeat: true
                            }, {
                                value: dynamicData,
                                symbolBoundingData: dynamicData,
                                symbolRepeat: true
                            }, {
                                value: dynamicData,
                                symbolBoundingData: dynamicData,
                                symbolRepeat: 20
                            }],
                            markLine: {
                                data: [{
                                    yAxis: dynamicData
                                }]
                            }
                        }]
                    });
                }, 3000);
            });
        </script>


    </body>
</html>