echarts动态渲染下将滚动条的滑块置于末尾且只显示七天的数据

最新推荐文章于 2024-05-06 11:24:34 发布
最新推荐文章于 2024-05-06 11:24:34 发布
阅读量2.7k 收藏 6
点赞数 2
分类专栏： 困难与解决 文章标签： echarts js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43780814/article/details/116524428
版权

滚动条的滑块置于右侧
dataZoom-slider. startValue和endValue取x轴数据的最右侧
思路：
1.获得x轴数据的长度，我这里是直接传进来的xData。
2.因为startValue和endValue取得是数据的下标，所以endValue需要长度减一，startValue同理。显示的长度为endValue减去startValue的值。

 var startValue1 = xData.length -7
 var endtValue1 = xData.length -1

3.将变量startValue1 、endtValue1 赋值给dataZoom下的startValue、endValue就可以了

 startValue: startValue1,
 endValue: endtValue1,

注意： 要在使用刚指定的配置项和数据 显示图表 myChart.setOption(option); 之前。
总之注意代码执行的顺序

举例一、

//折线图1
drawChart1(xData, yData){
  var chartDom = document.getElementById('myEcharts1');
  var myChart = echarts.init(chartDom);
  var startValue1 = xData.length -7
  var endtValue1 = xData.length -1
  // 基于准备好的dom，初始化echarts实例
  // let myChart = this.echarts.init(document.getElementById("myEcharts1"));
  // 指定图表的配置项和数据
  var option = {
    title: {
      left:'3%',
      top: '5%',
      textStyle:{
        fontSize:14,
        // color:'rgba(122,185,255,0.9)',118FFE
        color: 'rgba(122,185,255,0.5)'
      },
      text:'单位：方',
      x: 'left'
    },
    xAxis: {
      type: 'category',
      data: xData,
      // data: ['2021-99-99','2021-99-99','2021-99-99','2021-99-99','2021-99-99','2021-99-99','2021-99-99','2021-99-99','2021-99-99','2021-99-99','2021-99-99','2021-99-99','2021-99-99','2021-99-99'],
      axisLine: {
        show: false,
        margin:0,
        lineStyle: {
          color: "#7AB9FF",
        }                
      },
      splitLine: {
        show:false
      }
    },
    color:['#7AB9FF'],//折线颜色
    yAxis: {
        type: 'value',
        // name: '方',
        axisLabel:{
          // formatter:'{value}(万元)', 
          interval:0,//横轴信息全部显示  
          rotate:0,//-15度角倾斜显示   
          color: '#7AB9FF',
          fontSize: 12              
        },
        axisLine: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(17, 143, 254, 0.6)",
            width: '0.5'
          }  
        }
    },
    series: [{
        data: yData,
        // data: [1000,2000,1000,2000,1000,2000,1000,2000,1000,2000],
        type: 'line'
    }],
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '5%',
      bottom: '8%',
      containLabel: true
    },
    dataZoom:[
      { //y轴固定,让内容滚动
        type: 'slider',
        borderColor: "rgba(237, 0, 0, 0)",
        xAxisIndex: [0],
        show:true, //显示滚轴
        height:11, //设置滚轴的高度
        bottom: '3%', //设置滚轴在底部
        startValue: startValue1,
        endValue: endtValue1,//设置X轴刻度之间的间隔(根据数据量来调整)
        zoomLock: false, //锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
        minValueSpan:6,//用于限制窗口大小的最小值（实际数值）。
        // maxValueSpan:100,//用于限制窗口大小的最大值（实际数值）。
        realtime:true,//拖动时，是否实时更新系列的视图。如果设置为 false，则只在拖拽结束的时候更新
        showDetail: false,//即拖拽时候滚动条两侧不显示信息 默认true
        filterMode:'empty', // 溢出窗口数据隐藏	
        backgroundColor: 'rgba(20, 68, 126, 1)', //背景颜色
        // handleColor: '#CBBCDB',
        areaStyle: {
          color: '#fff'
        },
        handleStyle: {
          borderColor: "#2264e9",
          borderWidth: "0",
          shadowBlur: 2,
          // background: "#fff",
          // shadowColor: "blue",
        },
        fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
          //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
          //给第一个设置0，第四个设置1，就是垂直渐变
          offset: 0,
          color: 'rgba(17, 143, 254, 0.63)'
        }, {
            offset: 1,
            color: 'rgba(17, 143, 254, 0.63)'
        }]),
        
      },			
    ],
  };
  //x轴数据length<7,隐藏滚动条
  if (option.xAxis.data.length < 8) {
    option.dataZoom[0].show = false
  }
  
  
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
},

举例二、
自己封装的echarts写法

js2: 这个属于某个获取数据方法里面的部分内容，如果放在methods里面的话记得放在data后面执行，下面的js1

function（）{
	const vm = this
	//质量统计X轴数据
	vm.chartName[1].firstOption.xAxis.data = resultObj.date
	//x轴数据小于7天,隐藏滚动条
	if (vm.chartName[0].firstOption.xAxis.data.length < 8) {
	  vm.chartName.map(item =>{
	    item.firstOption.dataZoom[0].show = false
	  })
	}else{
	  //将滑块置于右侧，只显示七天
	  vm.chartName.map(item =>{
	    item.firstOption.dataZoom[0].startValue = resultObj.date.length - 7 //滚动条滑块的开始位置
	    item.firstOption.dataZoom[0].endValue = resultObj.date.length - 1 //滚动条滑块的结束位置
	  })
	}
}

js1：data模块

data() {
  return {
  	chartName: [
    	{ 
          title:'质量统计',///333
          titleB:'',
          name:'质量统计',
          class:'iconfont icon-tongji2',
          show:false,
          // color:['#00C9E9','#4AC10F'],
          firstOption:{
            title: {
              left:'12',
              // top:'10',
              textStyle:{
                fontSize:12,
                color:'rgba(122,185,255,0.5)',
              },
              text:'比率'

            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {//层面颜色设置
              // right:0,
              top:'-1%',
              x: 'center',
              data:[{
                name:'上层面',
                textStyle:{
                  color:'#118FFE',
                  fontSize:10
                }
              },{
                name:'下层面',
                textStyle:{
                  color:'#E8C53B',
                  fontSize:10,
                  borderWidth:20
                }
              }],
              // itemStyle:{
              //   color: function(params) {
              //     var colorList = ['#118FFE','#E8C53B']
              //     return colorList[params.dataIndex]
              //   },
              // }
            },
            color:['#118FFE', '#E8C53B'],
            grid: {
              //直角坐标系内绘图网格
              y:35,
              y2:50,
              x:40,
              x2:20,
              left: '4%',       
              right: '4%',
              bottom: '8%',
              // top:'15%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              
              data: [],
              // axisLabel:{
              //   formatter:'{value}月'
              // },
              axisLine: {
                show: false,
                margin:0,
                lineStyle: {
                  color: "#7AB9FF",
                }                
              },
              splitLine: {
                show:false
              }
            },
            yAxis: {
              type: 'value',
              axisLabel:{
                // formatter:'{value}(万元)', 
                interval:0,//横轴信息全部显示  
                rotate:0,//-15度角倾斜显示   
                color: '#7AB9FF',
                fontSize: 12              
              },
              axisLine: {
                show: false
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "rgba(17, 143, 254, 0.6)",
                  width: '0.5'
                }  
              }
            },
            series: [
              {
                name:'上层面',
                type:'line',
                data:[],
              },
              {
                name:'下层面',
                type:'line',
                data:[],
              }
            ],
            dataZoom:[
              { //y轴固定,让内容滚动
                type: 'slider',
                borderColor: "rgba(237, 0, 0, 0)",
                xAxisIndex: [0],
                show:true, //显示滚轴
                height:11, //设置滚轴的高度
                bottom:0, //设置滚轴在底部
                startValue: 90,
                endValue: 100,//设置X轴刻度之间的间隔(根据数据量来调整)
                minValueSpan:6,//用于限制窗口大小的最小值（实际数值）。
                // maxValueSpan:1000,//用于限制窗口大小的最大值（实际数值）。
                realtime:true,//拖动时，是否实时更新系列的视图。如果设置为 false，则只在拖拽结束的时候更新
                showDetail: false,//即拖拽时候滚动条两侧不显示信息 默认true
                filterMode:'none', // 溢出窗口数据隐藏	
                backgroundColor: 'rgba(20, 68, 126, 1)', //背景颜色
                handleColor: '#CBBCDB',
                areaStyle: {
                  color: '#fff'
                },
                handleStyle: {
                  borderColor: "#2264e9",
                  borderWidth: "0",
                  shadowBlur: 2,
                  // background: "#fff",
                  // shadowColor: "blue",
                },
                fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                  //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
                  //给第一个设置0，第四个设置1，就是垂直渐变
                  offset: 0,
                  color: 'rgba(17, 143, 254, 0.63)'
                }, {
                    offset: 1,
                    color: 'rgba(17, 143, 254, 0.63)'
                }]),
              },			
            ],
          },
        },
   	]
  }
}
美丽先生
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决echarts数据二次渲染不成功的问题
10-15
在本文中，我们将深入探讨如何解决ECharts数据二次渲染不成功的问题。ECharts 是一个基于 JavaScript 的开源可视化库，广泛用于创建各种图表。在某些场景下，比如动态更新数据或者根据用户交互改变图表内容时，我们...
vue+echarts实现动态绘制图表及异步加载数据的方法
10-17
【Vue + Echarts 实现动态绘制图表及异步加载数据】 在 Vue 框架中，结合 Echarts 图表库可以方便地实现动态绘制图表，包括折线图、柱状图等。Echarts 是一个基于 JavaScript 的开源可视化库，提供了丰富的图表类型...
Echarts实现横向和纵向滚动条、dataZoom及其滚动条设置
最新发布
林中明月间丶
05-06 1530
echart没有滚动条概念，有配置选项类似滚动条，通过手段模拟滚动条效果....省略很多字（难）
Echarts柱状图
xiaoHelloWord的博客
08-04 680
我这里的数据是随便写的，让后台给接口的时候，把排名从高到底给好 <template> <div id="main2" style="width: 460px; height: 280px;"></div> </template> <script> // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。 import * as echarts from 'echarts/core'; // 引入柱状图图表.
ECharts 柱状图表x轴数据拥挤，可添加滑动块配置数据区域缩放
qq_51464657的博客
04-25 1167
echarts柱状图添加滑动块解决x轴数据拥挤
echarts 带滚轮的折线图 固定显示最后一条数据的横（x）轴坐标
细节怪的博客
09-16 3334
使用官网的滚动条时，我们会发现在展示整体数据的时候，最后一条数据的x轴坐标有时会显示出来，有时则因为与前一条数据间距过窄而被隐藏，但是项目要求整体展示的时候，固定显示第一条和最后一条数据的横（x）轴信息，我们只要设置下面的参数就可以实现啦~
关于echarts 下方出现滚动条dataZoom
weixin_47194802的博客
03-29 1768
dataZoom的类型有两种，一个是inside，一个是slider，这里用的是inside，inside是可以实现用鼠标去直接缩放柱状图里面的数据的，slider不可以用鼠标去缩放柱状图的内容。由于数据量很多，一小块区域展不开那么多数据，于是想要做一个可以选择范围的柱状图。我其实就是想调整一下滚动条的位置，这个是我的效果图。因为用的slider，所以只能手动拖动两边实现。现在是一个很灵活的图啦，可以用鼠标拖动，伸缩~这个滚动条的位置可以这样去设置。如果用inside，这样写是不出滚动条的。
Echart边滑动datazoom边动态请求添加数据
MissRen920的博客
04-29 2561
Echart边滑动datazoom边动态请求添加数据html部分js部分 最近遇到一个需求，Echart绘制图像的时候，数据量过大，会出现长时间的加载空白的界面，这样的用户体验并不是很好，领导希望能够先加载一部分数据，有一个页面的展示，如果用户拖动下面的滚动条则继续加载剩下的数据，这样的用户体验是最好的，于是就有了现在的需求。 实现思路大概是这样的，先加载100条初始数据（具体结合需求而定），用户拖动下面的滚动条的时候再请求接下来的2000条数据，话不多说，直接上代码吧。 html部分 <div i
echarts有滑块
tiankongxiao的博客
03-11 1649
00
在vue中使用Echarts利用watch做动态数据渲染操作
10-15
主要介绍了在vue中使用Echarts利用watch做动态数据渲染操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决layui数据表格table的横向滚动条显示问题
12-11
ps：这个问题fly社区给出的解释是：table 列宽自适应出现横向滚动条的几率一般是比较小的，主要原因是 table 的渲染有时会在浏览器纵向滚动条出现之前渲染完毕，这时 table 容器会被强制减少滚动条宽度的差（一般是 ...
Echarts滑块缩放组件默认展示固定区域
A_Runner的博客
05-28 6129
安居不用架高楼,书中自有黄金屋 现在的需求是这样的,如下图:无论我选择的时间是多少,下面的折线图都只展示近15天的数据:(前提是选择时间超过15天) 经过查找echarts官网得知,slide滑动条型数据区域缩放组件,可以自定义开始和结束位置,默认为0到100; 由此可知:end值我们可知固定设置成100,因为需求中明确规定查看的近15天的数据;但问题是,开始值,从多少开始呢? 在...
Echarts柱状图横向滚动，如何实现从后往前滚动
407指导员
07-18 505
Echarts柱状图横向滚动，如何实现从后往前滚动
【ECharts】柱状图自动滚动，结束后从头开始
Qxn530的博客
09-01 6653
eacharts柱状图自动滚动，结束后从头开始
echarts实现横向和纵向滚动条、dataZoom及其滚动条设置
热门推荐
細水、長流√的专栏
09-10 2万+
echart没有滚动条概念，有配置选项类似滚动条，通过手段模拟滚动条效果....省略很多字（难）
ECharts条形进度图及滚动条设置案例
每一个想要学习的念头，都是未来的你在呼救。
06-26 3418
ECharts条形进度图及滚动条设置案例
echarts 图表设置 滚动条
zhang_zan
08-10 4828
echarts图表设置滚动条
echarts 折线图 X轴 dataZoom 滚动条 禁止鼠标选取滚动条 只允许左右滑动
05-31
可以通过设置 dataZoom 组件的 `zoomLock` 属性来实现禁止鼠标选取滚动条，只允许左右滑动的效果。将 `zoomLock` 属性设置为 `true` 后，鼠标只能拖动滚动条进行左右滑动，不能进行区域选取。 示例代码如下： ```javascript option = { xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }, yAxis: { type: 'value' }, dataZoom: { type: 'slider', zoomLock: true // 禁止鼠标选取滚动条，只允许左右滑动 }, series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'line' }] }; ``` 在上述代码中，`dataZoom` 组件的 `type` 属性设置为 `slider`，表示使用滑动条组件。`zoomLock` 属性设置为 `true`，表示禁止鼠标选取滚动条，只允许左右滑动。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值