uniapp vue3如何使用echarts并支持打包安卓

在uniapp的vue3项目中引入echarts后，打包成安卓应用时图表无法正常显示。按照官方文档配置了renderjs和配置项，但依然报错"ReferenceError: window is not defined"。请问应该如何正确配置echarts使其在uniapp vue3环境中运行，并成功打包到安卓平台？需要具体步骤和关键配置说明。

2 回复

在uniapp的vue3项目中使用echarts，步骤如下：

  1. 安装依赖：
npm install echarts mpvue-echarts
  1. 在页面中引入：
<template>
  <mpvue-echarts :echarts="echarts" :onInit="onInit" canvasId="demo-canvas" />
</template>

<script setup>
import * as echarts from 'echarts';
import mpvueEcharts from 'mpvue-echarts';

const onInit = (canvas, width, height) => {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);
  
  // 设置图表配置
  chart.setOption({
    // ...你的配置
  });
  return chart;
};
</script>
  1. 安卓打包：
  • 在HBuilderX中配置manifest.json
  • 选择发行 → 原生App-云打包
  • 勾选Android，选择证书
  • 点击打包即可

注意：echarts在移动端显示较小，需通过media query或rem适配。


在 UniApp Vue3 中使用 ECharts 并支持打包到安卓，需使用兼容小程序和 H5 的 ECharts 版本。以下是步骤：

1. 安装依赖

使用 npm 或 yarn 安装 ECharts 和 UniApp 适配器：

npm install echarts mpvue-echarts

2. 引入 ECharts

在页面或组件中导入：

<template>
  <mpvue-echarts :echarts="echarts" :onInit="onInit" canvasId="chart" />
</template>

<script setup>
import * as echarts from 'echarts';
import mpvueEcharts from 'mpvue-echarts';

const onInit = (canvas, width, height) => {
  const chart = echarts.init(canvas, null, { width, height });
  canvas.setChart(chart);
  chart.setOption({
    // 配置图表选项
    title: { text: '示例图表' },
    series: [{ type: 'bar', data: [10, 20, 30] }]
  });
  return chart;
};
</script>

3. 配置兼容性

  • H5 端：直接使用 ECharts，无需额外配置。
  • 小程序端：通过 mpvue-echarts 组件渲染，确保 echarts 版本兼容。

4. 打包安卓

  • 在 HBuilderX 中，选择「发行」→「原生 App-云打包」。
  • 勾选 Android 平台，配置证书（测试可用公共证书）。
  • 确保代码中无浏览器专有 API（如 document），ECharts 通过 Canvas 渲染，通常无问题。

注意事项

  • 性能：大数据量时优化渲染，避免卡顿。
  • 版本：使用稳定版本的 ECharts（如 5.x）和适配器。
  • 调试：在 Chrome 中调试 H5 端，使用开发者工具模拟移动端。

完成以上步骤后，即可在 UniApp Vue3 中正常使用 ECharts，并打包为安卓应用。

回到顶部