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

在本项目中使用的是这个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.mfbz.cn/a/94177.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【优化算法】Python实现面向对象的遗传算法

遗传算法 遗传算法(Genetic Algorithm)属于智能优化算法的一种&#xff0c;本质上是模拟自然界中种群的演化来寻求问题的最优解。与之相似的还有模拟退火、粒子群、蚁群等算法。 在具体介绍遗传算法之前&#xff0c;我们先来了解一些知识&#x1f9c0; DNA&#xff1a; 携带有…

R语言常用数学函数

目录 1. - * / ^ 2.%/%和%% 3.ceiling,floor,round 4.signif,trunc,zapsamll 5.max,min,mean,pmax,pmin 6.range和sum 7.prod 8.cumsum,cumprod,cummax,cummin 9.sort 10. approx 11.approx fun 12.diff 13.sign 14.var和sd 15.median 16.IQR 17.ave 18.five…

layui框架学习(42:文件上传模块-上)

之前学习asp.net core编程入门教程时结合layui测试过文件上传《基于ASP.Net Core和Layui的多文件上传》&#xff0c;但没有认真学习过layui的文件上传模块&#xff0c;本文开始&#xff0c;计划分两章学习并记录文件上传模块中的属性、事件及函数的使用方法。   layui中的文件…

第八章 贪心算法 part03 1005.K次取反后最大化的数组和 134. 加油站 135. 分发糖果 (day34补)

本文章代码以c为例&#xff01; 一、力扣第1005题&#xff1a;K 次取反后最大化的数组和 题目: 给你一个整数数组 nums 和一个整数 k &#xff0c;按以下方法修改该数组&#xff1a; 选择某个下标 i 并将 nums[i] 替换为 -nums[i] 。 重复这个过程恰好 k 次。可以多次选择…

kafka--技术文档--架构体系

架构体系 Kafka的架构体系包括以下几个部分&#xff1a; Producer. 消息生产者&#xff0c;就是向Kafka broker发送消息的客户端。Broker. 一台Kafka服务器就是一个Broker。一个集群由多个Broker组成。一个Broker可以容纳多个Topic。Topic. 可以理解为一个队列&#xff0c;一…

Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【五】

&#x1f600;前言 本篇博文是关于Spring Boot(Vue3ElementPlusAxiosMyBatisPlusSpring Boot 前后端分离)【五】&#xff0c;希望你能够喜欢 &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章…

PDF制作成翻页电子书

在日常工作中&#xff0c;大部分人使用的都是PDF文档发送给客户&#xff0c;但是PDF文档通常是静态的&#xff0c;缺乏交互性和视觉吸引力。那你有没有想过把它转换成翻页的电子书呢&#xff1f; 小编将告诉你操作步骤&#xff0c;非常简单 1.搜索FLBOOK在线制作电子杂志平台 …

oracle 基础运用2

首先在电脑上安装PLSQL developer&#xff0c;这个是oracle图形化连接工具&#xff0c;然后安装win64_11gR2_client&#xff0c;这个是orace客户端&#xff0c;安装完成后可以在cmd命令行输入sqlplus命令进行验证&#xff0c;如图表示安装成功。 作为sys的连接应该是SySDBA或Sy…

基于HarmonyOS ArkUI实现七夕壁纸轮播

七夕情人节&#xff0c;为了Ta&#xff0c;你打算用什么方式表达爱&#xff1f;是包包、鲜花、美酒、巧克力&#xff0c;还是一封充满爱意的短信&#xff1f;作为程序员&#xff0c;以代码之名&#xff0c;表达爱。本节将演示如何在基于HarmonyOS ArkUI的SwiperController、Ima…

服务器数据恢复-ESXi虚拟化误删除的数据恢复案例

服务器数据恢复环境&#xff1a; 一台服务器安装的ESXi虚拟化系统&#xff0c;该虚拟化系统连接了多个LUN&#xff0c;其中一个LUN上运行了数台虚拟机&#xff0c;虚拟机安装Windows Server操作系统。 服务器故障&分析&#xff1a; 管理员因误操作删除了一台虚拟机&#x…

Nacos基础(2)——nacos的服务器和命名空间 springBoot整合nacos 多个nacos配置的情况

目录 引出nacos服务器和命名空间Nacos服务器命名空间 springBoot整合nacosspringcloud Alibaba 版本与springcloud对应关系引包配置maincontroller 报错以及解决【报错】错误&#xff1a;缺少服务名称报错&#xff1a;9848端口未开放 启动测试引入多个nacos配置多个配置的情况没…

Apache StreamPark系列教程第二篇——项目打包和开发

一、项目打包 项目依赖maven、jdk8.0、前端(node、npm) //下载代码 git clone//maven打包相关内容 mvn -N io.takari:maven:wrapper //前端打包相关内容 curl -sL https://rpm.nodesource.com/setup_16.x | bash - yum -y install nodejs npm -v npm install -g pnpm默认是h2…

微服务分布式搜索引擎 ElasticSearch 查询文档

文章目录 ⛄引言一、DSL查询文档⛅DSL 查询分类 二、DSL查询实例⛅全文检索查询⏰精确查询⚡地理坐标查询⌚复合查询 ⛵小结 ⛄引言 本文参考黑马 分布式Elastic search Elasticsearch是一款非常强大的开源搜索引擎&#xff0c;具备非常多强大功能&#xff0c;可以帮助我们从海…

Stable Diffusion 文生图技术原理

图像生成模型简介 图片生成领域来说&#xff0c;有四大主流生成模型&#xff1a;生成对抗模型&#xff08;GAN&#xff09;、变分自动编码器&#xff08;VAE&#xff09;、流模型&#xff08;Flow based Model&#xff09;、扩散模型&#xff08;Diffusion Model&#xff09;。…

深度学习3. 强化学习-Reinforcement learning | RL

强化学习是机器学习的一种学习方式&#xff0c;它跟监督学习、无监督学习是对应的。本文将详细介绍强化学习的基本概念、应用场景和主流的强化学习算法及分类。 目录 什么是强化学习&#xff1f; 强化学习的应用场景 强化学习的主流算法 强化学习(reinforcement learning) …

Flutter 逆向安全

前言&#xff1a; 前几天在 "学习" 一个项目&#xff0c; 发现是用 Flutter 开发的。之前研究过 flutter 的逆向&#xff0c;早期 Flutter 有工具可以通过快照进行反编译&#xff1a;《对照表如下》 新的版本开发者没有维护了。 目前没有很好的工具 可以对 Flutter 进…

网络地址转换NAT-动态NAT的使用范围和配置-思科EI,华为数通

网络地址转换NAT-动态NAT的使用范围和配置 什么是动态NAT&#xff1f; 使用公有地址池&#xff0c;并以先到先得的原则分配这些地址。当具有私有 IP 地址的主机请求访问 Internet 时&#xff0c;动态 NAT 从地址池中选择一个未被其它主机占用的 IP 地址一对一的转化。当数据会话…

Spring -学习笔记

文章目录 1. Spring介绍1.1 Spring的体系结构 2.DI/Ioc&#xff08;依赖注入/控制反转&#xff09;2.1 依赖及注解说明1. lombok2. spring-context 2.2 Bean和Spring 上下文的配置方式方式1&#xff1a;基于xml文件的配置方法2&#xff1a; 基于java注解配置bean方法3&#xff…

5G 数字乡村数字农业农村大数据中心项目农业大数据建设方案PPT

导读&#xff1a;原文《5G 数字乡村数字农业农村大数据中心项目农业大数据建设方案PPT》&#xff08;获取来源见文尾&#xff09;&#xff0c;本文精选其中精华及架构部分&#xff0c;逻辑清晰、内容完整&#xff0c;为快速形成售前方案提供参考。以下是部分内容&#xff0c; 喜…

Deep Learning With Pytorch - 数据预处理,以导入LUNA16数据集为例

文章目录 数据集简介什么是CT扫描&#xff1f;导入大型数据集并不是一份轻松的工作 在Jupyter Notebook中导入LUNA16数据集导入可能用到的第三方库&#xff1a;LUNA16存放路径&#xff1a;用 pandas 读取 candidates.csv&#xff1b;读取 annotations.csv导入subset0和subset1的…