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("\n");
                }
            }
        },
        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();
    });