echarts dataZoom动态控制

叁歲伎倆 2022-11-16 10:57 445阅读 0赞

//方法一：x轴数据>20条显示滚动条，否则不显示
    dataZoom: [{                  
                        type: 'slider',
                        show: false,
                        start: 0,
                        endValue: 20,
                        filterMode: 'empty',
                        orient:"horizontal",  
                        height: 12,
                        bottom:'3px',                   
                        handleStyle: {
                            color: "#519cff",
                            backgroundColor: '#519cff'
                        },
                        borderColor: "#519cff"
                    }]
    
    if (this.totalTime.length <= 20) {
              option.dataZoom[0].show = false
              option.dataZoom[0].start = 0
            } else {
              option.dataZoom[0].show = true  
              option.dataZoom[0].start = 10
            }  
        
    myChart3.setOption(option,true);
    
    //方法二：x轴数据过多显示不全的时候，自动轮播展示
            setInterval(function () {
                // 每次向后滚动一个，最后一个从头开始。
                if (option.dataZoom[0].endValue == SData.length ) {
                    option.dataZoom[0].endValue = 5; 
                    option.dataZoom[0].startValue = 0;
                }
                else {
                    option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
                    option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
                }
                myChart.setOption(option);
            }, 2000);

发表评论取消回复

表情：

评论列表（有 0 条评论，445人围观）

还没有评论，来说两句吧...

相关阅读

相关 Echarts散点图筛选新玩法dataZoom

目录前言一、引入Echarts5.4.3 二、新建index.html 三、绑定Echarts展示元素四、初始数据绑定五、option设置六、效果展示

- 日理万妓/ 2023年10月16日 10:37/ 0 赞/ 67 阅读

相关 ECharts 使用dataZoom.type给x坐标轴加滚动条

1 使用详解 dataZoom.type 说明：组件类型。默认值：'slider'。参数类型：string。可选值：（1）'slider'，滑动条型数据

电玩女神/ 2023年10月05日 08:34/ 0 赞/ 18 阅读

相关 echarts使用Demo（动态bar+动态map）

Demo描述柱状图表10s动态更新，地图图标10s动态更新业务相关的省份高亮（根据数据值所属Rang动态分配不同的高亮显示） Demo代码带注释 Demo代码

我就是我/ 2023年05月30日 06:06/ 0 赞/ 100 阅读

相关 Echarts中dataZoom添加滚动条

1、dataZoom配置 dataZoom: [{ //默认控制x轴

￡神魔★判官ぃ/ 2023年01月13日 10:07/ 0 赞/ 303 阅读

相关 echarts中dataZoom ，设置 handleIcon 为圆形或长方形

`dataZoom` 组件用于区域缩放，先上手柄效果图：长方形和圆形的效果： ![20200907164441339.png][] ![202009071645117

心已赠人/ 2022年12月04日 09:14/ 0 赞/ 378 阅读

相关 echarts dataZoom动态控制

//方法一：x轴数据>20条显示滚动条，否则不显示 dataZoom: [{

叁歲伎倆/ 2022年11月16日 10:57/ 0 赞/ 446 阅读

相关关于echart 动态数据，使用dataZoom精确控制显示数据数量

echarts为我们提供了dataZoom 组件，当数据过多时就有了它的用武之地，业务场景：数据返回100调可是为了前端显示效果默认只显示20条，其他数据由dataZoom控制

你的名字/ 2022年11月15日 03:51/ 0 赞/ 708 阅读

相关 echarts横轴展示不全使用滚动条(dataZoom)的方法

这个是option里需要配置的东西 dataZoom: [ {

傷城~/ 2022年09月12日 12:59/ 0 赞/ 672 阅读

相关 echarts实现动态折线图

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

ゝ一纸荒年。/ 2022年05月15日 02:24/ 0 赞/ 812 阅读

相关 echarts多图控制

var x=[],_x=[],_series=[],_i=0,leftGrid=[[{ left: "60px",right: "4%",h

迈不过友情╰/ 2022年04月13日 04:10/ 0 赞/ 148 阅读