当前位置: 首页 > news >正文

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%', //默认60containLabel: 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'}])},}]};

相关文章:

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

在本项目中使用的是这个echart库 在项目中添加了dataZoom配置项但是不生效&#xff0c;突然想到微信小程序代码大小的限制&#xff0c;之前的echarts.js是定制的&#xff0c;有可能没有加dataZoom组件。故重新定制echarts.js。之前用的echarts版本是5.0.0&#xff0c;这次也是…...

用户端Web自动化测试_L4

目录&#xff1a; selenium多浏览器处理执行 javascript 脚本headless无头浏览器使用capability配置参数解析企业微信实战cypress测试框架介绍Playwright测试框架介绍 1.selenium多浏览器处理 多浏览器测试背景 用户使用的浏览器(firefox,chrome,IE 等)web 应用应该能在任何…...

CAPL - Panel和TestModule结合实现测试项可选

目录 一、定义脚本编号和脚本组编号 1、测试组定义 2、测试脚本编号定义...

机器学习,过拟合与欠拟合,正则化与交叉验证

目录 机器学习 过拟合与欠拟合 正则化与交叉验证 正则化 交叉验证 机器学习 的目的是使学到的模型不仅对已知数据而且对未知数据都能有很好的预测能力。 不同的机器学习方法会给出不同的模型。当损失函数给定时&#xff0c;基于损失函数的模型的训练误差&#xff08;tra…...

gradio使用transformer模块demo介绍1:Text Natural Language Processing

文章目录 文本生成 Text Generation自动完成 Autocomplete情感分析 Sentiment Analysis命名实体识别 Name Entity Recognition NER多语种翻译文本生成 Text Generation import gradio as gr from transformers import pipelinegenerator = pipeline(text-generation, model=&l…...

算法通关村——数论经典问题解析

1. 辗转相除法 主要目的是获取两个数里面的最大公约数。 public int gcd(int a, int b) {int k 0;do {k a % b;a b;b k;} while (k ! 0);return a;}2. 素数和合数 素数的要求是必须大于等于2&#xff0c;并且只能被1和它本身整除。 判断的方法比较简单&#xff0c;就是从…...

代码随想录算法训练营第四十六天|LeetCode 1143,1035,53

目录 LeetCode 1143.最长公共子序列 动态规划五步曲&#xff1a; 1.确定dp[i][j]的含义 2.找出递推公式 3.初始化dp数组 4.确定遍历顺序 5.打印dp数组 LeetCode 1035.不相交的线 LeetCode 53.最大子序列和&#xff08;动态规划&#xff09; 动态规划五步曲&#xff1a; 1.确定…...

leetcode 541.反转字符串II

⭐️ 题目描述 &#x1f31f; leetcode链接&#xff1a;https://leetcode.cn/problems/reverse-string-ii/ ps&#xff1a; 这道题描述的有点晦涩难懂&#xff0c;意思就是每隔k个反转k个&#xff0c;末尾不够k个时全部反转&#xff0c;开始就不够k个也全部反转。 代码&#…...

MyBatis与Spring整合以及AOP和PageHelper分页插件整合

目录 前言 一、MyBatis与Spring整合的好处以及两者之间的关系 1.好处 2.关系 二、MyBatis和Spring集成 1.导入pom.xml 2.编写配置文件 3.利用mybatis逆向工程生成模型层代码 三、常用注解 四、AOP整合pageHelper分页插件 创建一个切面 测试 前言 MyBatis是一个开源的…...

《认知觉醒》读书笔记之潜意识

模糊--人生是一场消除模糊的比赛。 学习知识&#xff0c;消除认知模糊 掌握的工具越多&#xff0c;认知能力越强&#xff0c;消除模糊的能力就越强。 元认知-----》 如何反观自己。 刻意练习----》 如何精进自己。 运动改造大脑---》 如何激化自己的运动热情。 学习知识的…...

Stable Diffusion 系列教程 | 图生图基础

前段时间有一个风靡全网的真人转漫画风格&#xff0c;受到了大家的喜欢 而在SD里&#xff0c;就可以通过图生图来实现类似的效果 当然图生图还有更好玩的应用&#xff0c;我们一点一点来探索 首先我们来简单进行一下图生图的这一个实践---真人转动漫 1. 图生图基本界面 和…...

cuda编程day001

一、环境&#xff1a; ①、linux cuda-11.3 opecv4.8.0 不知道头文件和库文件路径&#xff0c;用命令查找&#xff1a; # find /usr/local -name cuda.h 2>/dev/null # 查询cuda头文件路径 /usr/local/cuda-11.3/targets/x86_64-linux/include/cuda.h # find /usr/…...

Java 中使用 ES 高级客户端库 RestHighLevelClient 清理百万级规模历史数据

&#x1f389;工作中遇到这样一个需求场景&#xff1a;由于ES数据库中历史数据过多&#xff0c;占用太多的磁盘空间&#xff0c;需要定期地进行清理&#xff0c;在一定程度上可以释放磁盘空间&#xff0c;减轻磁盘空间压力。 &#x1f388;在经过调研之后发现&#xff0c;某服务…...

C++最易读手撸神经网络两隐藏层(任意Nodes每层)梯度下降230821a

// c神经网络手撸20梯度下降22_230820a.cpp : 此文件包含 "main" 函数。程序执行将在此处开始并结束。 #include<iostream> #include<vector> #include<iomanip> // setprecision #include<sstream> // getline stof() #include<fstream…...

Leetcode 2235.两整数相加

一、两整数相加 给你两个整数 num1 和 num2&#xff0c;返回这两个整数的和。 示例 1&#xff1a; 输入&#xff1a;num1 12, num2 5 输出&#xff1a;17 解释&#xff1a;num1 是 12&#xff0c;num2 是 5 &#xff0c;它们的和是 12 5 17 &#xff0c;因此返回 17 。示例…...

Postman —— postman实现参数化

什么时候会用到参数化 比如&#xff1a;一个模块要用多组不同数据进行测试 验证业务的正确性 Login模块&#xff1a;正确的用户名&#xff0c;密码 成功&#xff1b;错误的用户名&#xff0c;正确的密码 失败 postman实现参数化 在实际的接口测试中&#xff0c;部分参数每…...

LeetCode--HOT100题(41)

目录 题目描述&#xff1a;102. 二叉树的层序遍历&#xff08;中等&#xff09;题目接口解题思路代码 PS: 题目描述&#xff1a;102. 二叉树的层序遍历&#xff08;中等&#xff09; 给你二叉树的根节点 root &#xff0c;返回其节点值的 层序遍历 。 &#xff08;即逐层地&am…...

微信小程序教学系列(6)

第六章&#xff1a;小程序商业化 第一节&#xff1a;小程序的商业模式 在这一节中&#xff0c;我们将探讨微信小程序的商业模式&#xff0c;让你了解如何将你的小程序变成一个赚钱的机器&#xff01; 1. 广告收入 小程序的商业模式之一是通过广告收入赚钱。你可以在小程序中…...

小程序中的全局配置以及常用的配置项(window,tabBar)

全局配置文件和常用的配置项 app.json: pages:是一个数组&#xff0c;用于记录当前小程序所有页面的存放路径&#xff0c;可以通过它来创建页面 window:全局设置小程序窗口的外观(导航栏&#xff0c;背景&#xff0c;页面的主体) tabBar:设置小程序底部的 tabBar效果 style:是否…...

数据工厂调研及结果展示

数据工厂 一、背景 在开发自测、测试迭代测试、产品验收的过程中&#xff0c;都需要各种各样的前置数据&#xff0c;大致分为如下几类&#xff1a; 账号&#xff08;实名、权益等级、注册等&#xff09; 货源&#xff08;优货、急走、相似、一手、普通货源等&#xff09; …...

求职、谈合作、防踩坑:天眼查、企信宝、企查查,普通人到底该用哪个?

求职、谈合作、防踩坑&#xff1a;三大企业信息平台实战评测指南 在信息爆炸的时代&#xff0c;无论是求职面试、商务合作还是个人投资&#xff0c;提前了解企业背景已成为现代人的必备技能。天眼查、企信宝、企查查三大平台凭借海量企业数据&#xff0c;成为普通人获取商业情报…...

1D-CNN模型如何关联阴谋论搜索与仇恨犯罪预测

1. 项目概述&#xff1a;当AI遇见阴谋论——一次用数据洞察社会风险的尝试作为一名长期关注数据科学与社会计算交叉领域的研究者&#xff0c;我常常思考一个问题&#xff1a;互联网上那些看似荒诞、却拥有庞大拥趸的阴谋论&#xff0c;究竟只是茶余饭后的谈资&#xff0c;还是真…...

自建团队协作平台TeamClaw:从架构设计到部署运维全指南

1. 项目概述与核心价值最近在折腾一个挺有意思的开源项目&#xff0c;叫teamclaw&#xff0c;仓库地址是teamclawai/teamclaw。乍一看这个名字&#xff0c;可能有点摸不着头脑&#xff0c;但深入了解一下&#xff0c;你会发现它瞄准的是一个非常具体且高频的痛点&#xff1a;团…...

大语言模型微调实战:从LoRA到QLoRA,一站式开源框架详解

1. 项目概述与核心价值 如果你正在寻找一个能够一站式搞定主流大语言模型微调的开源项目&#xff0c;那么 ssbuild/llm_finetuning 绝对值得你花时间深入研究。这个项目本质上是一个基于 PyTorch 和 Hugging Face Transformers 生态的、高度工程化的微调框架。它最大的魅力在…...

全网珍藏网安学习网站大全,一次性整理齐全,错过容易被删速收藏!

我们学习网络安全&#xff0c;很多学习路线都有提到多逛论坛&#xff0c;阅读他人的技术分析帖&#xff0c;学习其挖洞思路和技巧。但是往往对于初学者来说&#xff0c;不知道去哪里寻找技术分析帖&#xff0c;也不知道网络安全有哪些相关论坛或网站&#xff0c;所以在这里给大…...

深度强化学习在航天控制中的仿真到实物迁移挑战

1. 深度强化学习在航天控制领域的应用背景卫星近距离操作是航天任务中的一项关键技术挑战&#xff0c;涉及轨道交会、在轨服务、空间目标检测等多种场景。传统基于模型预测控制&#xff08;MPC&#xff09;的方法需要精确的环境动力学模型&#xff0c;而实际太空环境中存在诸多…...

从面试旅行到EDA设计:工程思维如何应对混乱与不确定性

1. 一次糟糕的面试旅行&#xff1a;从混乱到反思的工程思维那天早上醒来&#xff0c;看到闹钟指针的那一刻&#xff0c;我就知道一切都乱套了。作为一名在谢菲尔德攻读控制工程学士学位的学生&#xff0c;我本该精神抖擞地前往伦敦郊区参加人生中第一次工业实习面试。然而&…...

Python开发进阶之路:探索异步编程与高性能应用

在当今快节奏的软件开发环境中&#xff0c;构建高性能、可扩展的应用程序已成为开发者的首要任务。随着互联网应用的普及&#xff0c;用户对响应速度和并发处理能力的要求越来越高。Python&#xff0c;作为一种广泛使用的高级编程语言&#xff0c;凭借其简洁的语法和强大的生态…...

FastAPI部署演进:从Gunicorn+Uvicorn镜像到原生多进程的迁移指南

1. 项目背景与演进&#xff1a;从“黄金搭档”到“历史遗产”如果你在过去几年里用 FastAPI 部署过 Web 服务&#xff0c;大概率听说过或者用过tiangolo/uvicorn-gunicorn-fastapi-docker这个 Docker 镜像。它一度是 FastAPI 官方文档里推荐的部署方案之一&#xff0c;由 FastA…...

深度解析开源项目:Cursor Pro破解工具技术架构与实战应用完整指南

深度解析开源项目&#xff1a;Cursor Pro破解工具技术架构与实战应用完整指南 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve reach…...