首页 > 其他分享 >echarts dataZoom x轴数据过多时候 默认展示后10个数据

echarts dataZoom x轴数据过多时候 默认展示后10个数据

时间:2023-11-08 10:55:05浏览次数:28  
标签:10 展示 dataZoom xDataArr 数据 echarts

echarts 官网 https://echarts.apache.org/zh/option.html#dataZoom-slider.endValue

轴类型为category dataZoom 的startValueendValue 的值 可以为 axis的数组的索引 从而 放弃使用 dataZoom的 startend 的 0~100的范围值,更好的实现默认展示后10个数据的功能

 

 

解决实现代码如下:

//this.xDataArr 为x 轴数据
const dataOption = {
  color: color,
  xAxis: {
    data: this.xDataArr
  },
  legend: {
    data: legendArr
  },
  dataZoom: [
    {
      type: 'slider',
      startValue: this.xDataArr.length - 9, // 展示后10个数据的索引
      endValue: this.xDataArr.length // 展示全部数据
    }
  ],
  series: seriesArr
}

实现结果 如图:

 

 

 



标签:10,展示,dataZoom,xDataArr,数据,echarts
From: https://www.cnblogs.com/WorldEye/p/17816882.html

相关文章

  • OpenHarmony 社区运营报告(2023 年 10 月)
     ● 截至2023年10月,OpenHarmony社区共有51家共建单位,累计超过6200名贡献者产生24.2万多个PR,2.3万多个Star,6.1万多个Fork,59个SIG。 ● OpenHarmony 4.0版本如期而至,开发套件同步升级到API 10。相比3.2 Release版本,新增4000多个ArkTS API,应用开发能力更加丰富;HDF新增2......
  • 华为云CodeLab中GPU: 1*P100|CPU: 8核 64GB的显卡驱动与cuda版本
    需要加!!nvidia-smi安装torch时,cuda的版本要<=11.4......
  • 冰橙Ai- ChatGPT开放接口最新版4.0 1106接口 gpt-4-1106-preview gpt-3.5-turbo-1106
    冰橙Ai-ChatGPT开放接口最新版4.01106接口gpt-4-1106-previewgpt-3.5-turbo-1106 图像生成DALL·E3多模态接口冰橙GPTchatGPT开放接口使用说明 【接入了腾讯云内容安全检测】冰橙GPT稳定提供API接口服务定时有人进行问题排查处理1小时内问题响应接入了腾讯云的内......
  • 华为L410上制作离线安装软件模板01
    原文链接:华为L410上制作离线安装软件模板01hello,大家好啊,今天给大家带来一篇在内网搭建Apache服务器,用于安装完内网操作系统后,在第一次开机时候,为系统安装软件,今天给大家用WeChat举例,大家可以根据实际情况调整自己的软件,并且可以结合我们之前的内网仓库搭建教程来同步使用,今天先给......
  • 2023 10月随笔、总结
    202310月随笔、总结10月份的事情不多,主要在整问卷答题平台PerfeyePerfeye把之前的自定义画廊给优化了一波,一些bug也给修复了,对比页面算是重构完成了,那就要跟着迭代上线了,上线后,是出现了一些bug,但是都解决了。总体上来说还是很顺利的。问卷答题部门这边要整一个竞赛的活动,......
  • Windows10+VSCode+CMake+shell脚本编译C/C++程序
    一、概述想要在Windows10上做C++验证/编译类库,借助VSCode(其实这东西要不要都行,它就是来方便查看代码的)+CMake+shell脚本做程序的编译运行。下面写一个小例子记录一下准备工作:1.编译环境用的是mingw64,使用其再带的g++编译,ps:记得要配置其环境变量2......
  • 20231107学习总结-大型数据库-实验1.熟悉常用的Linux操作和Hadoop操作
    实验1熟悉常用的Linux操作和Hadoop操作1.实验目的Hadoop运行在Linux系统上,因此,需要学习实践一些常用的Linux命令。本实验旨在熟悉常用的Linux操作和Hadoop操作,为顺利开展后续其他实验奠定基础。2.实验平台(1)操作系统:Linux(建议Ubuntu16.04或Ubuntu18.04);(2)Hadoop版本:3.1.3。3.......
  • 外汇110网:为何Forex嘉盛要选择开曼群岛?
    2018年,广大投资者开始接触外汇离岸监管,离岸岛这一新型名词进入到普通投资者视野中。对于投资者来说,为什么会选择开曼群岛监管?开曼群岛又有何优势?为什么选择开曼?在离岸监管中,开曼群岛监管(CIMA)以其全球公认的信誉和悠久的历史,成为最值得关注的监管之一。开曼群岛政局稳定,没有外汇......
  • 10.16
    编写一个方法,使用以上算法生成指定数目(比如1000个)的随机整数。源代码:importjava.util.Scanner;importjava.util.Random;publicclassMain{publicstaticvoidmain(String[]args){Scannersin=newScanner(System.in);System.out.println("请输入想......
  • 10.17
    请看以下代码,你发现了有什么特殊之处吗? 下面两个函数名字都叫square,但是他们的参数类型不同,所以程序不会报错,这是函数的重载,static关键字修饰的函数一个程序里只能有一个,但是这是函数的重载,所以两个虽然都用static修饰但是都能叫相同的名字......