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

uniapp开发安卓app--安卓低版本(4.4)不显示echarts图表问题解决思路

在查阅了大量资料后,找到一个最有可能发生的问题——低版本安卓不兼容es6的语法,导致echarts不能正常被加载。

比如:

  1. 将箭头函数替换为传统的函数表达式。
  2. 将 ES6 的模块导出语法改为 module.exports
  3. 将 ES6 的类方法(如 datamethods 等)改为对象的方法。
  4. 将 let 和 const 改为 var
  5. 替换 ES6 的模板字符串为传统的字符串拼接。

es6转换成es5写法,我在这里列举一些最常见的:

导入

import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'

转换成es5

var echarts = require('@/uni_modules/lime-echart/static/echarts.min');

uniapp中的data、onLaunch、onLoad、mounted、beforeDestroy等都要改成传统的function写法,不要使用箭头函数;并且export default 要改成 module.exports

module.exports = {data: function() {this.nowTimes();//这是一个函数},onLaunch: function() {this.nowTimes();},onLoad: function() {this.nowTimes();},mounted: function() {this.nowTimes();},beforeDestroy: function() {this.nowTimes();},
}

然后就是函数内部this的使用,调用函数:

methods:{nowTimes: function() {var self = this;self.timeNow(new Date());// setInterval(this.nowTimes,1000)self.timer = setInterval(() => {self.timeNow(new Date());}, 1000);},timeNow: function(timeStamp) {var year = new Date(timeStamp).getFullYear();var month = new Date(timeStamp).getMonth() + 1 < 10 ? "0" + (new Date(timeStamp).getMonth() + 1) : new Date(timeStamp).getMonth() + 1; var date=new Date(timeStamp).getDate() < 10 ? "0" + new Date(timeStamp).getDate() : new Date( timeStamp) .getDate(); var hh=new Date(timeStamp).getHours() < 10 ? "0" + new Date(timeStamp).getHours() : new Date( timeStamp) .getHours(); var mm=new Date(timeStamp).getMinutes() < 10 ? "0" + new Date(timeStamp).getMinutes() : new Date( timeStamp).getMinutes(); var ss=new Date(timeStamp).getSeconds() < 10 ? "0" + new Date(timeStamp).getSeconds() : new Date( timeStamp).getSeconds(); this.nowTime=hh + ":" + mm + ':' + ss;this.nowData=year + "." + month + "." + date; this.nowWeek="星期" + '日一二三四五六' .charAt(new Date().getDay()) }, 
}

生成echats 函数

init: function() {var self = this;// chart 图表实例不能存在data里self.$refs.chartRef.init(echarts).then(function(chart) {chart.setOption(self.option);});self.$refs.chartRefs.init(echarts).then(function(charts) {charts.setOption(self.options);});
},

就是用一个变量接收this,类似微信小程序的写法(不想吐槽ଲଇଉକ)

以上就是出现这种问题的一个解决思路,希望能对你有所帮助 (♡ര‿ര)

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • DataX
  • ES6 -- 总结 03
  • Linux网络编程——C/C++Web服务器(二):IO多路复用select/poll/epoll实现服务器监听多客户端事件
  • Java 使用 POI 导出Excel,实现单元格内容为下拉选项
  • 《计算机操作系统》(第4版)第10章 多处理机操作系统 复习笔记
  • Elasticsearch对象映射
  • 神经网络算法 - 一文搞懂Back Propagation(反向传播)
  • js去重的方法
  • Qt使用 QSetting 对 ini 配置文件进行操作
  • 游戏app激励视频广告预加载位置,最大化广告收益
  • 深入理解 CSS Flex 布局
  • git 项目可以拉取提交不了
  • Linux:文件操作
  • EV代码签名证书——消除软件下载时的安全警告
  • Qt之控件介绍
  • 【RocksDB】TransactionDB源码分析
  • 3.7、@ResponseBody 和 @RestController
  • Git同步原始仓库到Fork仓库中
  • JS函数式编程 数组部分风格 ES6版
  • 分布式任务队列Celery
  • 浅析微信支付:申请退款、退款回调接口、查询退款
  • 网络应用优化——时延与带宽
  • 在electron中实现跨域请求,无需更改服务器端设置
  • 组复制官方翻译九、Group Replication Technical Details
  • ​ 轻量应用服务器:亚马逊云科技打造全球领先的云计算解决方案
  • !!Dom4j 学习笔记
  • #gStore-weekly | gStore最新版本1.0之三角形计数函数的使用
  • #LLM入门|Prompt#1.7_文本拓展_Expanding
  • #我与Java虚拟机的故事#连载01:人在JVM,身不由己
  • (1)无线电失控保护(二)
  • (55)MOS管专题--->(10)MOS管的封装
  • (done) NLP “bag-of-words“ 方法 (带有二元分类和多元分类两个例子)词袋模型、BoW
  • (板子)A* astar算法,AcWing第k短路+八数码 带注释
  • (附源码)springboot 基于HTML5的个人网页的网站设计与实现 毕业设计 031623
  • (附源码)ssm高校实验室 毕业设计 800008
  • (每日一问)计算机网络:浏览器输入一个地址到跳出网页这个过程中发生了哪些事情?(废话少说版)
  • (七)理解angular中的module和injector,即依赖注入
  • (三)模仿学习-Action数据的模仿
  • (十一)JAVA springboot ssm b2b2c多用户商城系统源码:服务网关Zuul高级篇
  • (学习日记)2024.01.09
  • (转)创业家杂志:UCWEB天使第一步
  • ./indexer: error while loading shared libraries: libmysqlclient.so.18: cannot open shared object fil
  • .bat批处理(三):变量声明、设置、拼接、截取
  • .chm格式文件如何阅读
  • .NET Core中如何集成RabbitMQ
  • .NET Framework .NET Core与 .NET 的区别
  • .Net Web窗口页属性
  • /tmp目录下出现system-private文件夹解决方法
  • @CacheInvalidate(name = “xxx“, key = “#results.![a+b]“,multi = true)是什么意思
  • @synthesize和@dynamic分别有什么作用?
  • [20170705]diff比较执行结果的内容.txt
  • [autojs]autojs开关按钮的简单使用
  • [AutoSar]BSW_Memory_Stack_003 NVM与APP的显式和隐式同步
  • [C++]AVL树怎么转
  • [C++]使用yolov10的onnx模型结合onnxruntime和bytetrack实现目标追踪