$(document).ready(function() {

    // Chart in Dashboard version 1
    let echartElemBar = document.getElementById('echartBar');
    if (echartElemBar) {
        let echartBar = echarts.init(echartElemBar);
        echartBar.setOption({
            legend: {
                borderRadius: 0,
                orient: 'horizontal',
                x: 'right',
                data: ['Online', 'Offline']
            },
            grid: {
                left: '8px',
                right: '8px',
                bottom: '0',
                containLabel: true
            },
            tooltip: {
                show: true,
                backgroundColor: 'rgba(0, 0, 0, .8)'
            },
            xAxis: [{
                type: 'category',
                data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
                axisTick: {
                    alignWithLabel: true
                },
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: true
                }
            }],
            yAxis: [{
                    type: 'value',
                    axisLabel: {
                        formatter: '${value}'
                    },
                    min: 0,
                    max: 100000,
                    interval: 25000,
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: true,
                        interval: 'auto'
                    }
                }

            ],

            series: [{
                    name: 'Online',
                    data: [35000, 69000, 22500, 60000, 50000, 50000, 30000, 80000, 70000, 60000, 20000, 30005],
                    label: { show: false, color: '#0168c1' },
                    type: 'bar',
                    barGap: 0,
                    color: '#bcbbdd',
                    smooth: true,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowOffsetY: -2,
                            shadowColor: 'rgba(0, 0, 0, 0.3)'
                        }
                    }
                },
                {
                    name: 'Offline',
                    data: [45000, 82000, 35000, 93000, 71000, 89000, 49000, 91000, 80200, 86000, 35000, 40050],
                    label: { show: false, color: '#639' },
                    type: 'bar',
                    color: '#7569b3',
                    smooth: true,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowOffsetY: -2,
                            shadowColor: 'rgba(0, 0, 0, 0.3)'
                        }
                    }
                }

            ]
        });
        $(window).on('resize', function() {
            setTimeout(() => {
                echartBar.resize();
            }, 500);
        });
    }

    // Chart in Dashboard version 1
    let echartElemPie = document.getElementById('echartPie');
    if (echartElemPie) {
        let echartPie = echarts.init(echartElemPie);
        echartPie.setOption({
            color: ['#62549c', '#7566b5', '#7d6cbb', '#8877bd', '#9181bd', '#6957af'],
            tooltip: {
                show: true,
                backgroundColor: 'rgba(0, 0, 0, .8)'
            },

            series: [{
                    name: 'Sales by Country',
                    type: 'pie',
                    radius: '60%',
                    center: ['50%', '50%'],
                    data: [
                        { value: 535, name: 'USA' },
                        { value: 310, name: 'Brazil' },
                        { value: 234, name: 'France' },
                        { value: 155, name: 'BD' },
                        { value: 130, name: 'UK' },
                        { value: 348, name: 'India' }
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }

            ]
        });
        $(window).on('resize', function() {
            setTimeout(() => {
                echartPie.resize();
            }, 500);
        });
    }



    // line charts
    // ================= Basic Line ================
    let basicLineElem = document.getElementById('basicLine');
    if (basicLineElem) {
        let basicLine = echarts.init(basicLineElem);
        basicLine.setOption({
            tooltip: {
                show: true,
                trigger: 'axis',
                axisPointer: {
                    type: 'line',
                    animation: true
                }
            },
            grid: {
                top: '10%',
                left: '40',
                right: '40',
                bottom: '40'
            },
            xAxis: {
                type: 'category',
                data: ['1/11/2018', '2/11/2018', '3/11/2018', '4/11/2018', '5/11/2018', '6/11/2018', '7/11/2018', '8/11/2018', '9/11/2018', '10/11/2018', '11/11/2018', '12/11/2018', '13/11/2018', '14/11/2018', '15/11/2018', '16/11/2018', '17/11/2018', '18/11/2018', '19/11/2018', '20/11/2018', '21/11/2018', '22/11/2018', '23/11/2018', '24/11/2018', '25/11/2018', '26/11/2018', '27/11/2018', '28/11/2018', '29/11/2018', '30/11/2018'],
                axisLine: {
                    show: false
                },
                axisLabel: {
                    show: true
                },
                axisTick: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    show: false
                },
                axisLabel: {
                    show: true
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: true
                }
            },
            series: [{
                    data: [400, 800, 325, 900, 700, 800, 400, 900, 800, 800, 300, 405, 500, 1100, 900, 1450, 1200, 1350, 1200, 1400, 1000, 800, 950, 705, 690, 921, 1020, 903, 852, 630],
                    type: 'line',
                    showSymbol: true,
                    smooth: true,
                    color: '#639',
                    lineStyle: {
                        opacity: 1,
                        width: 2,
                    },
                },
                // {
                //     data: [100, 400, 225, 800, 550, 860, 300, 400, 1200, 200, 1300, 1405, 900, 500, 1100, 850, 1200, 1150, 1200, 500, 800, 400, 750, 905, 690, 921, 1020, 903, 852, 630],
                //     type: 'line',
                //     showSymbol: true,
                //     smooth: true,
                //     lineStyle: {
                //         opacity: 1,
                //         width: 2,
                //     },
                // }
            ]
        });
        $(window).on('resize', function() {
            setTimeout(() => {
                basicLine.resize();
            }, 500);
        });
    }

    // ================= Multi Line ================
    let multiLineElem = document.getElementById('multiLine');
    if (multiLineElem) {
        let multiLine = echarts.init(multiLineElem);
        multiLine.setOption({
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                top: '10%',
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                boundaryGap: false,
                axisLabel: {
                    color: '#999'
                },
                axisLine: {
                    color: '#999',
                    lineStyle: {
                        color: '#999999'
                    }
                }
            },
            yAxis: {
                type: 'value',
                min: 65,
                max: 110,

                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
            },
            series: [{
                    name: 'Alpha',
                    data: [70, 65, 85, 75, 95, 86, 93],
                    type: 'line',
                    smooth: true,
                    symbolSize: 8,
                    lineStyle: {
                        color: '#ff5721',
                        opacity: 1,
                        width: 1.5,
                    },
                    itemStyle: {
                        color: '#fff',
                        borderColor: '#ff5721',
                        borderWidth: 1.5
                    }
                },
                {
                    name: 'Beta',
                    data: [80, 90, 75, 104, 75, 80, 70],
                    type: 'line',
                    smooth: true,
                    symbolSize: 8,
                    lineStyle: {
                        color: '#5f6cc1',
                        opacity: 1,
                        width: 1.5,
                    },
                    itemStyle: {
                        color: '#fff',
                        borderColor: '#5f6cc1',
                        borderWidth: 1.5
                    }
                },
                {
                    name: 'Gama',
                    data: [110, 95, 102, 90, 105, 95, 108],
                    type: 'line',
                    smooth: true,
                    symbolSize: 10,
                    lineStyle: {
                        color: '#4cae50',
                        opacity: 1,
                        width: 1.5,
                    },
                    itemStyle: {
                        color: '#fff',
                        borderColor: '#4cae50',
                        borderWidth: 1.5
                    }
                }
            ]
        });
        $(window).on('resize', function() {
            setTimeout(() => {
                multiLine.resize();
            }, 500);
        });
    }

    // ================= Basic bar ================
    let basicBarElem = document.getElementById('basicBar');
    if (basicBarElem) {
        let basicBar = echarts.init(basicBarElem);
        basicBar.setOption({
            grid: {
                show: false,
                top: 5,
                left: 0,
                right: 0,
                bottom: 0
            },
            color: ['#5f6bc2'],
            tooltip: {
                show: true,
                backgroundColor: 'rgba(0, 0, 0, 0.8)'
            },
            xAxis: [{
                type: 'category',

                axisTick: {
                    alignWithLabel: true
                },
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                }
            }],
            yAxis: [{
                type: 'value',
                label: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                }
            }],
            series: [{
                data: [400, 800, 325, 900, 700, 800, 400, 900, 800, 800, 300, 405, 500, 1100, 900, 1450, 1200, 1350, 1200, 1400, 1000, 800, 950, 705, 690, 921, 1020, 903, 852, 630],
                label: {
                    show: false,
                    color: '#0168c1'
                },
                type: 'bar',
                barWidth: '70%',
                smooth: true
            }]
        });
        $(window).on('resize', function() {
            setTimeout(() => {
                basicBar.resize();
            }, 500);
        });
    }

    // ================= Multiple bar ================
    let multipleBarElem = document.getElementById('multipleBar');
    if (multipleBarElem) {
        let multipleBar = echarts.init(multipleBarElem);
        multipleBar.setOption({

            grid: {
                show: false,
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            legend: {
                borderRadius: 0,
                orient: 'horizontal',
                x: 'right',
                data: ['Online', 'Offline']
            },
            tooltip: {
                show: true,
                backgroundColor: 'rgba(0, 0, 0, 0.8)'
            },
            xAxis: [{
                type: 'category',
                axisLabel: {
                    color: '#444'
                },
                axisTick: {
                    alignWithLabel: true,
                    lineStyle: {
                        color: '#aaa'
                    },
                    color: '#eee'
                },
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#aaa'
                    }
                }
            }],
            yAxis: [{
                    type: 'value',
                    axisLabel: {
                        formatter: '${value}'
                    },
                    min: 0,
                    max: 100000,
                    interval: 25000,
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: true,
                        interval: 'auto'
                    },
                    axisTick: {
                        show: false,
                        color: '#eee'
                    },
                }

            ],

            series: [{
                    name: 'Series 1',
                    data: [35000, 69000, 22500, 60000, 50000, 50000, 30000, 80000, 70000, 60000, 20000, 30005],
                    label: {
                        show: false,
                        color: '#0168c1'
                    },
                    type: 'bar',
                    barGap: 0,
                    smooth: true
                },
                {
                    name: 'Series 2',
                    data: [45000, 82000, 35000, 93000, 71000, 89000, 49000, 91000, 80200, 86000, 35000, 40050],
                    label: {
                        show: false,
                        color: '#0168c1'
                    },
                    type: 'bar',
                    smooth: true
                }
            ]

        });
        $(window).on('resize', function() {
            setTimeout(() => {
                multipleBar.resize();
            }, 500);
        });
    }

    // ================= Multiple bar 2 ================
    let multipleBar2Elem = document.getElementById('multipleBar2');
    if (multipleBar2Elem) {
        let multipleBar2 = echarts.init(multipleBar2Elem);
        multipleBar2.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                top: '8%',
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            yAxis: {
                type: 'value',
                min: 0,
                max: 500,
                interval: 100,
                axisLabel: {
                    formatter: '{value}k',
                    color: '#333',
                    fontSize: 12,
                    fontStyle: 'normal',
                    fontWeight: 400
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#ccc',
                        width: 1
                    }
                },
                axisTick: {
                    show: false,
                    lineStyle: {
                        color: '#ccc',
                        width: 1
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: '#ddd',
                        width: 1,
                        opacity: 0.5
                    }
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: true,
                data: [
                    'Dec, 1', 'Dec, 2', 'Dec, 3', 'Dec, 4', 'Dec, 5', 'Dec, 6', 'Dec, 7'
                ],
                axisLabel: {
                    formatter: '{value}',
                    color: '#333',
                    fontSize: 12,
                    fontStyle: 'normal',
                    fontWeight: 400,

                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#ccc',
                        width: 1
                    }
                },
                axisTick: {
                    show: false,
                    lineStyle: {
                        color: '#ccc',
                        width: 1
                    }
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#ccc',
                        width: 1
                    }
                }
            },
            series: [{
                    color: '#3182bd',
                    name: 'Campaign',
                    type: 'bar',
                    barGap: 0,
                    label: {
                        normal: {
                            show: false,
                            position: 'insideBottom',
                            distance: 5,
                            align: 'left',
                            verticalAlign: 'middle',
                            rotate: 90,
                            formatter: '{c}  {name|{a}}',
                            fontSize: 14,
                            fontWeight: 'bold',
                            rich: {
                                name: {
                                    color: '#fff',

                                }
                            }
                        }
                    },
                    data: [320, 332, 301, 334, 390, 350, 215]
                },
                {
                    color: '#74c475',
                    name: 'Steppe',
                    type: 'bar',
                    label: {
                        normal: {
                            show: false,
                            position: 'insideBottom',
                            distance: 5,
                            align: 'left',
                            verticalAlign: 'middle',
                            rotate: 90,
                            formatter: '{c}  {name|{a}}',
                            fontSize: 14,
                            fontWeight: 'bold',
                            rich: {
                                name: {
                                    color: '#fff',

                                }
                            }
                        }
                    },
                    data: [220, 182, 191, 234, 290, 190, 210]
                },
                {
                    color: '#e6550d',
                    name: 'Desert',
                    type: 'bar',
                    label: {
                        normal: {
                            show: false,
                            position: 'insideBottom',
                            distance: 5,
                            align: 'left',
                            verticalAlign: 'middle',
                            rotate: 90,
                            formatter: '{c}  {name|{a}}',
                            fontSize: 14,
                            fontWeight: 'bold',
                            rich: {
                                name: {
                                    color: '#fff',

                                }
                            }
                        }
                    },
                    data: [150, 232, 201, 154, 190, 150, 130]
                },
                {
                    color: '#756bb1',
                    name: 'Wetland',
                    type: 'bar',
                    label: {
                        normal: {
                            show: false,
                            position: 'insideBottom',
                            distance: 5,
                            align: 'left',
                            verticalAlign: 'middle',
                            rotate: 90,
                            formatter: '{c}  {name|{a}}',
                            fontSize: 14,
                            fontWeight: 'bold',
                            rich: {
                                name: {
                                    color: '#fff',

                                }
                            }
                        }
                    },
                    data: [98, 77, 101, 99, 40, 30, 50]
                }

            ]
        });
        $(window).on('resize', function() {
            setTimeout(() => {
                multipleBar2.resize();
            }, 500);
        });
    }


    // =================  Bar Zoom ================
    let zoomBarElem = document.getElementById('zoomBar');
    if (zoomBarElem) {
        let zoomBar = echarts.init(zoomBarElem);
        zoomBar.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    shadowStyle: {
                        opacity: 0
                    }
                }
            },
            grid: {
                top: '8%',
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30'],
                axisLabel: {
                    inside: true,
                    textStyle: {
                        color: '#fff'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                z: 10
            },
            yAxis: {
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: '#999'
                    }
                },
                splitLine: {
                    show: false
                }
            },
            dataZoom: [{
                type: 'inside'
            }],
            series: [{ // For shadow
                    name: 'Interested',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: 'rgba(0,0,0,0.05)'
                        }
                    },
                    barGap: '-100%',
                    barCategoryGap: '40%',
                    data: [500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500],
                    animation: false
                },
                {
                    name: 'Going',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#83bff6'
                                    },
                                    {
                                        offset: 0.5,
                                        color: '#188df0'
                                    },
                                    {
                                        offset: 1,
                                        color: '#188df0'
                                    }
                                ]
                            )
                        },
                        emphasis: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#2378f7'
                                    },
                                    {
                                        offset: 0.7,
                                        color: '#2378f7'
                                    },
                                    {
                                        offset: 1,
                                        color: '#83bff6'
                                    }
                                ]
                            )
                        }
                    },
                    data: [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220, 220, 182, 191, 234, 290, 330, 310, 123, 442, 212]
                }
            ]
        });
        $(window).on('resize', function() {
            setTimeout(() => {
                zoomBar.resize();
            }, 500);
        });
    }

    // ================= Basic  dounut chart ================
    let basicDoughnutElem = document.getElementById('basicDoughnut');
    if (basicDoughnutElem) {
        let basicDoughnut = echarts.init(basicDoughnutElem);
        basicDoughnut.setOption({

            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            color: ['#c13018', '#f36e12', '#ebcb37', '#a1b968', '#0d94bc', '#135bba'],
            tooltip: {
                show: false,
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            xAxis: [{

                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    }
                }

            ],
            yAxis: [{

                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    }
                }

            ],

            series: [{
                    name: 'Sessions',
                    type: 'pie',
                    radius: ['50%', '85%'],
                    center: ['50%', '50%'],
                    avoidLabelOverlap: false,
                    hoverOffset: 5,
                    label: {
                        normal: {
                            show: false,
                            position: 'center',
                            textStyle: {
                                fontSize: '13',
                                fontWeight: 'normal'
                            },
                            formatter: "{a}",
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '15',
                                fontWeight: 'bold'
                            },
                            formatter: "{b} \n{c} ({d}%)",
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [
                        { value: 335, name: 'Organic' },
                        { value: 310, name: 'Search Eng.' },
                        { value: 234, name: 'Email' },
                        { value: 135, name: 'Referal' },
                        { value: 148, name: 'Social' },
                        { value: 548, name: 'Others' }
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }

            ]


        });
        $(window).on('resize', function() {
            setTimeout(() => {
                basicDoughnut.resize();
            }, 500);
        });
    }

    // BASIC Area Charts
    let basicAreaElem = document.getElementById('basicArea');
    if (basicAreaElem) {
        let basicArea = echarts.init(basicAreaElem);
        basicArea.setOption({
            tooltip: {
                trigger: 'axis',

                axisPointer: {
                    animation: true
                }
            },
            grid: {
                left: '4%',
                top: '4%',
                right: '3%',
                bottom: '10%'
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: [
                    'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct',
                    'Nov', 'Dec'
                ],
                axisLabel: {
                    formatter: '{value}',
                    color: '#666',
                    fontSize: 12,
                    fontStyle: 'normal',
                    fontWeight: 400,

                },
                axisLine: {
                    lineStyle: {
                        color: '#ccc',
                        width: 1
                    }
                },
                axisTick: {
                    lineStyle: {
                        color: '#ccc',
                        width: 1
                    }
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#ccc',
                        width: 1
                    }
                }
            },
            yAxis: {
                type: 'value',
                min: 0,
                max: 200,
                interval: 50,
                axisLabel: {
                    formatter: '{value}k',
                    color: '#666',
                    fontSize: 12,
                    fontStyle: 'normal',
                    fontWeight: 400,

                },
                axisLine: {
                    lineStyle: {
                        color: '#ccc',
                        width: 1
                    }
                },
                axisTick: {
                    lineStyle: {
                        color: '#ccc',
                        width: 1
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: '#ddd',
                        width: 1,
                        opacity: 0.5
                    }
                }
            },
            series: [{
                name: 'Visit',
                type: 'line',
                smooth: true,
                data: [140, 135, 95, 115, 95, 126, 93, 145, 115,
                    140, 135, 95, 115, 95, 126, 125, 145, 115, 140,
                    135, 95, 115, 95, 126, 93, 145, 115, 140, 135, 95
                ],
                symbolSize: 8,
                showSymbol: false,
                lineStyle: {
                    color: 'rgb(255, 87, 33)',
                    opacity: 1,
                    width: 1.5,
                },
                itemStyle: {
                    show: false,
                    color: '#ff5721',
                    borderColor: '#ff5721',
                    borderWidth: 1.5
                },
                areaStyle: {
                    normal: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(255, 87, 33, 1)'
                            }, {
                                offset: 0.3,
                                color: 'rgba(255, 87, 33, 0.7)'
                            }, {
                                offset: 1,
                                color: 'rgba(255, 87, 33, 0)'
                            }]
                        }
                    }
                }
            }]
        });
        $(window).on('resize', function() {
            setTimeout(() => {
                basicArea.resize();
            }, 500);
        });
    }

    // STACKED
    let stackedAreaElem = document.getElementById('stackedArea');
    if (stackedAreaElem) {
        let stackedArea = echarts.init(stackedAreaElem);
        stackedArea.setOption({
            tooltip: {
                trigger: 'axis',

                axisPointer: {
                    animation: true
                }
            },
            grid: {
                left: '4%',
                top: '4%',
                right: '3%',
                bottom: '10%'
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: [
                    'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct',
                    'Nov', 'Dec'
                ],
                axisLabel: {
                    formatter: '{value}',
                    color: '#666',
                    fontSize: 12,
                    fontStyle: 'normal',
                    fontWeight: 400,

                },
                axisLine: {
                    lineStyle: {
                        color: '#ccc',
                        width: 1
                    }
                },
                axisTick: {
                    lineStyle: {
                        color: '#ccc',
                        width: 1
                    }
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#ccc',
                        width: 1
                    }
                }
            },
            yAxis: {
                type: 'value',
                min: 0,
                max: 200,
                interval: 50,
                axisLabel: {
                    formatter: '{value}k',
                    color: '#666',
                    fontSize: 12,
                    fontStyle: 'normal',
                    fontWeight: 400,

                },
                axisLine: {
                    lineStyle: {
                        color: '#ccc',
                        width: 1
                    }
                },
                axisTick: {
                    lineStyle: {
                        color: '#ccc',
                        width: 1
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: '#ddd',
                        width: 1,
                        opacity: 0.5
                    }
                }
            },
            series: [{
                    name: 'Visit',
                    type: 'line',
                    smooth: true,
                    data: [140, 135, 95, 115, 95, 126, 93, 145, 115,
                        140, 135, 95, 115, 95, 126, 125, 145, 115, 140,
                        135, 95, 115, 95, 126, 93, 145, 115, 140, 135, 95
                    ],
                    symbolSize: 8,
                    showSymbol: false,
                    lineStyle: {
                        color: 'rgb(255, 87, 33)',
                        opacity: 1,
                        width: 1.5,
                    },
                    itemStyle: {
                        show: false,
                        color: '#ff5721',
                        borderColor: '#ff5721',
                        borderWidth: 1.5
                    },
                    areaStyle: {
                        normal: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(255, 87, 33, 1)'
                                }, {
                                    offset: 0.3,
                                    color: 'rgba(255, 87, 33, 0.7)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(255, 87, 33, 0)'
                                }]
                            }
                        }
                    }
                },
                {
                    name: 'Sales',
                    type: 'line',
                    smooth: true,
                    data: [50, 70, 65, 84, 75, 80, 70, 50, 70, 65,
                        104, 75, 80, 70, 50, 70, 65, 94, 75, 80, 70, 50,
                        70, 65, 86, 75, 80, 70, 50, 70
                    ],
                    symbolSize: 8,
                    showSymbol: false,
                    lineStyle: {
                        color: 'rgb(95, 107, 194)',
                        opacity: 1,
                        width: 1.5,
                    },
                    itemStyle: {
                        color: '#5f6cc1',
                        borderColor: '#5f6cc1',
                        borderWidth: 1.5
                    },
                    areaStyle: {
                        normal: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(95, 107, 194, 1)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(95, 107, 194, 0.7)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(95, 107, 194, 0)'
                                }]
                            }
                        }
                    }
                },
            ]
        });
        $(window).on('resize', function() {
            setTimeout(() => {
                stackedArea.resize();
            }, 500);
        });
    }

    // STACKED POINTER
    let stackedPointerAreaElem = document.getElementById('stackedPointerArea');
    if (stackedPointerAreaElem) {
        let stackedPointerArea = echarts.init(stackedPointerAreaElem);
        stackedPointerArea.setOption({
            tooltip: {
                trigger: 'axis',

                axisPointer: {
                    animation: true
                }
            },
            grid: {
                left: '4%',
                top: '4%',
                right: '3%',
                bottom: '10%'
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: [
                    '1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
                    '11', '12', '13', '14', '15', '16', '17', '18', '19', '20',
                    '21', '22', '23', '24', '25', '26', '27', '28', '29', '30'
                ],
                axisLabel: {
                    formatter: '{value}',
                    color: '#666',
                    fontSize: 12,
                    fontStyle: 'normal',
                    fontWeight: 400,

                },
                axisLine: {
                    lineStyle: {
                        color: '#ccc',
                        width: 1
                    }
                },
                axisTick: {
                    lineStyle: {
                        color: '#ccc',
                        width: 1
                    }
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#ccc',
                        width: 1
                    }
                }
            },
            yAxis: {
                type: 'value',
                min: 0,
                max: 200,
                interval: 50,
                axisLabel: {
                    formatter: '{value}k',
                    color: '#666',
                    fontSize: 12,
                    fontStyle: 'normal',
                    fontWeight: 400,

                },
                axisLine: {
                    lineStyle: {
                        color: '#ccc',
                        width: 1
                    }
                },
                axisTick: {
                    lineStyle: {
                        color: '#ccc',
                        width: 1
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: '#ddd',
                        width: 1,
                        opacity: 0.5
                    }
                }
            },
            series: [{
                    name: 'Impression',
                    type: 'line',
                    smooth: true,
                    data: [140, 135, 95, 115, 95, 126, 93, 145, 115,
                        140, 135, 95, 115, 95, 126, 125, 145, 115, 140,
                        135, 95, 115, 95, 126, 93, 145, 115, 140, 135, 95
                    ],
                    symbolSize: 8,
                    lineStyle: {
                        color: 'rgb(255, 87, 33)',
                        opacity: 1,
                        width: 1.5,
                    },
                    itemStyle: {
                        color: '#ff5721',
                        borderColor: '#ff5721',
                        borderWidth: 1.5
                    },
                    areaStyle: {
                        normal: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(255, 87, 33, 1)'
                                }, {
                                    offset: 0.3,
                                    color: 'rgba(255, 87, 33, 0.7)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(255, 87, 33, 0)'
                                }]
                            }
                        }
                    }
                },
                {
                    name: 'Clicks',
                    type: 'line',
                    smooth: true,
                    data: [50, 70, 65, 84, 75, 80, 70, 50, 70, 65,
                        104, 75, 80, 70, 50, 70, 65, 94, 75, 80, 70, 50,
                        70, 65, 86, 75, 80, 70, 50, 70
                    ],
                    symbolSize: 8,
                    lineStyle: {
                        color: 'rgb(95, 107, 194)',
                        opacity: 1,
                        width: 1.5,
                    },
                    itemStyle: {
                        color: '#5f6cc1',
                        borderColor: '#5f6cc1',
                        borderWidth: 1.5
                    },
                    areaStyle: {
                        normal: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(95, 107, 194, 1)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(95, 107, 194, 0.7)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(95, 107, 194, 0)'
                                }]
                            }
                        }
                    }
                },
            ]
        });
        $(window).on('resize', function() {
            setTimeout(() => {
                stackedPointerArea.resize();
            }, 500);
        });
    }

    // SOLID AREA
    let solidAreaElem = document.getElementById('solidArea');
    if (solidAreaElem) {
        let solidArea = echarts.init(solidAreaElem);
        solidArea.setOption({
            tooltip: {
                show: true,
                trigger: 'axis'
            },
            grid: {
                top: '3%',
                left: '1%',
                right: '1%',
                bottom: '3%',
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1 Dec', '2 Dec', '3 Dec', '4 Dec', '5 Dec', '6 Dec', '7 Dec', '8 Dec', '9 Dec', '10 Dec', '11 Dec', '12 Dec', '13 Dec', '14 Dec', '15 Dec', '16 Dec', '17 Dec', '18 Dec', '19 Dec', '20 Dec', '21 Dec', '22 Dec', '23 Dec', '24 Dec', '25 Dec', '26 Dec', '27 Dec', '28 Dec', '29 Dec', '30 Dec', '31 Dec'],
                axisLabel: {
                    show: true,
                    color: '#639',
                    interval: 5,
                    inside: false,
                    align: 'center'
                },
                axisLine: {
                    color: '#999',
                    lineStyle: {
                        color: '#999'
                    }
                },
                axisTick: {
                    interval: 0,
                    lineStyle: {
                        color: '#999'
                    }
                }
            },
            yAxis: {
                type: 'value',
                min: 0,
                max: 7,
                interval: 5,
                axisLabel: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                }
            },
            series: [{
                type: 'line',
                data: [3, 2, 3, 2, 3, 2, 3, 2, 1, 2, 1, 2, 1, 3, 1, 3, 1, 2, 1, 2, 3, 1, 2, 3, 2, 1, 2, 3, 1, 2, 4],
                smooth: true,
                showSymbol: false,
                itemStyle: {
                    borderColor: '#639',
                    color: ['#639']
                },
                lineStyle: {
                    opacity: 1,
                    width: 1,
                    color: ['#639']
                },
                areaStyle: {
                    opacity: 1,
                    color: ['#639']
                }
            }]
        });
        $(window).on('resize', function() {
            setTimeout(() => {
                solidArea.resize();
            }, 500);
        });
    }

    // ================= Basic Pie ================
    let basicPieElem = document.getElementById('basicPie');
    if (basicPieElem) {
        let basicPie = echarts.init(basicPieElem);
        basicPie.setOption({
            color: ['#c13018', '#f36d12', '#ebcb37', '#a0b967', '#0d94bc', '#04a9f4'],
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{

                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                }
            }],
            yAxis: [{
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                }
            }],

            series: [{
                    name: 'Sales by Countries',
                    type: 'pie',
                    radius: '75%',
                    center: ['50%', '50%'],
                    data: [{
                            value: 335,
                            name: 'USA'
                        },
                        {
                            value: 310,
                            name: 'CANADA'
                        },
                        {
                            value: 234,
                            name: 'MEXICO'
                        },
                        {
                            value: 135,
                            name: 'UK'
                        },
                        {
                            value: 148,
                            name: 'AUSTRALIA'
                        },
                        {
                            value: 548,
                            name: 'INDIA'
                        }
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }

            ]

        });
        $(window).on('resize', function() {
            setTimeout(() => {
                basicPie.resize();
            }, 500);
        });
    }

    // ================= Stacked ================
    let stackedPieElem = document.getElementById('stackedPie');
    if (stackedPieElem) {
        let stackedPie = echarts.init(stackedPieElem);
        stackedPie.setOption({
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            color: ['#639', '#63845', '#ebcb37', '#a1b968', '#0d94bc', '#135bba'],

            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },

            visualMap: {
                show: false,
                min: 80,
                max: 600,
                inRange: {
                    colorLightness: [0, 1]
                }
            },
            series: [{
                name: 'Source',
                type: 'pie',
                radius: '85%',
                center: ['50%', '50%'],
                data: [{
                        value: 335,
                        name: 'Direct Interview'
                    },
                    {
                        value: 310,
                        name: 'Email Marketing'
                    },
                    {
                        value: 274,
                        name: 'Alliance advertising'
                    },
                    {
                        value: 235,
                        name: 'Video Ads'
                    },
                    {
                        value: 400,
                        name: 'Search Engine'
                    }
                ].sort(function(a, b) {
                    return a.value - b.value;
                }),
                roseType: 'radius',
                label: {
                    normal: {
                        textStyle: {
                            color: '#333'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        lineStyle: {
                            color: '#333'
                        },
                        smooth: 0.2,
                        length: 10,
                        length2: 20
                    }
                },
                itemStyle: {
                    normal: {
                        color: 'rgb(102, 51, 153)',
                        shadowBlur: 200,
                        shadowColor: 'rgba(0, 0, 0, 0.0)'
                    }
                },

                animationType: 'scale',
                animationEasing: 'elasticOut',
                animationDelay: function(idx) {
                    return Math.random() * 200;
                }
            }]
        });
        $(window).on('resize', function() {
            setTimeout(() => {
                stackedPie.resize();
            }, 500);
        });
    }

    // buuble charts

    let bubbleChartElem = document.getElementById('bubbleChart');
    if (bubbleChartElem) {
        let bubbleChart = echarts.init(bubbleChartElem);
        var data = [
            [
                [28604, 77, 17096869, 'Australia', 1990],
                [31163, 77.4, 27662440, 'Canada', 1990],
                [1516, 68, 1154605773, 'China', 1990],
                [13670, 74.7, 10582082, 'Cuba', 1990],
                [28599, 75, 4986705, 'Finland', 1990],
                [29476, 77.1, 56943299, 'France', 1990],
                [31476, 75.4, 78958237, 'Germany', 1990],
                [28666, 78.1, 254830, 'Iceland', 1990],
                [1777, 57.7, 870601776, 'India', 1990],
                [29550, 79.1, 122249285, 'Japan', 1990],
                [2076, 67.9, 20194354, 'North Korea', 1990],
                [12087, 72, 42972254, 'South Korea', 1990],
                [24021, 75.4, 3397534, 'New Zealand', 1990],
                [43296, 76.8, 4240375, 'Norway', 1990],
                [10088, 70.8, 38195258, 'Poland', 1990],
                [19349, 69.6, 147568552, 'Russia', 1990],
                [10670, 67.3, 53994605, 'Turkey', 1990],
                [26424, 75.7, 57110117, 'United Kingdom', 1990],
                [37062, 75.4, 252847810, 'United States', 1990]
            ],
            [
                [44056, 81.8, 23968973, 'Australia', 2015],
                [43294, 81.7, 35939927, 'Canada', 2015],
                [13334, 76.9, 1376048943, 'China', 2015],
                [21291, 78.5, 11389562, 'Cuba', 2015],
                [38923, 80.8, 5503457, 'Finland', 2015],
                [37599, 81.9, 64395345, 'France', 2015],
                [44053, 81.1, 80688545, 'Germany', 2015],
                [42182, 82.8, 329425, 'Iceland', 2015],
                [5903, 66.8, 1311050527, 'India', 2015],
                [36162, 83.5, 126573481, 'Japan', 2015],
                [1390, 71.4, 25155317, 'North Korea', 2015],
                [34644, 80.7, 50293439, 'South Korea', 2015],
                [34186, 80.6, 4528526, 'New Zealand', 2015],
                [64304, 81.6, 5210967, 'Norway', 2015],
                [24787, 77.3, 38611794, 'Poland', 2015],
                [23038, 73.13, 143456918, 'Russia', 2015],
                [19360, 76.5, 78665830, 'Turkey', 2015],
                [38225, 81.4, 64715810, 'United Kingdom', 2015],
                [53354, 79.1, 321773631, 'United States', 2015]
            ]
        ];

        bubbleChart.setOption({
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },

            // backgroundColor: new echarts.graphic.RadialGradient(255, 255, 255, [{
            //     offset: 0,
            //     color: '#f7f8fa'
            // }, {
            //     offset: 1,
            //     color: '#cdd0d5'
            // }]),
            title: {
                text: 'Life expectancy and GDP of families in 1990 and 2015'
            },
            legend: {
                right: 10,
                data: ['1990', '2015']
            },
            xAxis: {
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                }
            },
            yAxis: {
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                },
                scale: true
            },
            series: [{
                name: '1990',
                data: data[0],
                type: 'scatter',
                symbolSize: function(data) {
                    return Math.sqrt(data[2]) / 5e2;
                },
                label: {
                    emphasis: {
                        show: true,
                        formatter: function(param) {
                            return param.data[3];
                        },
                        position: 'top'
                    }
                },
                itemStyle: {
                    normal: {
                        shadowBlur: 10,
                        shadowColor: 'rgba(120, 36, 50, 0.5)',
                        shadowOffsetY: 5,
                        color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                            offset: 0,
                            color: 'rgb(251, 118, 123)'
                        }, {
                            offset: 1,
                            color: 'rgb(204, 46, 72)'
                        }])
                    }
                }
            }, {
                name: '2015',
                data: data[1],
                type: 'scatter',
                symbolSize: function(data) {
                    return Math.sqrt(data[2]) / 5e2;
                },
                label: {
                    emphasis: {
                        show: true,
                        formatter: function(param) {
                            return param.data[3];
                        },
                        position: 'top'
                    }
                },
                itemStyle: {
                    normal: {
                        shadowBlur: 10,
                        shadowColor: 'rgba(25, 100, 150, 0.5)',
                        shadowOffsetY: 5,
                        color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                            offset: 0,
                            color: 'rgb(129, 227, 238)'
                        }, {
                            offset: 1,
                            color: 'rgb(25, 183, 207)'
                        }])
                    }
                }
            }]
        });
        $(window).on('resize', function() {
            setTimeout(() => {
                bubbleChart.resize();
            }, 500);
        });
    }



    // gauge charts

    let gaugeChartElem = document.getElementById('gaugeChart');
    if (gaugeChartElem) {
        let gaugeChart = echarts.init(gaugeChartElem);


        var option = {
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            tooltip: {
                formatter: "{a} <br/>{b} : {c}%"
            },
            toolbox: {
                // feature: {
                //     restore: {},
                //     saveAsImage: {}
                // }
            },
            series: [{
                name: 'Business indicator',
                type: 'gauge',
                detail: {
                    formatter: '{value}%'
                },
                data: [{
                    value: 50,
                    name: 'Completion rate'
                }]
            }]
        };


        gaugeChart.setOption({

            option

        });
        setInterval(function() {
            option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
            gaugeChart.setOption(option, true);
        }, 2000);
        $(window).on('resize', function() {
            setTimeout(() => {
                gaugeChart.resize();
            }, 500);
        });
    }

    // dummy charts

    // let dummyChartElem = document.getElementById('dummyChart');
    // if (dummyChartElem) {
    //     let dummyChart = echarts.init(dummyChartElem);


    //     dummyChart.setOption({
    //         grid: {
    //             left: '3%',
    //             right: '4%',
    //             bottom: '3%',
    //             containLabel: true
    //         },


    //     });
    //     $(window).on('resize', function() {
    //         setTimeout(() => {
    //             dummyChart.resize();
    //         }, 500);
    //     });
    // }


});