test/stackBar-dataZoom.html

<!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="lib/simpleRequire.js"></script>
        <script src="lib/config.js"></script>
        <script src="lib/jquery.min.js"></script>
        <script src="lib/facePrint.js"></script>
        <script src="lib/testHelper.js"></script>
        <!-- <script src="ut/lib/canteen.js"></script> -->
        <link rel="stylesheet" href="lib/reset.css" />
    </head>
    <body>
        <style>
        </style>

        <h1>Bar/Line chart stack normal with dataZoom in the toolbox(should not exceed the range of coord)</h1>
        <div id="main0"></div>
        <div id="main1"></div>
        <div id="main2"></div>
        <div id="main3"></div>
        <div id="main4"></div>
        <div id="main5"></div>
        <div id="main6"></div>


        <script>
            require([
                'echarts'
            ], function (echarts) {

                var option = {

                    top: '30%',

                    title: {
                        text: 'ECharts test'
                    },
                    tooltip: {},
                    legend: {
                        data:['test']
                    },
                    xAxis: {
                        data: ["AA","BB","CC","DD","EE","FF"]
                    },
                    yAxis: {},
                    series: [{
                        name: 'Y',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20],
                        stack: 1,
                    }, {
                        name: 'X',
                        type: 'bar',
                        data: [1, 2, 30, 10, 8, 2],
                        stack: 1,
                    }],
                    toolbox: {
                        feature: {
                            dataZoom: {show: true}
                        }
                    }
                };

                var chart = testHelper.create(echarts, 'main0', {
                    option: option,
                    // recordCanvas: true
                });
            });

        </script>


        <script>
            require([
                'echarts'
            ], function (echarts) {

                var option = {
                    "backgroundColor": "#fff",
                    "legend": {
                        "orient": "horizontal",
                        "x": "center",
                        "left": "2%",
                        "top": "2%"
                    },
                    "textStyle": {
                        "fontFamily": "Lato"
                    },
                    "tooltip":{
                        "show": true,
                        "trigger": "axis",
                        "backgroundColor": "#fff",
                        "borderColor": "#e0e5ec",
                        "borderWidth": 1,
                        "textStyle": {
                            "color": "#495057",
                            "fontSize": 10
                        },
                        "enterable": true,
                        "axisPointer": {
                            "lineStyle": {
                                "color": "#e0e5ec"
                            }
                        }
                    },
                    "toolbox":{
                        "feature":{
                            "dataZoom":{
                                "show":true,
                                "title":{
                                "zoom":"Zoom",
                                "back":"Restore Zoom"
                                }
                            }
                        }
                    },
                    "color": [
                        "rgba(101,116, 205, 0.9 )",
                        "rgba(246,109, 155, 0.9 )",
                        "rgba(43,203, 186, 0.9 )",
                        "rgba(253,150, 68, 0.9 )",
                        "rgba(205,32, 31, 0.9 )",
                        "rgba(165,94, 234, 0.9 )",
                        "rgba(123,210, 53, 0.9 )",
                        "rgba(241,196, 15, 0.9 )",
                        "rgba(70,127, 207, 0.9 )",
                        "rgba(23,162, 184, 0.9 )",
                        "rgba(69,170, 242, 0.9 )",
                        "rgba(94,186, 0, 0.9 )",
                        "rgba(33,150, 243, 0.9 )",
                        "rgba(0,150, 136, 0.9 )",
                        "rgba(244,67, 54, 0.9 )",
                        "rgba(156,39, 176, 0.9 )",
                        "rgba(0,150, 136, 0.9 )",
                        "rgba(103,58, 183, 0.9 )",
                        "rgba(63,81, 181, 0.9 )",
                        "rgba(76,175, 80, 0.9 )",
                        "rgba(233,30, 99, 0.9 )",
                        "rgba(96,125, 139, 0.9 )",
                        "rgba(255,87, 34, 0.9 )",
                        "rgba(28,147, 99, 0.9 )",
                        "rgba(255,113, 91, 0.9 )",
                        "rgba(43,89, 195, 0.9 )",
                        "rgba(33,91, 86, 0.9 )",
                        "rgba(0,188, 212, 0.9 )",
                        "rgba(255,87, 34, 0.9 )",
                        "rgba(255,193, 7, 0.9 )",
                        "rgba(48,25, 102, 0.9 )",
                        "rgba(211,101, 130, 0.9 )",
                        "rgba(130,6, 70, 0.9 )",
                        "rgba(100,155, 193, 0.9 )",
                        "rgba(75,63, 114, 0.9 )",
                        "rgba(219,51, 64, 0.9 )",
                        "rgba(223,81, 76, 0.9 )",
                        "rgba(92,45, 80, 0.9 )",
                        "rgba(94,52, 72, 0.9 )",
                        "rgba(83,187, 244, 0.9 )",
                        "rgba(89,196, 197, 0.9 )",
                        "rgba(191,240, 115, 0.9 )",
                        "rgba(228,95, 86, 0.9 )",
                        "rgba(201,27, 38, 0.9 )",
                        "rgba(115,116, 149, 0.9 )",
                        "rgba(92,45, 80, 0.9 )",
                        "rgba(32,69, 124, 0.9 )",
                        "rgba(15,89, 89, 0.9 )",
                        "rgba(159,146, 170, 0.9 )",
                        "rgba(255,162, 0, 0.9 )",
                        "rgba(36,168, 172, 0.9 )",
                        "rgba(255,76, 101, 0.9 )",
                        "rgba(233,76, 111, 0.9 )",
                        "rgba(53,68, 88, 0.9 )",
                        "rgba(105,210, 231, 0.9 )",
                        "rgba(220,39, 66, 0.9 )",
                        "rgba(58,2, 86, 0.9 )",
                        "rgba(23,166, 151, 0.9 )",
                        "rgba(6,71, 137, 0.9 )",
                        "rgba(255,195, 60, 0.9 )"
                    ],
                    "xAxis": {
                        "show": true,
                        "type": "category",
                        "name": "Inserted_at By Day",
                        "nameLocation": "center",
                        "nameTextStyle": {
                            "padding": 8,
                            "color": "#495057",
                            "fontSize": 12
                        },
                        "axisLine": {
                            "onZero": false,
                            "lineStyle": {
                                "color": "#e0e5ec"
                            }
                        },
                        "axisLabel": {
                            "color": "#495057",
                            "fontSize": 10
                        },
                        "splitLine": {
                            "show": false
                        }
                    },
                    "yAxis": {
                        "show": true,
                        "type": "value",
                        "name": false,
                        "nameLocation": "center",
                        "nameTextStyle": {
                            "padding": 8,
                            "color": "#495057",
                            "fontSize": 12
                        },
                        "axisLine": {
                            "onZero": false,
                            "lineStyle": {
                                "color": "#e0e5ec"
                            }
                        },
                        "axisLabel": {
                            "color": "#495057",
                            "fontSize": 10
                        },
                        "splitLine": {
                            "show": false
                        }
                    },
                    "series": [
                        {
                            "type": "bar",
                            "name": "count",
                            "itemStyle": null,
                            "stack": true,
                            "data": [
                                [
                                    "2018-03-08 05:30:00.000",
                                    156
                                ],
                                [
                                    "2018-03-23 05:30:00.000",
                                    24
                                ],
                                [
                                    "2018-04-18 05:30:00.000",
                                    513
                                ],
                                [
                                    "2018-05-16 05:30:00.000",
                                    7
                                ],
                                [
                                    "2018-05-20 05:30:00.000",
                                    21
                                ],
                                [
                                    "2018-05-31 05:30:00.000",
                                    7
                                ],
                                [
                                    "2018-06-07 05:30:00.000",
                                    7
                                ],
                                [
                                    "2018-06-08 05:30:00.000",
                                    2
                                ],
                                [
                                    "2018-06-10 05:30:00.000",
                                    6
                                ]
                            ]
                        },
                        {
                            "type": "bar",
                            "name": "?column?",
                            "itemStyle": null,
                            "stack": true,
                            "data": [
                                [
                                    "2018-03-08 05:30:00.000",
                                    9
                                ],
                                [
                                    "2018-03-23 05:30:00.000",
                                    "1"
                                ],
                                [
                                    "2018-04-18 05:30:00.000",
                                    356
                                ],
                                [
                                    "2018-05-16 05:30:00.000",
                                    5
                                ],
                                [
                                    "2018-05-20 05:30:00.000",
                                    15
                                ],
                                [
                                    "2018-05-31 05:30:00.000",
                                    5
                                ],
                                [
                                    "2018-06-07 05:30:00.000",
                                    5
                                ],
                                [
                                    "2018-06-08 05:30:00.000",
                                    "1"
                                ],
                                [
                                    "2018-06-10 05:30:00.000",
                                    4
                                ]
                            ]
                        }
                    ]
                };

                var chart = testHelper.create(echarts, 'main1', {
                    option: option,
                    // recordCanvas: true
                });
            });

        </script>


        <script>
            require([
                'echarts'
            ], function (echarts) {

                var option = {
                    "calculable": false,
                    "renderAsImage": false,
                    "series": [
                        {
                            "largeThreshold" : 2000,
                            "legendHoverLink" : true,
                            "smooth" : false,
                            "barCategoryGap" : "30%",
                            "clickable" : true,
                            "z" : 2,
                            "dataFilter" : "nearest",
                            "showAllSymbol" : false,
                            "yAxisIndex" : 0,
                            "type" : "bar",
                            "data" : [
                                23756.529999999999,
                                26716.48,
                                9424.25,
                                9530.8999999999996,
                                6035.3400000000001,
                                0,
                                3381.3499999999999,
                                6528.8599999999997,
                                3760.21,
                                3502.3800000000001,
                                1194.3599999999999,
                                4612.3400000000001,
                                0,
                                1296.3800000000001,
                                3743.4499999999998,
                                26284.240000000002,
                                1809.24,
                                0,
                                1947.3199999999999,
                                2511,
                                15559.23,
                                0,
                                5936.9399999999996,
                                0,
                                0,
                                0,
                                4760.2700000000004,
                                0,
                                0,
                                0,
                                0,
                                0,
                                0,
                                0,
                                0,
                                3428.1500000000001,
                                2521.0999999999999,
                                1607.8599999999999,
                                2441.52,
                                4354.8100000000004,
                                2960.9899999999998,
                                10408.42,
                                0,
                                0,
                                0,
                                0,
                                0,
                                0,
                                0
                            ],
                            "barGap" : "30%",
                            "itemStyle" : {
                                "emphasis" : {
                                "color" : "#1886E3",
                                "label" : {
                                    "distance" : 10,
                                    "show" : false,
                                    "position" : "outer",
                                    "rotate" : false
                                },
                                "labelLine" : {
                                    "show" : true,
                                    "lineStyle" : {
                                    "type" : "solid"
                                    },
                                    "length" : 40
                                }
                                },
                                "normal" : {
                                "color" : "#1886E3",
                                "label" : {
                                    "distance" : 10,
                                    "show" : false,
                                    "position" : "outer",
                                    "rotate" : false
                                },
                                "labelLine" : {
                                    "show" : true,
                                    "lineStyle" : {
                                    "type" : "solid"
                                    },
                                    "length" : 40
                                }
                                }
                            },
                            "large" : false,
                            "name" : "51周平均日用量"
                        },
                        {
                            "largeThreshold" : 2000,
                            "legendHoverLink" : true,
                            "smooth" : false,
                            "barCategoryGap" : "30%",
                            "clickable" : true,
                            "z" : 2,
                            "dataFilter" : "nearest",
                            "showAllSymbol" : false,
                            "yAxisIndex" : 0,
                            "type" : "bar",
                            "data" : [
                                30489.049999999999,
                                36026.639999999999,
                                8183.5699999999997,
                                14145.48,
                                7167.7200000000003,
                                880.82000000000005,
                                6253.9200000000001,
                                8826.25,
                                4777.7399999999998,
                                3638.1700000000001,
                                3584.2800000000002,
                                5062.5,
                                1168.51,
                                1114.8299999999999,
                                11842.41,
                                30060.919999999998,
                                706.26999999999998,
                                3996.46,
                                4380.8100000000004,
                                5187.4099999999999,
                                3824.5999999999999,
                                2262.4499999999998,
                                2967.6999999999998,
                                4495.6300000000001,
                                4126.5699999999997,
                                0,
                                3858.75,
                                2924.0999999999999,
                                1746.75,
                                1975.5,
                                2082,
                                3088.5,
                                0,
                                0,
                                0,
                                1785.53,
                                4356.0100000000002,
                                8033.8199999999997,
                                4208.71,
                                13157.700000000001,
                                12462.93,
                                13743.9,
                                0,
                                0,
                                0,
                                0,
                                0,
                                0,
                                0
                            ],
                            "barGap" : "30%",
                            "itemStyle" : {
                                "emphasis" : {
                                "color" : "#F6A623",
                                "label" : {
                                    "distance" : 10,
                                    "show" : false,
                                    "position" : "outer",
                                    "rotate" : false
                                },
                                "labelLine" : {
                                    "show" : true,
                                    "lineStyle" : {
                                    "type" : "solid"
                                    },
                                    "length" : 40
                                }
                                },
                                "normal" : {
                                    "color" : "#F6A623",
                                    "label" : {
                                        "distance" : 10,
                                        "show" : false,
                                        "position" : "outer",
                                        "rotate" : false
                                    },
                                    "labelLine" : {
                                        "show" : true,
                                        "lineStyle" : {
                                        "type" : "solid"
                                        },
                                        "length" : 40
                                    }
                                }
                            },
                            "large" : false,
                            "name" : "52周平均日用量"
                        },
                        {
                            "largeThreshold" : 2000,
                            "legendHoverLink" : true,
                            "smooth" : false,
                            "barCategoryGap" : "30%",
                            "clickable" : true,
                            "z" : 2,
                            "dataFilter" : "nearest",
                            "showAllSymbol" : false,
                            "yAxisIndex" : 0,
                            "type" : "bar",
                            "data" : [
                                29524.110000000001,
                                14007.120000000001,
                                8411.6900000000005,
                                10003.469999999999,
                                11589.879999999999,
                                896.50999999999999,
                                4791.6000000000004,
                                6617.21,
                                7026.1099999999997,
                                5556.4899999999998,
                                3061.27,
                                8506.9099999999999,
                                416.82999999999998,
                                1337.75,
                                12256.059999999999,
                                22903.669999999998,
                                1427.8,
                                1533.5699999999999,
                                27902.540000000001,
                                5579.8100000000004,
                                28220.360000000001,
                                754.44000000000005,
                                3196.9299999999998,
                                6200.3400000000001,
                                6716.3900000000003,
                                0,
                                939.21000000000004,
                                803.39999999999998,
                                0,
                                11446.959999999999,
                                2096.5599999999999,
                                4544.4799999999996,
                                3509.3200000000002,
                                0,
                                761.25,
                                4916.1400000000003,
                                3039.4000000000001,
                                6166.8000000000002,
                                3378.46,
                                8787.6399999999994,
                                5666.96,
                                12500.610000000001,
                                5281.7299999999996,
                                8854.1399999999994,
                                328.94999999999999,
                                0,
                                0,
                                0,
                                0
                            ],
                            "barGap" : "30%",
                            "itemStyle" : {
                                "emphasis" : {
                                "color" : "#90AFE4",
                                "label" : {
                                    "distance" : 10,
                                    "show" : false,
                                    "position" : "outer",
                                    "rotate" : false
                                },
                                "labelLine" : {
                                    "show" : true,
                                    "lineStyle" : {
                                    "type" : "solid"
                                    },
                                    "length" : 40
                                }
                                },
                                "normal" : {
                                "color" : "#90AFE4",
                                "label" : {
                                    "distance" : 10,
                                    "show" : false,
                                    "position" : "outer",
                                    "rotate" : false
                                },
                                "labelLine" : {
                                    "show" : true,
                                    "lineStyle" : {
                                    "type" : "solid"
                                    },
                                    "length" : 40
                                }
                                }
                            },
                            "large" : false,
                            "name" : "1周平均日用量"
                        },
                        {
                            "largeThreshold" : 2000,
                            "legendHoverLink" : true,
                            "smooth" : false,
                            "barCategoryGap" : "30%",
                            "clickable" : true,
                            "z" : 2,
                            "dataFilter" : "nearest",
                            "showAllSymbol" : false,
                            "yAxisIndex" : 0,
                            "type" : "bar",
                            "data" : [
                                35376.440000000002,
                                21978.869999999999,
                                6576.0299999999997,
                                8786.5499999999993,
                                10064.26,
                                2063.1399999999999,
                                6502.3400000000001,
                                13495.48,
                                5614.5100000000002,
                                6085.6499999999996,
                                2312.5799999999999,
                                8553.2600000000002,
                                8796.3999999999996,
                                1880.26,
                                8418.7900000000009,
                                49651.620000000003,
                                1466.8,
                                6279.8599999999997,
                                7088.9499999999998,
                                8273.3099999999995,
                                12138.690000000001,
                                7607.8699999999999,
                                5459.1599999999999,
                                4296.71,
                                5477.7399999999998,
                                1249.6300000000001,
                                5644.4700000000003,
                                1487.8099999999999,
                                2465.04,
                                6923.5200000000004,
                                5541.7799999999997,
                                2260.6999999999998,
                                2172.1500000000001,
                                1944,
                                8513.8600000000006,
                                10300.84,
                                2953.7600000000002,
                                10124.91,
                                12560.67,
                                7698.3199999999997,
                                9854.2099999999991,
                                11715.85,
                                3042.8299999999999,
                                11900.15,
                                19656.810000000001,
                                2519.0900000000001,
                                3384.0500000000002,
                                1441.74,
                                690.61000000000001
                            ],
                            "barGap" : "30%",
                            "itemStyle" : {
                                "emphasis" : {
                                "color" : "#6ED4DA",
                                "label" : {
                                    "distance" : 10,
                                    "show" : false,
                                    "position" : "outer",
                                    "rotate" : false
                                },
                                "labelLine" : {
                                    "show" : true,
                                    "lineStyle" : {
                                    "type" : "solid"
                                    },
                                    "length" : 40
                                }
                                },
                                "normal" : {
                                "color" : "#6ED4DA",
                                "label" : {
                                    "distance" : 10,
                                    "show" : false,
                                    "position" : "outer",
                                    "rotate" : false
                                },
                                "labelLine" : {
                                    "show" : true,
                                    "lineStyle" : {
                                    "type" : "solid"
                                    },
                                    "length" : 40
                                }
                                }
                            },
                            "large" : false,
                            "name" : "2周平均日用量"
                        }
                    ],
                    "grid" : {
                        "y" : 75,
                        "x2" : 45,
                        "z" : 0,
                        "x" : 45,
                        "zlevel" : 0,
                        "y2" : 40
                    },
                    "xAxis" : [
                        {
                        "splitLine" : {
                            "show" : true,
                            "onGap" : false,
                            "lineStyle" : {
                            "type" : "solid"
                            }
                        },
                        "scale" : false,
                        "position" : "'bottom'|'left'",
                        "axisLabel" : {
                            "interval" : "auto",
                            "show" : true,
                            "clickable" : false,
                            "rotate" : 0,
                            "margin" : 8
                        },
                        "show" : true,
                        "z" : 0,
                        "type" : "category",
                        "data" : [
                            "小华1号普通A+C",
                            "小华2号A+C两层加硬",
                            "小华3号170gA+B",
                            "小华4号170gA+A",
                            "小华5号（美牛双加硬）",
                            "10号（Q636B）\/BE瓦",
                            "11号（H737B）\/BC瓦",
                            "12号（H737H）\/BC瓦",
                            "13号（H636B）\/BC瓦",
                            "14号（M535B）\/BC瓦",
                            "15号（M536B）\/BC瓦",
                            "16号（M636B）\/BC瓦",
                            "17号（M535B）\/BE瓦",
                            "18号（M536B）\/BE瓦",
                            "19号（A5B）\/单B瓦",
                            "1号（A535B）\/BC瓦",
                            "20号（Q5B）\/单B瓦",
                            "21号（Q6B）\/单B瓦",
                            "22号（5B）\/E瓦",
                            "23号（6B）\/E瓦",
                            "24号（535B）\/BE瓦",
                            "25号（A5B）\/E瓦",
                            "26号（W5C）\/E瓦",
                            "27号（H7H）\/单B瓦",
                            "28号（636A）\/BE瓦",
                            "29号（6A）\/E瓦",
                            "2号（A536B）\/BC瓦",
                            "30号（B53）\/单E瓦",
                            "31号（B63）\/单E瓦",
                            "32号（M33）\/单B瓦",
                            "33号（B3C）\/单B瓦",
                            "34号（M3C）\/单B瓦",
                            "35号（B333C）\/BC瓦",
                            "36号（M3333）\/BC瓦",
                            "37号（M333C）\/BC瓦",
                            "3号（A636B）\/BC瓦",
                            "4号（A535B）\/BE瓦",
                            "5号（A536B）\/BE瓦",
                            "6号（A636B）\/BE瓦",
                            "7号（Q535B）\/BC瓦",
                            "8号（Q536B）\/BC瓦",
                            "9号（Q636B）\/BC瓦",
                            "38号（Q6B）\/单E层",
                            "39号（B33）\/单B瓦",
                            "40号（Q536B）\/BE瓦",
                            "小华6号(A+C一层加硬)",
                            "小华7号(A+C单B瓦)",
                            "小华6号(120gA+C \/BE)",
                            "43号（536B）\/BE瓦"
                        ],
                        "nameLocation" : "end",
                        "zlevel" : 0,
                        "axisLine" : {
                            "show" : true,
                            "lineStyle" : {
                            "type" : "solid"
                            },
                            "onZero" : true
                        },
                        "name" : ""
                        }
                    ],
                    "tooltip" : {
                        "transitionDuration" : 0.40000000000000002,
                        "borderColor" : "rgba(3,3,3,1.00)",
                        "padding" : 5,
                        "axisPointer" : {
                        "show" : false,
                        "type" : "shadow"
                        },
                        "position" : "(function (p){return ['50%', p[1] - 10]} )",
                        "islandFormmater" : "{a} < br\/>{b} : {c}",
                        "backgroundColor" : "rgba(0,0,0,0.70)",
                        "trigger" : "axis",
                        "show" : true,
                        "z" : 8,
                        "showContent" : true,
                        "showDelay" : 20,
                        "enterable" : false,
                        "hideDelay" : 100,
                        "borderWidth" : 0,
                        "zlevel" : 1,
                        "borderRadius" : 4
                    },
                    "dataZoom" : {
                        "handleColor" : "rgba(70,130,180,0.80)",
                        "start" : 0,
                        "fillerColor" : "rgba(144,197,237,0.20)",
                        "dataBackgroundColor" : "rgba(14,14,14,1.00)",
                        "backgroundColor" : "rgba(0,0,0,0.00)",
                        "realtime" : false,
                        "show" : false,
                        "z" : 4,
                        "type" : "inside",
                        "minSpan" : 5,
                        "orient" : "horizontal",
                        "zlevel" : 0,
                        "handleSize" : 8,
                        "end" : 100,
                        "zoomLock" : false,
                        "showDetail" : true
                    },
                    "title" : {
                        "padding" : 5,
                        "borderColor" : "rgba(12,12,12,1.00)",
                        "textStyle" : {
                        "fontFamily" : "Arial, Verdana, sans-serif",
                        "fontStyle" : "normal",
                        "fontWeight" : "bolder",
                        "decoration" : "none",
                        "fontSize" : 17
                        },
                        "subtextStyle" : {
                        "fontFamily" : "Arial, Verdana, sans-serif",
                        "fontSize" : 12,
                        "fontStyle" : "normal",
                        "fontWeight" : "normal",
                        "decoration" : "none",
                        "color" : "rgba(10,10,10,1.00)"
                        },
                        "sublink" : "",
                        "x" : "left",
                        "backgroundColor" : "rgba(0,0,0,0.00)",
                        "y" : "top",
                        "link" : "",
                        "itemGap" : 5,
                        "show" : true,
                        "z" : 0,
                        "borderWidth" : 0,
                        "text" : "",
                        "subtext" : "",
                        "zlevel" : 0
                    },
                    "animation" : true,
                    "toolbox" : {
                        "padding" : 5,
                        "borderColor" : "rgba(12,12,12,1.00)",
                        "disableColor" : "rgba(13,13,13,0.00)",
                        "x" : "right",
                        "backgroundColor" : "rgba(0,0,0,0.00)",
                        "effectiveColor" : "rgba(255,0,0,1.00)",
                        "y" : "top",
                        "itemSize" : 16,
                        "itemGap" : 10,
                        "show" : false,
                        "z" : 6,
                        "color" : [
                        "rgba(30,144,255,1.00)",
                        "rgba(34,187,34,1.00)",
                        "rgba(75,0,130,1.00)",
                        "rgba(210,105,30,1.00)"
                        ],
                        "showTitle" : true,
                        "borderWidth" : 0,
                        "feature" : {
                        "dataView" : {
                            "title" : "数据视图",
                            "show" : false,
                            "readOnly" : false,
                            "lang" : [
                            "数据视图",
                            "关闭",
                            "刷新"
                            ]
                        },
                        "magicType" : {
                            "show" : false,
                            "title" : {
                            "bar" : "柱形图切换",
                            "chord" : "和弦图切换",
                            "funnel" : "漏斗图切换",
                            "force" : "力导向布局图切换",
                            "tiled" : "平铺",
                            "stack" : "堆积",
                            "pie" : "饼图切换",
                            "line" : "折线图切换"
                            }
                        },
                        "mark" : {
                            "show" : false,
                            "title" : {
                            "markClear" : "清空辅助线",
                            "mark" : "辅助线开关",
                            "markUndo" : "删除辅助线"
                            },
                            "lineStyle" : {
                            "color" : "rgba(30,144,255,1.00)",
                            "type" : "dashed",
                            "width" : 2
                            }
                        },
                        "restore" : {
                            "show" : false,
                            "title" : "还原"
                        },
                        "dataZoom" : {
                            "show" : true,
                            "title" : {
                            "dataZoom" : "区域缩放",
                            "dataZoomReset" : "区域缩放后退"
                            }
                        }
                        },
                        "orient" : "horizontal",
                        "zlevel" : 0
                    },
                    "yAxis" : [
                        {
                        "splitLine" : {
                            "show" : true,
                            "onGap" : false,
                            "lineStyle" : {
                            "type" : "solid"
                            }
                        },
                        "scale" : true,
                        "position" : "'bottom'|'left'",
                        "show" : true,
                        "z" : 0,
                        "type" : "value",
                        "data" : [

                        ],
                        "nameLocation" : "end",
                        "zlevel" : 0,
                        "axisLine" : {
                            "show" : true,
                            "lineStyle" : {
                            "type" : "solid"
                            },
                            "onZero" : true
                        },
                        "name" : "㎡"
                        },
                        {
                        "splitLine" : {
                            "show" : true,
                            "onGap" : false,
                            "lineStyle" : {
                            "type" : "solid"
                            }
                        },
                        "scale" : true,
                        "position" : "'bottom'|'left'",
                        "axisLabel" : {
                            "formatter" : "(function (params) {if(params >= 10000000) { return (params\/ 10000000 + '千万' );} if (params >= 10000) { return (params\/ 10000 + '万' );}  else {return params;}})",
                            "interval" : "auto",
                            "show" : true,
                            "clickable" : false,
                            "rotate" : 0,
                            "margin" : 8
                        },
                        "show" : true,
                        "z" : 0,
                        "type" : "value",
                        "data" : [

                        ],
                        "nameLocation" : "end",
                        "zlevel" : 0,
                        "axisLine" : {
                            "show" : true,
                            "lineStyle" : {
                            "type" : "solid"
                            },
                            "onZero" : true
                        },
                        "name" : ""
                        }
                    ],
                    "legend" : {
                        "borderColor" : "#ccc",
                        "textStyle" : {
                        "fontFamily" : "Arial, Verdana, sans-serif",
                        "fontSize" : 12,
                        "fontStyle" : "normal",
                        "fontWeight" : "normal",
                        "decoration" : "none",
                        "color" : "rgba(3,3,3,1.00)"
                        },
                        "x" : "center",
                        "y" : 29,
                        "itemGap" : 5,
                        "show" : true,
                        "z" : 4,
                        "itemWidth" : 20,
                        "data" : [
                        "51周",
                        "52周",
                        "1周",
                        "2周"
                        ],
                        "selectedMode" : true,
                        "orient" : "horizontal",
                        "itemHeight" : 14
                    }
                };

                var chart = testHelper.create(echarts, 'main2', {
                    option: option,
                    // recordCanvas: true
                });
            });

        </script>


        <script>
            require([
                'echarts'
            ], function (echarts) {

                var option = {
                    "title": {
                        "text": "option传入的title"
                    },
                    "tooltip": {
                        "trigger": "axis"
                    },
                    "legend": {
                        "data": ["邮件营销", "联盟广告"]
                    },
                    "grid": {
                        "containLabel": true
                    },
                    "series": [{
                        "type": "line",
                        "stack": "all",
                        "data": [120, 132, 101, 134, 90, 230, 210],
                        "name": "邮件营销"
                    }, {
                        "type": "line",
                        "stack": "all",
                        "data": [220, 182, 191, 234, 290, 330, 310],
                        "name": "联盟广告"
                    }],
                    "yAxis": {
                        "type": "category",
                        "data": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
                    },
                    "xAxis": {
                        "type": "value",
                    },
                    "toolbox": {
                        "feature": {
                            "saveAsImage": {
                                "type": "jpeg",
                                "title": "保存保存"
                            },
                            "dataZoom": {
                                show:true
                            }
                        }
                    }
                };

                var chart = testHelper.create(echarts, 'main3', {
                    option: option,
                    // recordCanvas: true
                });
            });

        </script>


        <script>
            require([
                'echarts'
            ], function (echarts) {

                var option = {
                    "xAxis": [{
                            "type": "category",
                            "name": "COLUMN_NAME",
                            "gridIndex": 0
                    }],
                    "yAxis": [{
                        "gridIndex": 0
                    }],
                    "series": [{
                        "type": "bar",
                        "stack": "COLUMN_NAME",
                        "xAxisIndex": 0,
                        "yAxisIndex": 0,
                        "encode": {
                            "x": "COLUMN_NAME",
                            "y": "SUB_TYPE"
                        }
                    }, {
                        "type": "bar",
                        "stack": "COLUMN_NAME",
                        "xAxisIndex": 0,
                        "yAxisIndex": 0,
                        "encode": {
                            "x": "COLUMN_NAME",
                            "y": "s1"
                        }
                    }],
                    "brush": {
                        "toolbox": ["rect", "polygon", "lineX", "lineY", "clear"],
                        "throttleType": "debounce",
                        "throttleDelay": 300
                    },
                    "toolbox": {
                        "feature": {
                            "saveAsImage": {
                                "show": true
                            },
                            "dataZoom": {
                                "show": true
                            }
                        },
                        "show": true,
                        "left": "40px"
                    },
                    "axisPointer": {
                        "show": false
                    },
                    "tooltip": {
                        "show": true
                    },
                    "color": ["#44bd89", "#4db7c8", "#eaad56", "#9fbd74", "#82cda4", "#ff942b", "#17988d", "#4e6783", "#bababa", "#bed38b", "#3eadb5", "#f75700", "#8f5989"],
                    "dataset": {
                        "source": [
                            ["COLUMN_NAME", "SUB_TYPE", "s1"],
                            ["column_name_0", 394, 394],
                            ["column_name_1", 426.5, 426.5],
                            ["column_name_2", 285, 285],
                            ["column_name_3", 404, 404],
                            ["column_name_4", 496.53846153846155, 496],
                            ["column_name_5", 244, 244],
                            ["column_name_6", 543, 543],
                            ["column_name_7", 528, 528],
                            ["column_name_8", 393, 393],
                            ["column_name_9", 539, 539]
                        ],
                        "dimensions": ["COLUMN_NAME", "SUB_TYPE", "s1"]
                    },
                    "grid": [{
                        "left": "2%",
                        "top": "8%",
                        "width": "90%",
                        "height": "90%",
                        "containLabel": true
                    }],
                    "dataZoom": [{
                        "type": "inside",
                        "xAxisIndex": 0,
                        "disabled": true
                    }, {
                        "type": "inside",
                        "yAxisIndex": 0,
                        "disabled": true
                    }]
                }

                var chart = testHelper.create(echarts, 'main4', {
                    option: option,
                    // recordCanvas: true
                });
            });

        </script>


        <script>
            require([
                'echarts'
            ], function (echarts) {

                var option = {
                    title: {
                        text: '折线图堆叠'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
                    },
                    dataZoom: [{
                        type: 'slider',
                        xAxisIndex: 0,
                        start: 0,
                        end: 100,
                        filterMode: 'filter',
                    },{
                        type: 'inside',
                        start: 0,
                        end: 100,
                        filterMode: 'filter',
                    }],
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['周一','周二','周三','周四','周五','周六','周日']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name:'邮件营销',
                            type:'line',
                            stack: '总量',
                            data:[120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name:'联盟广告',
                            type:'line',
                            stack: '总量',
                            data:[220, 182, 191, 234, 290, 330, 310]
                        },
                        {
                            name:'视频广告',
                            type:'line',
                            stack: '总量',
                            data:[150, 232, 201, 154, 190, 330, 410]
                        },
                        {
                            name:'直接访问',
                            type:'line',
                            stack: '总量',
                            data:[320, 332, 301, 334, 390, 330, 320]
                        },
                        {
                            name:'搜索引擎',
                            type:'line',
                            stack: '总量',
                            data:[820, 932, 901, 934, 1290, 1330, 1320]
                        }
                    ]
                };

                var chart = testHelper.create(echarts, 'main5', {
                    option: option,
                    // recordCanvas: true
                });
            });

        </script>


        <script>
                require([
                    'echarts'
                ], function (echarts) {

                    var option = {
                        tooltip : {
                            trigger: 'axis',
                            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        legend: {
                            data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis : [
                            {
                                type : 'category',
                                data : ['周一','周二','周三','周四','周五','周六','周日']
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        series : [
                            {
                                name:'邮件营销',
                                type:'bar',
                                stack: '广告',
                                data:[120, 132, 101, 134, 90, 230, 210]
                            },
                            {
                                name:'联盟广告',
                                type:'bar',
                                stack: '广告',
                                data:[220, 182, 191, 234, 290, 330, 310]
                            },
                            {
                                name:'视频广告',
                                type:'bar',
                                stack: '广告',
                                data:[150, 232, 201, 154, 190, 330, 410]
                            }],
                        dataZoom: [
                            {
                                show: true,
                                filterMode: 'filter',
                            }
                        ]
                    };

                    var chart = testHelper.create(echarts, 'main6', {
                        option: option,
                        // recordCanvas: true
                    });
                });

        </script>

    </body>
</html>