uniapp 在android、ios上使用echart组件

通过renderjs，在app和h5端使用完整的 echarts

在app和h5页面可以直接使用原生js调用echarts，如果显示效果比较复杂，最好自己生成echarts.js，使用uniapp的demo会出现空白错误。

准备

• echarts.js 在echarts官网按需生成

echarts官网地址：https://echarts.apache.org/

开发

1、将echarts.js文件复制到HBuilder项目中的static文件夹下

2、在index.vue中使用echart

<template>
<view class="content">
    <!-- #ifdef APP-PLUS || H5 -->
    <view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts"></view>
    <button @click="changeOption">更新数据</button>
    <!-- #endif -->
</view>
</template>

<script>
export default {
data() {
return {
//echart配置数据
option: {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}
}
},
onLoad() {

},
methods: {
//button点击事件
changeOption() {
const data = this.option.series[0].data
// 随机更新示例数据
data.forEach((item, index) => {
data.splice(index, 1, Math.random() * 40)
})
},
// renderjs 调用响应事件
onViewClick(options) {
console.log(options)
}
}
}
</script>
//renderjs中调用dom
<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 计算
// 实战时使用远程地址无效(http://domain.com/echarts.js)
script.src = 'static/echarts.js'
script.onload = this.initEcharts.bind(this)
document.head.appendChild(script)
}
},
methods: {
initEcharts() {
myChart = echarts.init(document.getElementById('echarts'))
// 观测更新的数据在 view 层可以直接访问到
myChart.setOption(this.option)
},
updateEcharts(newValue, oldValue, ownerInstance, instance) {
// 监听 service 层数据变更
myChart.setOption(newValue)
},
onClick(event, ownerInstance) {
// 调用 service 层的方法
ownerInstance.callMethod('onViewClick', {
test: 'test'
})
}
}
}
</script>

<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
//echarts必须定义宽高，否则报错
.echarts {
margin-top: 100px;
width: 100%;
height: 300px;
}
</style>

3、在Android和iOS平台上运行应用程序时，确保已正确安装和配置了ECharts组件的依赖项，并且已将ECharts组件打包到应用程序中。此外，还需要在应用程序的manifest文件中配置相关权限，以便可以访问设备的图形和图像渲染功能。

manifest权限设置

在Android平台上，使用ECharts组件可能需要访问设备的图形和图像渲染功能，因此需要在应用程序的manifest文件中添加相应的权限声明。具体而言，可以添加以下权限声明：

<manifest>
<!– … –>
<uses-permission android:name=”android.permission.INTERNET” />
<uses-permission android:name=”android.permission.READ_EXTERNAL_STORAGE” />
<uses-permission android:name=”android.permission.WRITE_EXTERNAL_STORAGE” />
<uses-permission android:name=”android.permission.ACCESS_NETWORK_STATE” />
<uses-permission android:name=”android.permission.MOUNT_UNMOUNT_FILESYSTEMS” />
<!– … –>
</manifest>

其中，INTERNET权限允许应用程序访问互联网，READ_EXTERNAL_STORAGE和WRITE_EXTERNAL_STORAGE权限允许应用程序读写外部存储设备上的文件，ACCESS_NETWORK_STATE权限允许应用程序访问网络状态信息，MOUNT_UNMOUNT_FILESYSTEMS权限允许应用程序挂载和卸载文件系统。

在iOS平台上，ECharts组件不需要额外的权限声明，但需要确保应用程序已启用WebGL功能和Canvas画布渲染功能。如果在应用程序中使用了其他需要访问设备功能的第三方库或组件，则需要在应用程序的Info.plist文件中添加相应的权限声明。

4、要检查iOS设备是否已启用WebGL功能和Canvas画布渲染功能，可以通过以下步骤：

1. 在Safari浏览器中打开开发者菜单：在设备上打开Safari浏览器，然后从设置中启用开发者菜单。
2. 连接设备：将设备通过USB线连接到开发计算机上。
3. 打开远程调试功能：在开发计算机上打开Safari浏览器，然后选择”Develop”菜单中的设备名称。
4. 在设备上打开网页：在Safari浏览器中输入要测试的网页地址，并在设备上打开该网页。
5. 检查WebGL和Canvas功能：在Safari开发者工具中选择”WebGL”或”Canvas”标签，检查相关功能是否正常工作。如果显示相关错误或警告，说明设备可能未启用相关功能或存在其他问题。

需要注意的是，在某些情况下，iOS设备可能已启用WebGL功能和Canvas画布渲染功能，但仍可能存在一些兼容性问题，导致某些网页或应用程序无法正常工作。在开发UniApp应用程序时，可以在多个iOS设备上进行测试和调试，以确保应用程序的兼容性和可靠性。