echarts datazoom 显示的位置设置

设置grid属性里的bottom

var eleCurves = document.getElementById(eleCourtsBeforeCurves);
    var eleCurvesChart = echarts.init(eleCurves);
    var eleCurvesOption = {
        title: {
            text: 
        },
        tooltip: {
            trigger: axis
        },
        legend: {
            data: [线损率]
        },
        grid: {
            left: 3%,
            right: 4%,
            bottom: 15%,
            containLabel: true
        },
        xAxis: {
            type: category,
            boundaryGap: true,
            data: timeDataArr,
            axisLabel: {
                interval: 0,
                formatter: function (value) {
                    //x轴的文字改为竖版显示
                    var str = value.split(" ");
                    return str.join("
");
                }
            }
        },
        yAxis: {
            type: value,
            name:线损率(%),
        },
        dataZoom: [{
            type: slider,
            startValue: 0,
            handleIcon: M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z,
            handleSize: 100%,
            handleStyle: {
                color: #0B3C6F,
                shadowBlur: 3,
                shadowColor: rgba(0, 0, 0, 0.6),
                shadowOffsetX: 2,
                shadowOffsetY: 2
            },
                bottom: 10px
        }],
        series: [
            {
                name: 线损率,
                type: line,
                data: XlegendArr,
                markLine: {
                    symbol: [none, none],//去掉箭头
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                type: solid,
                                color:{//设置渐变
                                    type: linear,
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: red// 0% 处的颜色
                                    }, {
                                        offset: 1, color: blue // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                }
                            },
                            label: {
                                show: true,
                                position:middle
                            }
                        }
                    },
                    data: [{
                        xAxis : dateTime,//这里设置false是隐藏不了的，可以设置为-1
                    },]
                }
            }
        ]
    };
    eleCurvesChart.setOption(eleCurvesOption);
    $(#eleCourtsBeforeCurves).resize(function () {
        eleCurvesChart.resize();
    });