<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 = {
    ...,
    series: [{
        // 一条折线
        type: 'line',
        name: 'the-line',
        ...
    }, {
        // 用作折线下虚柱阴影
        type: 'bar',
        // 使用同样的 name 使能同步被 legend 控制。
        name: 'the-line',
        itemStyle: {
            normal: {
                // 渐变
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#14c8d4'},
                        {offset: 1, color: '#43eec6'}
                    ]
                )
            }
        },
    }, {
        // 用作折线下虚柱阴影
        type: 'pictorialBar',
        name: 'dotted',
        ...
    },
    ...
    ]
}


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


        <script>


        // Generate data
        var category = [];
        var dottedBase = +new Date();
        var lineData = [];
        var barData = [];

        for (var i = 0; i < 20; i++) {
            var date = new Date(dottedBase += 3600 * 24 * 1000);
            category.push([
                date.getFullYear(),
                date.getMonth() + 1,
                date.getDate()
            ].join('-'));
            var b = Math.random() * 200;
            var d = Math.random() * 200;
            barData.push(b)
            lineData.push(d + b);
        }


        // option
        option = {
            backgroundColor: '#0f375f',
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['line', 'bar'],
                textStyle: {
                    color: '#ccc'
                }
            },
            xAxis: {
                data: category,
                axisLine: {
                    lineStyle: {
                        color: '#ccc'
                    }
                }
            },
            yAxis: {
                splitLine: {show: false},
                axisLine: {
                    lineStyle: {
                        color: '#ccc'
                    }
                }
            },
            series: [{
                name: 'line',
                type: 'line',
                smooth: true,
                showAllSymbol: true,
                symbol: 'emptyCircle',
                symbolSize: 15,
                data: lineData
            }, {
                name: 'bar',
                type: 'bar',
                barWidth: 10,
                itemStyle: {
                    normal: {
                        barBorderRadius: 5,
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#14c8d4'},
                                {offset: 1, color: '#43eec6'}
                            ]
                        )
                    }
                },
                data: barData
            }, {
                name: 'line',
                type: 'bar',
                barGap: '-100%',
                barWidth: 10,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: 'rgba(20,200,212,0.5)'},
                                {offset: 0.2, color: 'rgba(20,200,212,0.2)'},
                                {offset: 1, color: 'rgba(20,200,212,0)'}
                            ]
                        )
                    }
                },
                z: -12,
                data: lineData
            }, {
                name: 'dotted',
                type: 'pictorialBar',
                symbol: 'rect',
                itemStyle: {
                    normal: {
                        color: '#0f375f'
                    }
                },
                symbolRepeat: true,
                symbolSize: [12, 4],
                symbolMargin: 1,
                z: -10,
                data: lineData
            }]
        };


        initShowCode(option, {codeWidth: 600});

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