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

相关文章

MySQL 8 中的一个强大功能 JSON_TABLE示例详解

《MySQL8中的一个强大功能JSON_TABLE示例详解》JSON_TABLE是MySQL8中引入的一个强大功能,它允许用户将JSON数据转换为关系表格式,从而可以更方便地在SQL查询中处理J... 目录基本语法示例示例查询解释应用场景不适用场景1. ‌jsON 数据结构过于复杂或动态变化‌2. ‌性能要

Spring的RedisTemplate的json反序列泛型丢失问题解决

《Spring的RedisTemplate的json反序列泛型丢失问题解决》本文主要介绍了SpringRedisTemplate中使用JSON序列化时泛型信息丢失的问题及其提出三种解决方案,可以根据性... 目录背景解决方案方案一方案二方案三总结背景在使用RedisTemplate操作redis时我们针对

SpringBoot整合Dubbo+ZK注册失败的坑及解决

《SpringBoot整合Dubbo+ZK注册失败的坑及解决》使用Dubbo框架时,需在公共pom添加依赖,启动类加@EnableDubbo,实现类用@DubboService替代@Service,配... 目录1.先看下公共的pom(maven创建的pom工程)2.启动类上加@EnableDubbo3.实

Kotlin Map映射转换问题小结

《KotlinMap映射转换问题小结》文章介绍了Kotlin集合转换的多种方法,包括map(一对一转换)、mapIndexed(带索引)、mapNotNull(过滤null)、mapKeys/map... 目录Kotlin 集合转换:map、mapIndexed、mapNotNull、mapKeys、map

nginx中端口无权限的问题解决

《nginx中端口无权限的问题解决》当Nginx日志报错bind()to80failed(13:Permissiondenied)时,这通常是由于权限不足导致Nginx无法绑定到80端口,下面就来... 目录一、问题原因分析二、解决方案1. 以 root 权限运行 Nginx(不推荐)2. 为 Nginx

解决1093 - You can‘t specify target table报错问题及原因分析

《解决1093-Youcan‘tspecifytargettable报错问题及原因分析》MySQL1093错误因UPDATE/DELETE语句的FROM子句直接引用目标表或嵌套子查询导致,... 目录报js错原因分析具体原因解决办法方法一:使用临时表方法二:使用JOIN方法三:使用EXISTS示例总结报错原

Windows环境下解决Matplotlib中文字体显示问题的详细教程

《Windows环境下解决Matplotlib中文字体显示问题的详细教程》本文详细介绍了在Windows下解决Matplotlib中文显示问题的方法,包括安装字体、更新缓存、配置文件设置及编码調整,并... 目录引言问题分析解决方案详解1. 检查系统已安装字体2. 手动添加中文字体(以SimHei为例)步骤

MyBatis-Plus通用中等、大量数据分批查询和处理方法

《MyBatis-Plus通用中等、大量数据分批查询和处理方法》文章介绍MyBatis-Plus分页查询处理,通过函数式接口与Lambda表达式实现通用逻辑,方法抽象但功能强大,建议扩展分批处理及流式... 目录函数式接口获取分页数据接口数据处理接口通用逻辑工具类使用方法简单查询自定义查询方法总结函数式接口

SpringSecurity整合redission序列化问题小结(最新整理)

《SpringSecurity整合redission序列化问题小结(最新整理)》文章详解SpringSecurity整合Redisson时的序列化问题,指出需排除官方Jackson依赖,通过自定义反序... 目录1. 前言2. Redission配置2.1 RedissonProperties2.2 Red

nginx 负载均衡配置及如何解决重复登录问题

《nginx负载均衡配置及如何解决重复登录问题》文章详解Nginx源码安装与Docker部署,介绍四层/七层代理区别及负载均衡策略,通过ip_hash解决重复登录问题,对nginx负载均衡配置及如何... 目录一:源码安装:1.配置编译参数2.编译3.编译安装 二,四层代理和七层代理区别1.二者混合使用举例