uniapp 打包成apk echarts需要使用render.js
在使用 UniApp 将应用打包成 APK 时,如果你在应用中使用了 ECharts 图表库,可能会需要使用 render.js 文件。ECharts 是一个基于 JavaScript 的数据可视化库,它可以用于在网页中创建各种类型的交互式图表和数据可视化展示。
在 UniApp 中,由于多端适配的特性,ECharts 需要通过 render.js 文件来进行多端的适配工作。这个 render.js 文件会根据当前的运行环境来选择合适的渲染方式,以确保 ECharts 在不同平台下都能正常显示和交互。这意味着在打包成 APK 时,需要确保 render.js 文件能够正确地适配到 Android 平台。
因此,如果你在 UniApp 中使用 ECharts,并且希望将应用打包成 APK,确保在打包过程中包含了 render.js 文件,并且在使用 ECharts 时按照文档要求正确配置 render.js,以确保图表库能够在 APK 中正常运行和显示。
<template>
<view class="content">
<view
:prop="option"
:change:prop="echarts.updateEcharts"
id="echartsa"
class="echarts"
></view>
</view>
</template>
<script>
export default {
props: {
echartsPhaseData1: Object,
phaseCont:String
},
data() {
return {
seriesTemp:[[],[],[]],
option : {
animation: false,
title:{
subtext: "t(ms)",
right: 0,
bottom: 0,
subtextStyle: {
fontSize: 12,
fontWeight:"normal"
},
},
grid: {
top: 40,
left: 20,
right: 45,
bottom: 4,
show: true,
borderColor:"#000",
borderWidth:1,
zlevel:99,
containLabel: true
},
xAxis: [{
name: '',
nameTextStyle:{
color:"#999"
},
type: 'category',
boundaryGap: false,
axisTick: {
show:false,
alignWithLabel: true
},
axisLine: {
lineStyle: {
color: "#000"
}
},
axisLabel: {
interval: 6,
} ,
splitLine: {
show: true,
},
// prettier-ignore
data: ['0', '', '', '', '', '', '', '','', '', '', '', '', '', '', '','', '', '', '', '', '', '', '','', '', '', '', '', '', '', '','', '', '', '', '', '', '', '','', '', '', '', '', '', '', '','', '', '', '', '', '', '', '','', '', '', '', '', '', '', '20']
}],
yAxis: [{
name: 'U(V)',
nameTextStyle:{
color:"#999"
},
minorTick: {
show: false
},
type: "value",
axisTick: {
show: false
},
splitLine: {
show: true,
},
axisLine: {
show: false,
lineStyle: {
color: "#000"
}
},
}],
series: [
{
type: 'line',
showSymbol: false,
smooth: 1,
color:"#FFB900",
clip: true,
data: []
},
{
type: 'line',
showSymbol: false,
smooth: 1,
color:"#17874A",
clip: true,
data: []
},
{
type: 'line',
showSymbol: false,
smooth: 1,
color:"#CD3F3F",
clip: true,
data: []
}
]
},}
},
watch: {
//watch事件监听,可以监听data里的值,可以监听props里传来的值
phaseCont:{
handler(newValue, oldValue) {
},
deep: true
},
echartsPhaseData1: {
handler(newValue, oldValue) {
},
deep: true
},
},
methods: {
}
}
</script>
<script module="echarts" lang="renderjs">
let myChart
export default {
mounted() {
if (typeof window.echarts === 'function') {
this.initEcharts()
} else {
// 动态引入较大类库避免影响页面展示
const script = document.createElement('script')
// view 层的页面运行在 www 根目录,其相对路径相对于 www 计算
script.src = 'static/js/echarts.min.js'
script.onload = this.initEcharts.bind(this)
document.head.appendChild(script)
}
},
methods: {
func2(x) {
x /= 10;
return Math.sin(x) * Math.cos(x * 2 + 1) * Math.sin(x * 3 + 2) * 50;
},
generateData2() {
let data = [];
for (let i = 0; i <= 200; i += 0.1) {
data.push([i, this.func2(i)]);
}
return data;
},
func3(x) {
x /= 20;
return Math.sin(x) * Math.cos(x * 2 + 1) * Math.sin(x * 3 + 2) * 50;
},
generateData3() {
let data = [];
for (let i = 0; i <= 200; i += 5) {
data.push([i, this.func3(i)]);
}
return data;
},
initEcharts() {
setTimeout(() => {
myChart = echarts.init(document.getElementById('echartsa'))
// 观测更新的数据在 view 层可以直接访问到
myChart.setOption(this.option)
myChart.resize()
// this.option.series[1].data = "";
},300)
// 这里是用于窗口变化时的自适应,利用的是echarts自带的resize方法
window.addEventListener('resize', () => {
myChart.resize()
});
},
updateEcharts(newValue, oldValue, ownerInstance, instance) {
// 监听 service 层数据变更
if(myChart) {
setTimeout(() => {
console.log(newValue,"series11")
myChart.setOption(newValue)
myChart.resize()
},300)
window.addEventListener('resize', () => {
myChart.resize()
});
}
},
onClick(event, ownerInstance) {
// 调用 service 层的方法
ownerInstance.callMethod('onViewClick', {
test: 'test'
})
}
}
}
</script>
<style>
.echarts {
width: 690upx;
height: 434rpx;
}
</style>