总结

基本上看手册都能看懂，值得一提的是自适应布局的做法：
首先响应式布局要把之前的设置放进baseOption: {}里面，并在下面加上media[]，这些都可以看手册。但是这样做好之后需要先调整页面大小，并且刷新页面才能实现改变,解决方法如下：

window.onresize = myChart.resize;
myChart.setOption(option);

每次窗口大小改变的时候都会触发onresize事件，这个时候我们将echarts对象的尺寸赋值给窗口的大小这个属性，从而实现图表对象与窗口对象的尺寸一致的情况
参考链接

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="Tools/echarts.js"></script>
    <style>*{padding: 0px;margin: 0px;}</style>
</head>

<body style="width:100%">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 80%;height:400px;margin:0 auto;border: 1px             red solid"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    //定义数据
    var p_real,p_bottom,p_open,p_close,p_top;
    p_bottom = 5430;
    p_top = 5480;
    p_close = 5470;
    p_open = 5450;
    var dates = [];
    var data2 = [];
    var data = [];
    var data_new = [];
    var counter = 0;
setInterval(function(){
    //开盘，收购盘，最低，最高,实时价
    p_real = Math.ceil(Math.random()*5550+5440);
    if(p_real>p_top)p_top=p_real;
    if(p_real<p_bottom)p_bottom=p_real;
    p_close = p_real;
    data_cart = [p_open,p_close,p_bottom,p_top];
    if(counter%3==0)
    {
        data.push(data_cart);
        dates.push('time');
        p_open = Math.ceil(Math.random()*5500+5400);
    }else{
        data[data.length-1] = data_cart;
    }

    var option = {
        baseOption: {

        backgroundColor: '#21202D',
        legend: {
            data: ['日K', 'close'],
            inactiveColor: '#777',
            textStyle: {
                color: '#fff'
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                animation: false,
                lineStyle: {
                    color: '#376df4',
                    width: 2,
                    opacity: 0
                }
            }
        },
        xAxis: {
            type: 'category',
            data: dates,
            axisLine: {lineStyle: {color: '#8392A5'}}
        },
        yAxis: {
            min: 0,
            max: 12000,
            scale: true,
            axisLine: {lineStyle: {color: '#8392A5'}},
            splitLine: {show: false}
        },
        animation: false,
        series: [
            {
                type: 'candlestick',
                name: '日K',
                data: data,
                markLine: {
                  symbol: ['none', 'none'],
                   data: [
                        [
                            {name: '标线2起点', value: data[data.length - 1][1], x:     150, y: data[data.length - 1][1]},
                            {name: '标线2终点', x: 1300, y: data[data.length - 1][1]}
                        ]
                    ]


                },

                itemStyle: {
                    normal: {
                        color: '#FD1050',
                        color0: '#0CF49B',
                        borderColor: '#FD1050',
                        borderColor0: '#0CF49B'
                    }
                }
            },
            {
                name: 'close',
                type: 'line',
                data: ['100'],
                smooth: true,
                lineStyle: {
                    normal: {opacity: 0.5}
                }
            }
        ],
        dataZoom: [
            {
                type: 'slider',
//                show:false,
//                zoomlock:true,
                filterMode: 'filter',
                start: 50,
                end: 100,
                labelPrecision: 10,
                showDetail: false,
                realtime: true
//                orient:'vertical'
            }
        ]
    },
        media:[{
            query: {
                maxWidth:500
            },
            option: {
                legend: {                   // legend 放在底部中间。
                    right: 'center',
                    bottom: 0,
                    orient: 'horizontal'    // legend 横向布局。
                },
                series:  [
                    {
                        itemStyle: {
                            normal: {
                               color: 'red',
                                color0: '#0CF49B',
                                borderColor: 'red',
                                borderColor0: 'red',
                                width:'100%'
                            }
                        }
                    }

                ]


            }
        }
        ]

    };
    window.onresize = myChart.resize;
    myChart.setOption(option);
    counter++;
    },500);
</script>
</body>
</html>