uniapp 开发微信小程序使用echart的dataZoom属性缩放功能不生效!bug记录!

news2025/1/12 11:58:38

在本项目中使用的是这个echart库

在项目中添加了dataZoom配置项但是不生效,突然想到微信小程序代码大小的限制,之前的echarts.js是定制的,有可能没有加dataZoom组件。故重新定制echarts.js。之前用的echarts版本是5.0.0,这次也是定制同样的版本,但是报错,按照之前的经验判断,可能是版本问题,故往上提高了一个版本。然后就生效啦!!!最后生效的版本5.1.0。

如果报错:

报t.addEventListener is not a function,把t.addEventListener(e,n,i) 删掉;

报t.preventDefault is not a function,我这边暂时把t.preventDefault里面的函数执行语句删除了,之后便可以进行拖动,但缩放没有试过。

 

下面是option代码

let option = {
					grid: { //调整图与容器周围的间距
						top: '14%',
						left: '12%', //默认10%
						right: '16%', //默认10%
						// bottom: '8%', //默认60
						containLabel: true
						//grid区域是否包含坐标轴的刻度标签
					},
					xAxis: {
						name: "日期", //x轴的单位
						type: 'category',
						// interval: 2, // 设置间距为2,表示每隔一个刻度显示一个刻度
						// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
						data: this.xData,
						axisTick: {
							alignWithLabel: true,
							interval: 0,
						},
						axisLabel: {
							interval: 0,
							rotate: that.totalData.title === '微策' ? 0 : 20,
							textStyle: {
								color: '#667286',
							},
							// formatter: '{M}-{d}\n{HH}-{mm}'
							// 使用函数模板,函数参数分别为刻度数值(类目),刻度的索引
							formatter: function(value, index) {
								let label = value;
								if (that.totalData.title === '硅基') {
									label = `${label.slice(11, 19)}`
								} else if (that.totalData.title === '微策') {
									label = `${label.slice(5, 10)}\n${label.slice(11, 16)}`
								} else {
									label = `${label.slice(5, 10)}`
								}
								return label;
							}
						},

					},
					yAxis: {
						type: 'value',
						name: a[this.totalData.title], //y轴的单位
						axisLabel: {
							textStyle: {
								color: '#667286',
							},
							// 	formatter: '{value} KG',//y轴每一个刻度加单位
						},
					},
					dataZoom: [{
						type: 'inside',
						// show:this.dataZoomEnd===100?false:true,//当标签100%显示时候不显示滑块 type=slider时使用
						start: 0,
						end: this.dataZoomEnd,
					}],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'line',
							lineStyle: {
								// type: 'solid',//鼠标移入的基准线实线
								color: '#53cdef',
							},
						},
						// formatter: "日期 :{b0}\<br\/\>{a0} : {c0}KG \<br\/\>",
					},
					series: [{
						// showSymbol: false,//隐藏折线拐点,只有鼠标移入时候显示
						name: b[this.totalData.title],
						data: this.yData,
						// data: [820, 932, 901, 934, 1290, 1330, 1320],
						type: 'line',
						smooth: true,
						itemStyle: { //折线拐点标志的样式
							normal: {
								color: '#00875A',
							}
						},
						// label:{
						//   show: true,
						//   position: 'bottom',
						//   textStyle: {
						//     fontSize: 20
						//   }
						// },
						lineStyle: {
							normal: {
								color: '#00875A',
								width: 2,
							}
						},
						areaStyle: {
							opacity: 0.8,
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: '#00875A'
								},
								{
									offset: 1,
									color: '#FFFFFF'
								}
							])
						},
					}]
				};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/922903.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

容灾设备系统组成,容灾备份系统组成包括哪些

随着信息技术的快速发展&#xff0c;企业对数据的需求越来越大&#xff0c;数据已经成为企业的核心财产。但是&#xff0c;数据安全性和完整性面临巨大挑战。在这种环境下&#xff0c;容灾备份系统应运而生&#xff0c;成为保证企业数据安全的关键因素。下面我们就详细介绍容灾…

IDEA启动Tomcat两个端口的方式 使用nginx进行反向代理 JMeter测试分布式情况下synchronized锁失效

目录 引出IDEA启动Tomcat两个端口的方式1.编辑配置2.添加新的端口-Dserver.port80833.service里面管理4.启动后进行测试 使用nginx进行反向代理反向代理多个端口运行日志查看启动关闭重启 分布式情况下synchronized失效synchronized锁代码启动tomcat两个端口nginx反向代理JMete…

慕课网 Go工程师 第三周 package和gomodules章节

Go包的引入&#xff1a; 包名前面加匿名&#xff0c;只引入但不使用&#xff0c;如果对应包有init函数&#xff0c;会执行init函数&#xff08;初始化操作&#xff09; 包名前面加. 把这个包的结构体和方法导入当前包&#xff0c;慎用&#xff0c;你不知道当前包和被引入的包用…

顺序表详解|顺序表常见错误并调试分析

前言&#xff1a; 今天我们开始学习基础的数据结构——顺序表&#xff0c;数据结构就是将数据在内存存储起来&#xff0c;在内存管理数据。 一、线性表 1、线性表&#xff08;Linear list&#xff09;是n个具有相同特性的数据元素的有限序列&#xff0c;线性表是一种在实际中广…

美国访问学者签证好办吗?

近年来&#xff0c;随着国际交流与合作的不断深入&#xff0c;许多人对于美国访问学者签证的办理情况产生了浓厚的兴趣。那么&#xff0c;美国访问学者签证到底好办吗&#xff1f;让知识人网小编带您一起了解一下。 首先&#xff0c;美国作为世界上的科研、教育和创新中心之一&…

springBoot的启动

自动配置注解的逻辑: 在启动类的基础上,导入了springboot的大量自动配置类,以至于自己不用关心配置实现过程(约定大于配置) 大量自动配置类是如何导入的? Spring提供了一个SpringFactories功能(SPI: service provider interface ),读取固定文件META-INF/spring.factories,按照…

keepalived双机热备,keepalived+lvs(DR)

本节主要学习了keepalivedlvs的作用和配置方法主要配置调度器和web节点&#xff0c;还有keepalived的双击热备&#xff0c;主要内容有概述&#xff0c;安装&#xff0c;功能模块&#xff0c;配置双击热备&#xff0c;验证方法&#xff0c;双击热备的脑裂现象和VIP无法通信。 目…

❤ windows 安装后台java开发环境JDK 、MySQL 、Redis

❤ windows 安装后台java开发环境 1、windows 安装 JDK. 下载地址&#xff1a; http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 1、下载安装 官网点击下载安装 网盘 jdk安装包 链接&#xff1a;https://pan.baidu.com/s/1sdxA6B…

Axure设计之日期选择器(年月选择)

在系统中&#xff0c;日期选择器经常会用到&#xff0c;包括日历日期的选择、日期时间的选择和日期范围的选择&#xff0c;一般是下拉列表的形式进行选择。Axure没有自带的日期选择器&#xff0c;下面教大家如何在Axure中制作真实日期选择&#xff08;年月选择&#xff09;效果…

首席执行官Adam Selipsky解读“亚马逊云科技的技术产品差异化”

迄今为止&#xff0c;亚马逊云科技已经参与了21世纪几乎所有的大型计算变革&#xff0c;亚马逊云科技是一个很传奇的故事&#xff0c;它始于大约20年前的一项实验&#xff0c;当时亚马逊试图出售其过剩的服务器。人们确实对此表示怀疑。为什么在线书店试图销售云服务&#xff1…

js逆向实战之某书protobuf反序列化

什么是Protobuf&#xff1f; \qquad Protobuf&#xff08;Protocol Buffer&#xff09;是 Google 开发的一套数据存储传输协议&#xff0c;作用就是将数据进行序列化后再传输&#xff0c;Protobuf 编码是二进制的&#xff0c;它不是可读的&#xff0c;也不容易手动修改&#xf…

抓包工具Charles的安装及代理设置(Windows浏览器代理、安卓代理)

1、下载Charles 官网地址&#xff1a;https://www.charlesproxy.com/download/&#xff0c;下载对应的安装包。安装完成后按照以下步骤进行代理配置。 2、配置Charles证书 按照以下截图步骤进行配置即可。 3、Charles代理设置 这里的端口号根据自己情况设置&#xff0c;这里…

17.4 【Linux】systemctl 针对 timer 的配置文件

有时候&#xff0c;某些服务你想要定期执行&#xff0c;或者是开机后执行&#xff0c;或者是什么服务启动多久后执行等等的。在过去&#xff0c;我们大概都是使用 crond 这个服务来定期处理&#xff0c; 不过&#xff0c;既然现在有一直常驻在内存当中的 systemd 这个好用的东西…

visio三维格式、三维旋转导出图模糊解决方案

问题描述 visio中元素经过三维格式或三维旋转&#xff08;也可能包括其他的特殊操作&#xff09;后&#xff0c;导出.emf格式的图会模糊&#xff0c;如下图所示。 解决方案 借助其他软件 在ppt中将对应的元素旋转后再导入visio&#xff0c;此时对于visio来说该元素相当于一…

RunnerGo:一款高效且易用的性能测试工具

在软件开发过程中&#xff0c;性能测试是确保应用程序能够高效运行的关键步骤。为了提供高质量的测试服务&#xff0c;许多企业正在寻求功能强大且易用的性能测试工具。RunnerGo是一个基于Go语言开发的性能测试平台&#xff0c;具有简单易用、高效稳定等特性&#xff0c;适用于…

Dubbo重启服务提供者或先启动服务消费者后启动服务提供者,消费者有时候会出现找不到服务的问题及解决

文章目录 [toc] 1.环境2.版本3.pom依赖3.1父工程的pom3.2子模块的pom 4.问题5.根本原因5.1根本原因说明5.2总入口5.3servletWeb容器初始化5.4 nacos服务注册监听点5.5 dubbo启动服务注册监听点 6.解决办法6.1降低springBoot版本为2.2.x6.2 修改源码6.2.1修改源码方式一6.2.2修改…

【RPC框架】RPC与Dubbo(让你一文搞懂,超级详细好理解!)

目录 什么是RPC框架&#xff0c;Dubbo又是什么&#xff0c;二者之间有什么联系 是不是说的有些抽象&#xff0c;那我们来说的通俗易懂点吧&#xff0c;这次你一定能听懂 简单举例 实际例子 真实场景demo&#xff08;说了这么多&#xff0c;实际体会一下代码吧&…

(6)(6.3) 自动任务中的相机控制

文章目录 前言 6.3.1 概述 6.3.2 自动任务类型 6.3.3 创建合成图像 前言 本文介绍 ArduPilot 的相机和云台命令&#xff0c;并说明如何在 Mission Planner 中使用这些命令来定义相机勘测任务。这些说明假定已经连接并配置了相机触发器和云台(camera trigger and gimbal ha…

iis服务web页面 localhost可以访问 ip不能访问

1、修改C:\Windows\System32\drivers\etc\下面hosts文件&#xff1b;需要重启电脑查看效果&#xff1b; 2、通过internet选项-》安全-》站点-》添加对应http://127.0.0.1和对应电能IP&#xff1b;

Android SDK 上手指南||第六章 用户交互

第六章 用户交互 在这篇教程中&#xff0c;我们将对之前所添加的Button元素进行设置以实现对用户点击的检测与响应。为了达成这一目标&#xff0c;我们需要在应用程序的主 Activity类中略微涉及Java编程内容。如果大家在Java开发方面的经验不太丰富也没必要担心&#xff0c;只…