<!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">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/echarts/theme/vintage.js"></script>
    </head>
    <body>
        <style>
            .chart {
                width: 650px;
                height: 300px;
                margin: 200px auto;
            }
            .chart1 {
                height: 180px;
            }
            .bone {
                color: #aaa;
                margin: 0 20px;
            }
            body {
                /* background: #ddd; */
                padding: 20px;
            }
            .chart-coord-sys {
                width: 400px;
                height: 400px;
            }
            .chart-coord-sys2 {
                width: 500px;
                height: 400px;
            }
        </style>


        <div id="series-0" class="chart"></div>
        <div id="series-1" class="chart"></div>
        <div id="components" class="chart"></div>
        <div id="locate" class="chart"></div>
        <div id="coord-sys0" class="chart chart-coord-sys"></div>
        <div id="coord-sys1" class="chart chart-coord-sys"></div>
        <div id="coord-sys2" class="chart chart-coord-sys2"></div>


        <script>
            var dom0 = document.getElementById('series-0');

            var chart0 = echarts.init(dom0, 'vintage');

            var option0 = {
                backgroundColor: '#fff',
                xAxis: [{
                    type: 'category',
                    splitLine: {show: false}
                }],
                yAxis: [{
                    splitLine: {show: false}
                }],
                grid: [{
                }],
                // legend: {},
                dataset: {
                    source: [
                        ['Jan', 34, 20, 54],
                        ['Feb', 28, 14, 64],
                        ['Mar', 45, 32, 43],
                        ['Apr', 69, 46, 74],
                        ['May', 39, 24, 94],
                        ['Jun', 43, 23, 64],
                        ['Jul', 33, 23, 44],
                        ['Aug', 23, 13, 30],
                        ['Sep', 23, 16, 21],
                        ['Oct', 33, 20, 28],
                        ['Nov', 39, 24, 34],
                        ['Dec', 22, 15, 25],
                    ]
                },
                series: [{
                    name: 'series0',
                    type: 'line'
                }, {
                    name: 'series1',
                    type: 'bar'
                }, {
                    name: 'series2',
                    type: 'pie',
                    center: ['65%', 60],
                    radius: 35,
                    data: [
                        {name: 'XX', value: 52},
                        {name: 'YY', value: 54},
                        {name: 'ZZ', value: 42}
                    ]
                }]
            };

            chart0.setOption(option0);


        </script>


        <script>
            var dom = document.getElementById('series-1');

            var chart = echarts.init(dom, 'vintage');

            var option = {
                backgroundColor: '#fff',
                xAxis: [{
                    type: 'category',
                    splitLine: {show: false}
                }],
                yAxis: [{
                    splitLine: {show: false}
                }],
                dataset: {
                    source: [
                        ['Jan', 34, 20, 'XX', 52],
                        ['Feb', 28, 14, 'YY', 54],
                        ['Mar', 45, 32, 'ZZ', 42],
                        ['Apr', 69, 46],
                        ['May', 39, 24],
                        ['Jun', 43, 23],
                        ['Jul', 33, 23],
                        ['Aug', 23, 13],
                        ['Sep', 23, 16],
                        ['Oct', 33, 20],
                        ['Nov', 39, 24],
                        ['Dec', 22, 15],
                    ]
                },
                series: [{
                    type: 'line',
                    encode: {x:0, y: 1}
                }, {
                    type: 'bar',
                    encode: {x:0, y: 2}
                }, {
                    type: 'pie',
                    center: ['65%', 60],
                    radius: 35,
                    encode: {
                        itemName: 3,
                        value: 4
                    }
                }]
            };

            chart.setOption(option);


        </script>


        <script>
            var dom0 = document.getElementById('components');

            var chart0 = echarts.init(dom0, 'vintage');

            var option0 = {
                backgroundColor: '#fff',
                xAxis: [{
                    type: 'time',
                    splitLine: {show: false},
                    axisLabel: {
                        formatter: function (params) {
                            return echarts.format.formatTime('yyyy-MM-dd', params);
                        }
                    }
                }],
                yAxis: [{
                    splitLine: {show: false}
                }],
                grid: [{
                    bottom: 85,
                    right: 100
                }],
                legend: {
                    data: ['MGT', 'QEL']
                },
                toolbox: {
                    right: 5,
                    feature: {
                        dataZoom: {},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                dataZoom: {
                    showDetail: true
                },
                visualMap: {
                    type: 'continuous',
                    dimension: 3,
                    seriesIndex: 1,
                    min: 0,
                    max: 1000,
                    inRange: {
                        color: ['#E5F9E0', '#2F9C95']
                    },
                    outOfRange: {
                        color: '#aaa'
                    },
                    calculable: true,
                    right: 5,
                    top: 'center'
                },
                tooltip: {
                    trigger: 'axis'
                },
                dataset: {
                    source: [
                        ['2012-09-01', 34, 20, 623],
                        ['2012-09-02', 28, 14, 414],
                        ['2012-09-03', 45, 32, 355],
                        ['2012-09-04', 69, 46, 471],
                        ['2012-09-05', 39, 24, 519],
                        ['2012-09-06', 43, 23, 813],
                        ['2012-09-07', 33, 23, 901],
                        ['2012-09-08', 23, 13, 791],
                        ['2012-09-09', 23, 16, 413],
                        ['2012-09-10', 33, 20, 215],
                        ['2012-09-11', 39, 24, 316],
                        ['2012-09-12', 42, 32, 613],
                        ['2012-09-13', 34, 25, 812],
                        ['2012-09-14', 30, 21, 710],
                        ['2012-09-15', 22, 15, 601],
                        ['2012-09-16', 19, 11, 400],
                        ['2012-09-17', 24, 15, 231],
                        ['2012-09-18', 29, 19, 124],
                        ['2012-09-19', 35, 23, 301],
                        ['2012-09-20', 21, 10, 401],
                        ['2012-09-21', 26, 19, 501],
                        ['2012-09-22', 43, 32, 601],
                        ['2012-09-23', 34, 21, 701]
                    ]
                },
                series: [{
                    name: 'MGT',
                    type: 'line',
                    showSymbol: false,
                    encode: {
                        x: 0,
                        y: 1
                    }
                }, {
                    name: 'QEL',
                    type: 'bar',
                    encode: {
                        x: 0,
                        y: 2
                    }
                }]
            };

            chart0.setOption(option0);
        </script>


        <script>
            var dom0 = document.getElementById('locate');

            var chart0 = echarts.init(dom0, 'vintage');

            var option0 = {
                backgroundColor: '#eee',
                xAxis: [{
                    type: 'time',
                    splitLine: {show: false}
                }],
                yAxis: [{
                    splitLine: {show: false}
                }],
                grid: [{
                    left: 130,
                    right: '30%',
                    height: '40%',
                    bottom: 110
                }],
                dataset: {
                    source: [
                        ['2012-09-01', 34, 20, 623],
                        ['2012-09-02', 28, 14, 414],
                        ['2012-09-03', 45, 32, 355],
                        ['2012-09-04', 69, 46, 471],
                        ['2012-09-05', 39, 24, 519],
                        ['2012-09-06', 43, 23, 813],
                        ['2012-09-07', 33, 23, 901],
                        ['2012-09-08', 23, 13, 791],
                        ['2012-09-09', 23, 16, 413],
                        ['2012-09-10', 33, 20, 215],
                        ['2012-09-11', 39, 24, 316],
                        ['2012-09-12', 42, 32, 613],
                        ['2012-09-13', 34, 25, 812],
                        ['2012-09-14', 30, 21, 710],
                        ['2012-09-15', 22, 15, 601],
                        ['2012-09-16', 19, 11, 400],
                        ['2012-09-17', 24, 15, 231],
                        ['2012-09-18', 29, 19, 124],
                        ['2012-09-19', 35, 23, 301],
                        ['2012-09-20', 21, 10, 401],
                        ['2012-09-21', 26, 19, 501],
                        ['2012-09-22', 43, 32, 601],
                        ['2012-09-23', 34, 21, 701]
                    ]
                },
                series: [{
                    name: 'MGT',
                    type: 'line',
                    showSymbol: false,
                    encode: {
                        x: 0,
                        y: 1
                    }
                }, {
                    name: 'QEL',
                    type: 'bar',
                    encode: {
                        x: 0,
                        y: 2
                    }
                }]
            };

            chart0.setOption(option0);
        </script>


        <script>
            var dom0 = document.getElementById('coord-sys0');

            var chart0 = echarts.init(dom0, 'vintage');

            var option = {
                color: ['blue'],
                backgroundColor: '#fff',
                xAxis: {},
                yAxis: {},
                series: {
                    type: 'scatter',
                    data: [
                        [13, 44],
                        [51, 51],
                        [51, 32],
                        [67, 19],
                        [19, 33]
                    ]
                }
            }

            chart0.setOption(option);


        </script>


        <script>
            var dom0 = document.getElementById('coord-sys1');

            var chart0 = echarts.init(dom0, 'vintage');

            var option = {
                color: ['#f0cf85', '#61a0a8'],
                backgroundColor: '#fff',
                xAxis: {
                    axisLine: {lineStyle: {color: '#aaa'}},
                    axisLabel: {color: '#000'},
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: [
                    {
                        splitLine: {show: false},
                        axisLine: {lineStyle: {width: 4, color: '#f0cf85'}},
                        axisLabel: {color: '#000'}
                    },
                    {
                        splitLine: {show: false},
                        axisLine: {lineStyle: {width: 4, color: '#61a0a8'}},
                        axisLabel: {color: '#000'}
                    }
                ],
                series: [{
                    type: 'bar',
                    data: [242, 344, 324, 475, 264, 467, 531],
                    barWidth: '60%'
                }, {
                    type: 'line',
                    data: [44, 51, 32, 19, 33, 24, 12],
                    lineStyle: {width: 8},
                    symbolSize: 12,
                    yAxisIndex: 1
                }]
            };

            chart0.setOption(option);


        </script>


        <script>
            var dom0 = document.getElementById('coord-sys2');

            var chart0 = echarts.init(dom0, 'vintage');

            var option = {
                dataset: {
                    source: [
                        ['Jan', 25, 54, 24],
                        ['Feb', 22, 64, 14],
                        ['Mar', 62, 43, 39],
                        ['Apr', 45, 74, 50],
                        ['May', 34, 94, 25],
                        ['Jun', 43, 64, 23],
                        ['Jul', 33, 44, 23],
                        ['Aug', 23, 30, 13],
                        ['Sep', 43, 21, 20],
                        ['Oct', 33, 28, 24],
                        ['Nov', 39, 34, 33],
                        ['Dec', 45, 44, 39],
                    ]
                },
                grid: [{
                    top: 40,
                    bottom: '58%',
                    borderColor: '#ccc',
                    borderWidth: 1,
                    show: true
                }, {
                    top: '58%',
                    bottom: 40,
                    borderColor: '#ccc',
                    borderWidth: 1,
                    show: true
                }],
                xAxis: [{
                    type: 'category',
                    splitLine: {show: false},
                    gridIndex: 0
                }, {
                    type: 'category',
                    splitLine: {show: false},
                    gridIndex: 1
                }],
                yAxis: [{
                    splitLine: {show: false},
                    gridIndex: 0
                }, {
                    splitLine: {show: false},
                    gridIndex: 1
                }],
                series: [{
                    type: 'line',
                    xAxisIndex: 0,
                    yAxisIndex: 0
                }, {
                    type: 'line',
                    xAxisIndex: 1,
                    yAxisIndex: 1
                }, {
                    type: 'bar',
                    xAxisIndex: 1,
                    yAxisIndex: 1
                }]
            };

            chart0.setOption(option);


        </script>


        <template>


            var dom1 = document.getElementById('id1');
            var instance1 = echarts.init(dom1);
            var option1 = {
              xAxis: [{...}, {...}],
              yAxis: [{...}, {...}],
              grid: [{...}, {...}],
              series: [
                {type: 'line', data: [...]},
                {type: 'bar', data: [...]},
                {type: 'bar', data: [...]},
                {type: 'pie', data: [...]}
              }]
            };
            instance1.setOption(option1);


            var dom2 = document.getElementById('id2');
            var chart2 = echarts.init(dom2);
            var option2 = {
              xAxis: {...},
              yAxis: {...},
              grid: {...},
              series: {type: 'bar', data: [...]}
            };
            chart2.setOption(option2);


            var option = {
              xAxis: {
                data: [
                  'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
                ]
              },
              yAxis: {},
              series: [{
                type: 'pie',
                center: ['65%', 60],
                radius: 35,
                data: [
                  {name: 'XX', value: 52},
                  {name: 'YY', value: 54},
                  {name: 'ZZ', value: 42}
                ]
              }, {
                type: 'line',
                data: [34, 28, 45, 69, 39, 43, 33, 23, 23, 33, 39, 22]
              }, {
                type: 'bar',
                data: [20, 14, 32, 46, 24, 23, 23, 13, 16, 20, 24, 15]
              }]
            };


            var option = {
              xAxis: {type: 'category'},
              yAxis: {},
              dataset: {
                source: [
                  [ 'Jan' ,  34 ,  20 ,  'XX' ,  52 ],
                  [ 'Feb' ,  28 ,  14 ,  'YY' ,  54 ],
                  [ 'Mar' ,  45 ,  32 ,  'ZZ' ,  42 ],
                  [ 'Apr' ,  69 ,  46 ],
                  [ 'May' ,  39 ,  24 ],
                  [ 'Jun' ,  43 ,  23 ],
                  [ 'Jul' ,  33 ,  23 ],
                  [ 'Aug' ,  23 ,  13 ],
                  [ 'Sep' ,  23 ,  16 ],
                  [ 'Oct' ,  33 ,  20 ],
                  [ 'Nov' ,  39 ,  24 ],
                  [ 'Dec' ,  22 ,  15 ],
                ]
              },
              series: [{
                type: 'pie',
                center: ['65%', 60],
                radius: 35,
                encode: {itemName: 3, value: 4}
              }, {
                type: 'line',
                encode: {x:0, y: 1}
              }, {
                type: 'bar',
                encode: {x:0, y: 2}
              }]
            };


            var option = {
              legend: {...},
              toolbox: {...},
              tooltip: {...},
              dataZoom: [{...}, {...}],
              visualMap: {...},
              xAxis: [{...}],
              yAxis: [{...}],
              grid: [{...}],
              dataset: {
                source: [...]
              },
              series: [{
                type: 'line',
                ...
              }, {
                type: 'bar',
                ...
              }]
            };


            var option = {
              grid: {
                left: 130,
                right: '30%',
                height: '40%',
                bottom: 110
              },
              xAxis: {...},
              yAxis: {...},
              series: [{...}, {...}]
            };


            var option = {
              xAxis: {},
              yAxis: {},
              series: {
                type: 'scatter',
                data: [
                  [13, 44],
                  [51, 51],
                  [51, 32],
                  [67, 19],
                  [19, 33]
                ]
              }
            }


            var option = {
              xAxis: {
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: [
                {...},
                {...}
              ],
              series: [{
                type: 'bar',
                data: [242, 344, 324, 475, 264, 467, 531],
                yAxisIndex: 0
              }, {
                type: 'line',
                data: [44, 51, 32, 19, 33, 24, 12],
                yAxisIndex: 1
              }]
            };


            var option = {
              dataset: {source: [...]},
              grid: [
                {top: 40, bottom: '58%'},
                {top: '58%', bottom: 40}
              ],
              xAxis: [
                {type: 'category', gridIndex: 0},
                {type: 'category', gridIndex: 1}
              ],
              yAxis: [
                {type: 'value', gridIndex: 0},
                {type: 'value', gridIndex: 1}
              ],
              series: [{
                type: 'line',
                xAxisIndex: 0,
                yAxisIndex: 0
              }, {
                type: 'line',
                xAxisIndex: 1,
                yAxisIndex: 1
              }, {
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1
              }]
            };
        </template>

    </body>
</html>