最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

ECharts柱狀圖過(guò)多添加滾動(dòng)條的步驟(親測(cè)可用)

 更新時(shí)間:2024年01月11日 11:21:08   作者:凌霄玉階非所愿  
這篇文章主要介紹了ECharts柱狀圖過(guò)多添加滾動(dòng)條的步驟(親測(cè)可用),添加echarts柱狀圖滾動(dòng)條,首先添加js用來(lái)判斷當(dāng)前視圖要顯示幾個(gè)及是否顯示滾動(dòng)條,本文結(jié)合實(shí)例代碼介紹的非常詳細(xì),需要的朋友參考下吧

ECharts柱狀圖過(guò)多添加滾動(dòng)條的步驟(親測(cè)可用)

echarts引用js需較新版本,否則會(huì)不顯示
ECharts官網(wǎng)地址

添加echarts柱狀圖滾動(dòng)條,步驟如下:

首先添加js用來(lái)判斷當(dāng)前視圖要顯示幾個(gè)及是否顯示滾動(dòng)條:

        var _DEPTNUMER = []; //存入所有科室
        var showEchart = false;
        var namenum = 0;
        if (_DEPTNUMER.length > 0) {
            namenum = Math.floor(100 / (_DEPTNUMER.length / 3));         //這個(gè)3可以順便調(diào)整是用來(lái)判斷當(dāng)前視圖要顯示幾個(gè)
            if (_DEPTNUMER.length > 3) {                                 //3也可以調(diào)整用來(lái)判斷是否顯示滾動(dòng)條
                showEchart = true;
            } else {
                showEchart = false;
            }
        }

添加echarts滾動(dòng)條:

 dataZoom: [
                    {
                        type: 'slider',
                        realtime: true,
                        start: 0,
                        end: namenum,  // 數(shù)據(jù)窗口范圍的結(jié)束百分比。范圍是:0 ~ 100。
                        height: 5, //組件高度
                        left: 5, //左邊的距離
                        right: 5, //右邊的距離
                        bottom: 10, //下邊的距離
                        show: showEchart,  // 是否展示
                        fillerColor: "rgba(17, 100, 210, 0.42)", // 滾動(dòng)條顏色
                        borderColor: "rgba(17, 100, 210, 0.12)",
                        handleSize: 0,      //兩邊手柄尺寸
                        showDetail: false, //拖拽時(shí)是否展示滾動(dòng)條兩側(cè)的文字
                        zoomLock: true,         //是否只平移不縮放
                        moveOnMouseMove: false, //鼠標(biāo)移動(dòng)能觸發(fā)數(shù)據(jù)窗口平移
                        //zoomOnMouseWheel: false, //鼠標(biāo)移動(dòng)能觸發(fā)數(shù)據(jù)窗口縮放
                         //下面是自己發(fā)現(xiàn)的一個(gè)問(wèn)題,當(dāng)點(diǎn)擊滾動(dòng)條橫向拖拽拉長(zhǎng)滾動(dòng)條時(shí),會(huì)出現(xiàn)文字重疊,導(dǎo)致效果很不好,以此用下面四個(gè)屬性進(jìn)行設(shè)置,當(dāng)拖拽時(shí),始終保持顯示六個(gè)柱狀圖,可結(jié)合自己情況進(jìn)行設(shè)置。添加這個(gè)屬性前后的對(duì)比見(jiàn)**圖二**
                         startValue: 0, // 從頭開(kāi)始。
                         endValue: 6,  // 最多六個(gè)
                         minValueSpan: 6,  // 放大到最少幾個(gè)
                         maxValueSpan: 6,  //  縮小到最多幾個(gè)
                    },
                    {
                        type: "inside",  // 支持內(nèi)部鼠標(biāo)滾動(dòng)平移
                        start: 0,
                        end: namenum,
                        zoomOnMouseWheel: false,  // 關(guān)閉滾輪縮放
                        moveOnMouseWheel: true, // 開(kāi)啟滾輪平移
                        moveOnMouseMove: true  // 鼠標(biāo)移動(dòng)能觸發(fā)數(shù)據(jù)窗口平移 
                    }
                ]

如下圖:

圖二更改前(鼠標(biāo)放到滾動(dòng)條上面左右拖拽拉長(zhǎng)時(shí)):

更改后:

擴(kuò)展:

echarts使用getZr()事件獲取柱狀圖當(dāng)前點(diǎn)擊列的數(shù)據(jù)

 var t = document.getElementById("cardChart");
    t.style.width = window.offsetWidth + "px";
    var cardChart = echarts.init(t),
                options = {
                    color: ['#3398DB'],
                    title: {
                        left: "right",
                        //text: new Date().getFullYear() + "年數(shù)據(jù)",
                        textStyle: {
                            color: "#2c2c2c",
                            fontSize: 14,
                            fontWeight: 500
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐標(biāo)軸指示器,坐標(biāo)軸觸發(fā)有效
                            type: 'shadow'        // 默認(rèn)為直線,可選為:'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: "category",
                        data: dataYearCountName,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval: 0,    //強(qiáng)制文字產(chǎn)生間隔
                            rotate: 45,     //文字逆時(shí)針旋轉(zhuǎn)45°
                            textStyle: {    //文字樣式
                                color: "black",
                                fontSize: 14,
                                fontFamily: 'Microsoft YaHei'
                            }
                        }
                    }],
                    yAxis: [
                            {
                                type: "value"
                            }
                        ],
                    series: [
                            {
                                name: "例數(shù)",
                                type: "bar",
                                barWidth: "60%",
                                data: dataYearCountNum
                            }
                    ]
        };
    //-----------------從這里開(kāi)始 -----------------
    //cardChart 柱狀圖名稱
    cardChart.setOption(options);
    cardChart.off('click'); //防止觸發(fā)兩次點(diǎn)擊事件
    cardChart.getZr().on('click', (params) => {
        let pointInPixel = [params.offsetX, params.offsetY];
        if (cardChart.containPixel('grid', pointInPixel)) {
            let pointInGrid = cardChart.convertFromPixel({
                seriesIndex: 0
            }, pointInPixel);
            let xIndex = pointInGrid[0]; //索引
            let handleIndex = Number(xIndex);
            let seriesObj = cardChart.getOption(); //圖表object對(duì)象
            var op = cardChart.getOption();
            //獲得圖表中點(diǎn)擊的列
            var month = op.xAxis[0].data[handleIndex];  //獲取點(diǎn)擊的列名
            console.log(month);
            console.log(handleIndex, seriesObj);
        };
    });

到此這篇關(guān)于ECharts柱狀圖過(guò)多添加滾動(dòng)條(親測(cè)可用)的文章就介紹到這了,更多相關(guān)ECharts柱狀圖滾動(dòng)條內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論

托克逊县| 金坛市| 济阳县| 四会市| 青川县| 贵州省| 灵丘县| 延安市| 太仆寺旗| 岑溪市| 图木舒克市| 扎兰屯市| 鹤山市| 敦煌市| 平阳县| 赫章县| 海晏县| 岳普湖县| 红河县| 共和县| 全南县| 开封县| 巴东县| 鄂州市| 南城县| 花莲县| 会昌县| 隆德县| 梁河县| 南丹县| 郧西县| 迭部县| 万州区| 监利县| 宣威市| 沙洋县| 景洪市| 昔阳县| 马龙县| 江城| 弥勒县|