<!DOCTYPE html>
<!--
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">
        <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>
        <script src="data/symbols.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: 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 and positive symbolBoundingData | 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 | axisPointer.type 'none' label show</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',
                    cursor: 'move',
                    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: 40,
                    symbolRotate: 30,
                    z: -1,
                    data: [-12, -60, 34, '-', 23, -2, 0, -25]
                }, {
                    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, 34, '-', 23, -2, 0, -25]
                }, {
                    name: 'data',
                    type: 'pictorialBar',
                    itemStyle: {
                        emphasis: {
                            color: 'blue'
                        }
                    },
                    symbol: pathSymbols.pumpkin,
                    symbolRepeat: true,
                    symbolClip: true,
                    symbolRotate: 30,
                    symbolBoundingData: [-60, 40],
                    data: [-12, -60, 34, '-', 23, -2, 0, -25]
                }, {
                    name: 'original bar',
                    type: 'bar',
                    color: ['rgba(0,0,0,0.5)'],
                    data: [-12, -60, 34, '-', 23, -2, 0, -25]
                }, {
                    name: 'original bg',
                    type: 'bar',
                    color: ['rgba(0,0,0,0.5)'],
                    data: [-60, -60, 40, '-', 40, -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: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'none',
                        label: {show: true}
                    }
                },
                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>