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

相关文章

springboot循环依赖问题案例代码及解决办法

《springboot循环依赖问题案例代码及解决办法》在SpringBoot中,如果两个或多个Bean之间存在循环依赖(即BeanA依赖BeanB,而BeanB又依赖BeanA),会导致Spring的... 目录1. 什么是循环依赖?2. 循环依赖的场景案例3. 解决循环依赖的常见方法方法 1:使用 @La

Java实现文件图片的预览和下载功能

《Java实现文件图片的预览和下载功能》这篇文章主要为大家详细介绍了如何使用Java实现文件图片的预览和下载功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... Java实现文件(图片)的预览和下载 @ApiOperation("访问文件") @GetMapping("

SpringKafka消息发布之KafkaTemplate与事务支持功能

《SpringKafka消息发布之KafkaTemplate与事务支持功能》通过本文介绍的基本用法、序列化选项、事务支持、错误处理和性能优化技术,开发者可以构建高效可靠的Kafka消息发布系统,事务支... 目录引言一、KafkaTemplate基础二、消息序列化三、事务支持机制四、错误处理与重试五、性能优

SpringIntegration消息路由之Router的条件路由与过滤功能

《SpringIntegration消息路由之Router的条件路由与过滤功能》本文详细介绍了Router的基础概念、条件路由实现、基于消息头的路由、动态路由与路由表、消息过滤与选择性路由以及错误处理... 目录引言一、Router基础概念二、条件路由实现三、基于消息头的路由四、动态路由与路由表五、消息过滤

Spring Boot 3.4.3 基于 Spring WebFlux 实现 SSE 功能(代码示例)

《SpringBoot3.4.3基于SpringWebFlux实现SSE功能(代码示例)》SpringBoot3.4.3结合SpringWebFlux实现SSE功能,为实时数据推送提供... 目录1. SSE 简介1.1 什么是 SSE?1.2 SSE 的优点1.3 适用场景2. Spring WebFlu

基于SpringBoot实现文件秒传功能

《基于SpringBoot实现文件秒传功能》在开发Web应用时,文件上传是一个常见需求,然而,当用户需要上传大文件或相同文件多次时,会造成带宽浪费和服务器存储冗余,此时可以使用文件秒传技术通过识别重复... 目录前言文件秒传原理代码实现1. 创建项目基础结构2. 创建上传存储代码3. 创建Result类4.

Java利用JSONPath操作JSON数据的技术指南

《Java利用JSONPath操作JSON数据的技术指南》JSONPath是一种强大的工具,用于查询和操作JSON数据,类似于SQL的语法,它为处理复杂的JSON数据结构提供了简单且高效... 目录1、简述2、什么是 jsONPath?3、Java 示例3.1 基本查询3.2 过滤查询3.3 递归搜索3.4

Python+PyQt5实现多屏幕协同播放功能

《Python+PyQt5实现多屏幕协同播放功能》在现代会议展示、数字广告、展览展示等场景中,多屏幕协同播放已成为刚需,下面我们就来看看如何利用Python和PyQt5开发一套功能强大的跨屏播控系统吧... 目录一、项目概述:突破传统播放限制二、核心技术解析2.1 多屏管理机制2.2 播放引擎设计2.3 专

一文详解SpringBoot响应压缩功能的配置与优化

《一文详解SpringBoot响应压缩功能的配置与优化》SpringBoot的响应压缩功能基于智能协商机制,需同时满足很多条件,本文主要为大家详细介绍了SpringBoot响应压缩功能的配置与优化,需... 目录一、核心工作机制1.1 自动协商触发条件1.2 压缩处理流程二、配置方案详解2.1 基础YAML

Spring事务中@Transactional注解不生效的原因分析与解决

《Spring事务中@Transactional注解不生效的原因分析与解决》在Spring框架中,@Transactional注解是管理数据库事务的核心方式,本文将深入分析事务自调用的底层原理,解释为... 目录1. 引言2. 事务自调用问题重现2.1 示例代码2.2 问题现象3. 为什么事务自调用会失效3