echarts dataZoom动态控制

叁歲伎倆 2022-11-16 10:57 430阅读 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 条评论，430人围观）

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

相关阅读

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

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

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

相关 Echarts中dataZoom添加滚动条

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

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

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

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

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

相关 echarts dataZoom动态控制

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

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

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

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

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

相关 echarts 画动态水球

前言在对一些需要存放液体的工厂进行开发基于物联网传感器的监控平台时，经常需要监控该蓄水池当前所处的容量占比为多少。以达到随时调整其蓄水量的目的。接下来我们看

朴灿烈づ我的快乐病毒、/ 2022年10月22日 07:35/ 0 赞/ 182 阅读

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

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

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

相关 echarts实现动态折线图

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

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

相关 echarts多图控制

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

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

相关 echart series个数动态变化

<div id="mybarChartByTime" style="height: 300px"></div> function functionName(d

怼烎@/ 2021年10月08日 06:40/ 0 赞/ 345 阅读