1. 程式人生 > >ECharts中dataazoom的用法

ECharts中dataazoom的用法

待解決的問題:

1·如果日期是當月30天資料,如何顯示當天及前9天,共10天的資料;

2.如何控制滑動標籤的位置;

dataZoom=[                                      //區域縮放
    {
        id: 'dataZoomX',
        show:true,                              //是否顯示元件。如果設定為 false,不會顯示,但是資料過濾的功能還存在。
        backgroundColor:"rgba(47,69,84,0)",     //元件的背景顏色
        type: 'slider',                         //slider表示有滑動塊的,inside表示內建的
        dataBackground:{                        //資料陰影的樣式。
            lineStyle:mylineStyle,              //陰影的線條樣式
            areaStyle:myareaStyle,              //陰影的填充樣式
        },
        fillerColor:"rgba(167,183,204,0.4)",    //選中範圍的填充顏色。
        borderColor:"#ddd",                     //邊框顏色。
        filterMode: 'filter',                   //'filter':當前資料視窗外的資料,被過濾掉。即會影響其他軸的資料範圍。每個資料項,只要有一個維度在資料視窗外,整個資料項就會被過濾掉。
                                                //'weakFilter':當前資料視窗外的資料,被過濾掉。即會影響其他軸的資料範圍。每個資料項,只有當全部維度都在資料視窗同側外部,整個資料項才會被過濾掉。
                                                //'empty':當前資料視窗外的資料,被設定為空。即不會影響其他軸的資料範圍。
                                                //'none': 不過濾資料,只改變數軸範圍。
        xAxisIndex:0,                           //設定 dataZoom-inside 元件控制的x軸,可以用陣列表示多個軸
        yAxisIndex:[0,2],                       //設定 dataZoom-inside 元件控制的y軸,可以用陣列表示多個軸
        radiusAxisIndex:3,                      //設定 dataZoom-inside 元件控制的radius 軸,可以用陣列表示多個軸
        angleAxisIndex:[0,2],                   //設定 dataZoom-inside 元件控制的angle 軸,可以用陣列表示多個軸
        start: 30,                              //資料視窗範圍的起始百分比,表示30%
        end: 70,                                //資料視窗範圍的結束百分比,表示70%
        startValue:10,                          //資料視窗範圍的起始數值
        endValue:100,                           //資料視窗範圍的結束數值。
        orient:"horizontal",                    //佈局方式是橫還是豎。不僅是佈局方式,對於直角座標系而言,也決定了,預設情況控制橫向數軸還是縱向數軸。'horizontal':水平。'vertical':豎直。
        zoomLock:false,                         //是否鎖定選擇區域(或叫做資料視窗)的大小。如果設定為 true 則鎖定選擇區域的大小,也就是說,只能平移,不能縮放。
        throttle:100,                           //設定觸發檢視重新整理的頻率。單位為毫秒(ms)。
        zoomOnMouseWheel:true,                  //如何觸發縮放。可選值為:true:表示不按任何功能鍵,滑鼠滾輪能觸發縮放。false:表示滑鼠滾輪不能觸發縮放。'shift':表示按住 shift 和滑鼠滾輪能觸發縮放。'ctrl':表示按住 ctrl 和滑鼠滾輪能觸發縮放。'alt':表示按住 alt 和滑鼠滾輪能觸發縮放。
        moveOnMouseMove:true,                   //如何觸發資料視窗平移。true:表示不按任何功能鍵,滑鼠移動能觸發資料視窗平移。false:表示滑鼠滾輪不能觸發縮放。'shift':表示按住 shift 和滑鼠移動能觸發資料視窗平移。'ctrl':表示按住 ctrl 和滑鼠移動能觸發資料視窗平移。'alt':表示按住 alt 和滑鼠移動能觸發資料視窗平移。
        left:"center",                          //元件離容器左側的距離,'left', 'center', 'right','20%'
        top:"top",                              //元件離容器上側的距離,'top', 'middle', 'bottom','20%'
        right:"auto",                           //元件離容器右側的距離,'20%'
        bottom:"auto",                          //元件離容器下側的距離,'20%'
 
    },
    {
        id: 'dataZoomY',
        type: 'inside',
        filterMode: 'empty',
        disabled:false,                         //是否停止元件的功能。
        xAxisIndex:0,                           //設定 dataZoom-inside 元件控制的 x軸,可以用陣列表示多個軸
        yAxisIndex:[0,2],                       //設定 dataZoom-inside 元件控制的 y軸,可以用陣列表示多個軸
        radiusAxisIndex:3,                      //設定 dataZoom-inside 元件控制的 radius 軸,可以用陣列表示多個軸
        angleAxisIndex:[0,2],                   //設定 dataZoom-inside 元件控制的 angle 軸,可以用陣列表示多個軸
        start: 30,                              //資料視窗範圍的起始百分比,表示30%
        end: 70,                                //資料視窗範圍的結束百分比,表示70%
        startValue:10,                          //資料視窗範圍的起始數值
        endValue:100,                           //資料視窗範圍的結束數值。
        orient:"horizontal",                    //佈局方式是橫還是豎。不僅是佈局方式,對於直角座標系而言,也決定了,預設情況控制橫向數軸還是縱向數軸。'horizontal':水平。'vertical':豎直。
        zoomLock:false,                         //是否鎖定選擇區域(或叫做資料視窗)的大小。如果設定為 true 則鎖定選擇區域的大小,也就是說,只能平移,不能縮放。
        throttle:100,                           //設定觸發檢視重新整理的頻率。單位為毫秒(ms)。
        zoomOnMouseWheel:true,                  //如何觸發縮放。可選值為:true:表示不按任何功能鍵,滑鼠滾輪能觸發縮放。false:表示滑鼠滾輪不能觸發縮放。'shift':表示按住 shift 和滑鼠滾輪能觸發縮放。'ctrl':表示按住 ctrl 和滑鼠滾輪能觸發縮放。'alt':表示按住 alt 和滑鼠滾輪能觸發縮放。
        moveOnMouseMove:true,                   //如何觸發資料視窗平移。true:表示不按任何功能鍵,滑鼠移動能觸發資料視窗平移。false:表示滑鼠滾輪不能觸發縮放。'shift':表示按住 shift 和滑鼠移動能觸發資料視窗平移。'ctrl':表示按住 ctrl 和滑鼠移動能觸發資料視窗平移。'alt':表示按住 alt 和滑鼠移動能觸發資料視窗平移。
    }
]