在查阅了大量资料后,找到一个最有可能发生的问题——低版本安卓不兼容es6的语法,导致echarts不能正常被加载。
比如:
- 将箭头函数替换为传统的函数表达式。
- 将 ES6 的模块导出语法改为
module.exports
。- 将 ES6 的类方法(如
data
、methods
等)改为对象的方法。- 将
let
和const
改为var
。- 替换 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,类似微信小程序的写法(不想吐槽ଲଇଉକ)
以上就是出现这种问题的一个解决思路,希望能对你有所帮助 (♡ര‿ര)