vue2中怎么使用echarts

Question

为什么我的vue2的项目在hbuilder中打包成apk之后echarts图就不显示， ，在本地就可以正常显示，就打包之后不行，这是什么原因，应该怎么去解决

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

Vue2中使用ECharts问题解决方案

问题症状

ECharts图在本地正常显示，但在HBuilder打包成apk之后不显示。

解决方案

原因分析

可能原因包括:

• ECharts的版本问题（不同版本对Android的支持不完全一致）
• APK打包过程中，导致一些依赖文件或资源被丢失
• Android系统中的安全检查导致ECharts图被拒绝加载

解决方法

1. 检查ECharts版本

   • 确保使用的ECharts版本支持Android，否则升级至最新版本

2. 检查依赖文件或资源

   • 在HBuilder中，确保所有依赖文件（包括ECharts的JS和CSS文件）及资源都打包到了apk中
   • 可以使用HBuilder的资源管理器或命令行工具检查打包内容

3. 配置安全检查

   • 在AndroidManifest.xml中，设置允许ECharts图加载

   <application
       ...
       android:usesCleartextTraffic="true">
       ...
   </application>
   

   • 或者，在AndroidManifest.xml中，设置允许ECharts图使用外部文件

   <application
       ...
       android:allowBackup="true"
       android:preserveLegacyExternalStorage="true">
       ...
   </application>
   

   • 或者，考虑使用HTTPS加载ECharts图，以绕过安全检查

核心代码

<!-- 在 Vue2 中使用 ECharts -->
<template>
  <div ref="chartDom"></div>
</template>

<script>
import echarts from 'echarts';
import 'echarts/chart/bar'; // 或者 'echarts/chart/pie'

export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const myChart = echarts.init(this.$refs.chartDom);
      // 渲染图表
      myChart.setOption(...);
    },
  },
};
</script>

后续步骤

• 针对每种解决方案进行尝试
• 使用HBuilder的调试工具或日志检查打包过程中的错误信息
• 根据实际情况进一步优化配置