Echarts 添加横轴伸缩功能,并解决数据量过大情况下伸缩看起来错位问题,以及横坐标设置不同颜色,滑动时候文字颜色样式错位问题

本文主要是介绍Echarts 添加横轴伸缩功能,并解决数据量过大情况下伸缩看起来错位问题,以及横坐标设置不同颜色,滑动时候文字颜色样式错位问题,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

原有基础横轴伸缩功能

关键代码

 dataZoom: [{type: 'inside',start: 0,end: 10},{start: 0,end: 10}],

完整代码,可以放到官方DEMO测试

 myData = {nameData: [ // 橫坐標顯示的值'TEST-數據名字01','TEST-數據名字02','TEST-數據名字03','TEST-數據名字04','TEST-數據名字05','TEST-數據名字06', 'TEST-數據名字01','TEST-數據名字02','TEST-數據名字03','TEST-數據名字04','TEST-數據名字05','TEST-數據名字06', 'TEST-數據名字01','TEST-數據名字02','TEST-數據名字03','TEST-數據名字04','TEST-數據名字05','TEST-數據名字06','TEST-數據名字07'],pData: [120, 200, 150, 80, 70, 110,120, 200, 150, 80, 70, 110,120, 200, 150, 80, 70, 110, 130],rData: [120, 0, 150, 80, 0, 110, 120, 0, 150, 80, 0, 110, 120, 0, 150, 80, 0, 110, 130]}option = {toolbox: {feature: {saveAsImage: {}}},legend: {data: ['PP', 'RR'],right: 20,itemHeight: 10,itemWidth: 10,itemGap: 30,},// 配置了横坐标旋转,同一个X轴所属柱子间距,非同一个X轴柱子间距,上下左右距离,以及横坐标部分涂色tooltip: {trigger: 'axis',axisPointer: {type: 'cross',crossStyle: {color: '#999'}}},dataZoom: [{type: 'inside',start: 0,end: 30},{start: 0,end: 30}],grid: { top: '10%', left: '3%', right: '4%', bottom: '5%', containLabel: true },xAxis: {type: 'category',axisLabel: {interval: 0,rotate: 90,color: (value, index) => {// 柱狀圖用紅色框線return this.myData.rData[index] === 0 ? 'red' : 'black'}},data: this.myData.nameData},yAxis: {type: 'value'},series: [{name: 'Press',barWidth: 20, //设置柱子的宽度barGap: '0%' /*控制的是单个X坐标的多个柱子的间距*/,//   barCategoryGap:'0%',/*控制非自己孩子之间的间距*/data: this.myData.pData,itemStyle: {normal: {color: '#599fff'}},type: 'bar'},{name: 'Robot',barWidth: 20, //设置柱子的宽度data: this.myData.rData,itemStyle: {normal: {color: '#ffb752'}},type: 'bar'}]}

官方在线调试 https://echarts.apache.org/examples/zh/editor.html?c=line-simple

今天是第二天,经过我们的测试,横坐标加颜色以及缩小放大的时候,这个功能会出现错位的情况,文字样式颜色不会随着数据位置变化,于是代码做了以下调整

方法:根据数据长度计算设定展开比例,然后锁定datazoom,同时单个设横坐标数据的textStyle就不会影响横坐标的名字颜色显示异常,同时我们可以考虑通过获取datazoom事件来获取坐标移动后的数据开始index和结束index来进行一些其他的需求处理

  • 关键代码 设置比例,以及颜色要单独设置
  • 备注:锁定datazoom可以根据需求去掉哦~~~
myData = {nameData: [{ value: '横坐标01红色', textStyle: { color: 'red' } },{ value: '横坐标02黄色', textStyle: { color: 'yellow' } },{ value: '横坐标03', textStyle: { color: 'pink' } },{ value: '横坐标04蓝色', textStyle: { color: 'blue' } },{ value: '横坐标05', textStyle: { color: 'orange' } },{ value: '横坐标06', textStyle: { color: 'purple' } },{ value: '横坐标07红色', textStyle: { color: 'red' } },{ value: '横坐标08', textStyle: { color: 'yellow' } },{ value: '横坐标09', textStyle: { color: 'pink' } },{ value: '横坐标10蓝色', textStyle: { color: 'blue' } },{ value: '横坐标11', textStyle: { color: 'orange' } },{ value: '横坐标12红色', textStyle: { color: 'red' } },{ value: '横坐标13', textStyle: { color: 'yellow' } },{ value: '横坐标14', textStyle: { color: 'pink' } },{ value: '横坐标15蓝色', textStyle: { color: 'blue' } },{ value: '横坐标16', textStyle: { color: 'orange' } },{ value: '横坐标17红色', textStyle: { color: 'red' } },{ value: '横坐标18', textStyle: { color: 'yellow' } },{ value: '横坐标19', textStyle: { color: 'pink' } },{ value: '横坐标20蓝色', textStyle: { color: 'blue' } },{ value: '横坐标21', textStyle: { color: 'orange' } },],pData: [120,200,150,80,70,110,120,200,150,80,70,110,120,200,150,80,70,110,130,110,130,],rData: [120,0,150,80,0,110,120,0,150,80,0,110,120,0,150,80,0,110,130,0,0,],
}
// 默认展示10条数据,多于20条就控制一下比例
dataZoom_end =myData.nameData.length > 10 ? (10 / myData.nameData.length) * 100 : 100
//默认显示10条数据(当数据多余20条时)soption = {toolbox: {feature: {saveAsImage: {},},},legend: {data: ['PP', 'RR'],right: 20,itemHeight: 10,itemWidth: 10,itemGap: 30,},// 配置了横坐标旋转,同一个X轴所属柱子间距,非同一个X轴柱子间距,上下左右距离,以及横坐标部分涂色tooltip: {trigger: 'axis',axisPointer: {type: 'cross',crossStyle: {color: '#999',},},},dataZoom: [{type: 'slider',show: true,xAxisIndex: [0],start: 0,zoomLock: true,end: dataZoom_end,},{type: 'inside',show: true,xAxisIndex: [0],start: 0,zoomLock: true,end: dataZoom_end,},],grid: {top: '10%',left: '3%',right: '4%',bottom: '5%',containLabel: true,},xAxis: {type: 'category',axisLabel: {interval: 0,rotate: 90,color: (value, index) => {// 柱狀圖用紅色框線return myData.rData[index] === 0 ? 'red' : 'black'},},data: myData.nameData,},yAxis: {type: 'value',},series: [{name: 'Press',barWidth: 20, //设置柱子的宽度barGap: '0%' /*控制的是单个X坐标的多个柱子的间距*/,//   barCategoryGap:'0%',/*控制非自己孩子之间的间距*/data: this.myData.pData,itemStyle: {normal: {color: '#599fff',},},type: 'bar',},{name: 'Robot',barWidth: 20, //设置柱子的宽度data: this.myData.rData,itemStyle: {normal: {color: '#ffb752',},},type: 'bar',},],
}
myChart.on('datazoom', (params) => {//监听echarts的拖动事件// that.dataZoomloading=trueconsole.log(myChart)let xAxis = myChart._model.option.dataZoom[0]let startrang = xAxis.startValuelet endrang = xAxis.endValueconsole.log('start', startrang)console.log('endrang', endrang)
})

在这里插入图片描述

这篇关于Echarts 添加横轴伸缩功能,并解决数据量过大情况下伸缩看起来错位问题,以及横坐标设置不同颜色,滑动时候文字颜色样式错位问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/805147

相关文章

SQL中如何添加数据(常见方法及示例)

《SQL中如何添加数据(常见方法及示例)》SQL全称为StructuredQueryLanguage,是一种用于管理关系数据库的标准编程语言,下面给大家介绍SQL中如何添加数据,感兴趣的朋友一起看看吧... 目录在mysql中,有多种方法可以添加数据。以下是一些常见的方法及其示例。1. 使用INSERT I

Qt使用QSqlDatabase连接MySQL实现增删改查功能

《Qt使用QSqlDatabase连接MySQL实现增删改查功能》这篇文章主要为大家详细介绍了Qt如何使用QSqlDatabase连接MySQL实现增删改查功能,文中的示例代码讲解详细,感兴趣的小伙伴... 目录一、创建数据表二、连接mysql数据库三、封装成一个完整的轻量级 ORM 风格类3.1 表结构

Python使用vllm处理多模态数据的预处理技巧

《Python使用vllm处理多模态数据的预处理技巧》本文深入探讨了在Python环境下使用vLLM处理多模态数据的预处理技巧,我们将从基础概念出发,详细讲解文本、图像、音频等多模态数据的预处理方法,... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

在Linux中改变echo输出颜色的实现方法

《在Linux中改变echo输出颜色的实现方法》在Linux系统的命令行环境下,为了使输出信息更加清晰、突出,便于用户快速识别和区分不同类型的信息,常常需要改变echo命令的输出颜色,所以本文给大家介... 目python录在linux中改变echo输出颜色的方法技术背景实现步骤使用ANSI转义码使用tpu

linux hostname设置全过程

《linuxhostname设置全过程》:本文主要介绍linuxhostname设置全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录查询hostname设置步骤其它相关点hostid/etc/hostsEDChina编程A工具license破解注意事项总结以RHE

SQL Server配置管理器无法打开的四种解决方法

《SQLServer配置管理器无法打开的四种解决方法》本文总结了SQLServer配置管理器无法打开的四种解决方法,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录方法一:桌面图标进入方法二:运行窗口进入检查版本号对照表php方法三:查找文件路径方法四:检查 S

MySQL 删除数据详解(最新整理)

《MySQL删除数据详解(最新整理)》:本文主要介绍MySQL删除数据的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、前言二、mysql 中的三种删除方式1.DELETE语句✅ 基本语法: 示例:2.TRUNCATE语句✅ 基本语

Python设置Cookie永不超时的详细指南

《Python设置Cookie永不超时的详细指南》Cookie是一种存储在用户浏览器中的小型数据片段,用于记录用户的登录状态、偏好设置等信息,下面小编就来和大家详细讲讲Python如何设置Cookie... 目录一、Cookie的作用与重要性二、Cookie过期的原因三、实现Cookie永不超时的方法(一)

怎样通过分析GC日志来定位Java进程的内存问题

《怎样通过分析GC日志来定位Java进程的内存问题》:本文主要介绍怎样通过分析GC日志来定位Java进程的内存问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、GC 日志基础配置1. 启用详细 GC 日志2. 不同收集器的日志格式二、关键指标与分析维度1.

Java 线程安全与 volatile与单例模式问题及解决方案

《Java线程安全与volatile与单例模式问题及解决方案》文章主要讲解线程安全问题的五个成因(调度随机、变量修改、非原子操作、内存可见性、指令重排序)及解决方案,强调使用volatile关键字... 目录什么是线程安全线程安全问题的产生与解决方案线程的调度是随机的多个线程对同一个变量进行修改线程的修改操