<html>
    <head>
        <meta charset="utf-8">
        <script src="../common/jquery.min.js"></script>
        <script src="../common/echarts.min.js"></script>
        <script src="../common/prettify/prettify.js"></script>
        <script src="../common/showCode.js"></script>
        <link rel="stylesheet" href="../common/reset.css">
        <link rel="stylesheet" href="../common/prettify/prettify.css">
        <script src="../common/perfect-scrollbar/0.6.8/js/perfect-scrollbar.min.js"></script>
        <link rel="stylesheet" href="../common/perfect-scrollbar/0.6.8/css/perfect-scrollbar.min.css">
    </head>
    <body>

        <div id="main">
            <pre class="prettyprint">

option = {
    grid: [{ // 直角坐标系
    }],
    xAxis: [{ // X 轴
        // 默认被上述 grid 使用
    }],
    yAxis: [{ // Y 轴
        // 默认被上述 grid 使用
    }],
    // 系列
    series: [{
        // 一条折线
        type: 'line',
        data: [...]
        // 默认在上述 grid 中
    }, {
        // 一组柱
        type: 'bar',
        data: [...]
        // 默认在上述 grid 中
    }, {
        // 一组散点
        type: 'scatter',
        data: [...]
        // 默认在上述 grid 中
    }]
}


            </pre>
            <div id="chart"></div>
        </div>


        <script>

        data = [["2000-06-05",116],["2000-06-06",129],["2000-06-07",135],["2000-06-08",86],["2000-06-09",73],["2000-06-10",85],["2000-06-11",73],["2000-06-12",68],["2000-06-13",92],["2000-06-14",130],["2000-06-15",245],["2000-06-16",139],["2000-06-17",115],["2000-06-18",111],["2000-06-19",309],["2000-06-20",206],["2000-06-21",137],["2000-06-22",128],["2000-06-23",85],["2000-06-24",94],["2000-06-25",71],["2000-06-26",106],["2000-06-27",84],["2000-06-28",93],["2000-06-29",85],["2000-06-30",73],["2000-07-01",83],["2000-07-02",125],["2000-07-03",107],["2000-07-04",82],["2000-07-05",44],["2000-07-06",72],["2000-07-07",106],["2000-07-08",107],["2000-07-09",66],["2000-07-10",91],["2000-07-11",92],["2000-07-12",113],["2000-07-13",107],["2000-07-14",131],["2000-07-15",111],["2000-07-16",64],["2000-07-17",69],["2000-07-18",88],["2000-07-19",77],["2000-07-20",83],["2000-07-21",111],["2000-07-22",57],["2000-07-23",55],["2000-07-24",60]];

        var dateList = data.map(function (item) {
            return item[0];
        });
        var lineValueList = data.map(function (item) {
            return item[1];
        });
        var barValueList = data.map(function (item) {
            return Math.max(0, item[1] - Math.round(Math.random() * 50));
        });
        var scatterValueList = data.map(function (item) {
            return Math.max(0, item[1] + Math.round(Math.random() * 60));
        });

        var option = {

            visualMap: [{
                show: false,
                type: 'continuous',
                seriesIndex: 0,
                min: 0,
                max: 400
            }],

            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                textStyle: {
                    fontSize: 20
                }
            },
            legend: {
                data: ['line', 'bar', 'scatter'],
                textStyle: {
                    color: '#eee',
                    fontSize: 20
                }
            },
            xAxis: [{
                axisLine: {
                    lineStyle: {color: '#bbb'}
                },
                axisLabel: {
                    textStyle: {
                        fontSize: 16
                    }
                },
                data: dateList
            }],
            yAxis: [{
                axisLine: {
                    lineStyle: {color: '#bbb'}
                },
                axisLabel: {
                    textStyle: {
                        fontSize: 16
                    }
                },
                splitLine: {show: false}
            }],
            grid: [{
            }],
            series: [{
                type: 'line',
                name: 'line',
                showSymbol: false,
                data: lineValueList
            }, {
                type: 'bar',
                name: 'bar',
                itemStyle: {
                    normal: {
                        color: '#496E83',
                        barBorderRadius: 6
                    }
                },
                data: barValueList
            }, {
                type: 'scatter',
                name: 'scatter',
                itemStyle: {
                    normal: {
                        color: '#00990F'
                    }
                },
                data: scatterValueList
            }]
        };

        initShowCode(option, {showCode: true});

        </script>
    </body>
</html>