uni-app vue3 import 引入echarts 报错

操作步骤：

vue3中使用echarts-uniapp插件（uniapp vu3中引入任何echarts.js插件小程序都会出现该问题），微信小程序启动，小程序加载完成后报错找不到(void 0)。（在小程序代码中是使用require("./echarts.min.js")）

预期结果：

vue3中import * as echarts from './echarts.min.js’引入echarts,预计小程序展示var echarts = require("./echarts.min.js");

实际结果：

小程序端展示require("./echarts.min.js");凡是使用了echarts的地方都被替换成(void 0)，并且报错找不到(void 0)

bug描述：

uniapp vue3状态使用import * as echarts from './echarts.min.js’引入echarts，微信小程序端报错找不到(void 0)（如下图1）
uniapp vue3中使用var echarts = require("./echarts.min.js");import './echarts.min.js’引入，小程序可以显示成功（如下图2）

图片

文件

import引用问题.zip

wuwangju 1楼•8 天前

不知道为什么这个‘bug描述’这个文本插入不了图片

wuwangju 2楼•8 天前

已上传相关视频

zlyuanteng 3楼•8 天前

你好，问一下问题有没有解决？

vueper 4楼•8 天前

怎么就才有人看到，你觉得呢？

ionicwang 5楼•8 天前

在使用 uni-app 和 Vue 3 时，引入 ECharts 可能会遇到一些报错。以下是一些常见的问题及其解决方法：

1. 安装 ECharts

首先，确保你已经正确安装了 ECharts：

npm install echarts --save

2. 引入 ECharts

在 Vue 3 中，你可以通过以下方式引入 ECharts：

import * as echarts from 'echarts';

3. 在组件中使用 ECharts

在 setup 函数中使用 ECharts：

<template>
  <div ref="chart" style="width: 100%; height: 400px;"></div>
</template>

<script>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

export default {
  setup() {
    const chart = ref(null);

    onMounted(() => {
      const myChart = echarts.init(chart.value);
      const option = {
        title: {
          text: 'ECharts 示例'
        },
        tooltip: {},
        xAxis: {
          data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10]
          }
        ]
      };
      myChart.setOption(option);
    });

    return {
      chart
    };
  }
};
</script>

4. 常见报错及解决方法

报错：`Cannot read property 'init' of undefined`

原因：可能是 ECharts 没有正确引入。 解决方法：确保 ECharts 已经正确安装，并且引入方式正确。

报错：`ReferenceError: document is not defined`

原因：uni-app 在某些环境下（如小程序）没有 document 对象，而 ECharts 默认依赖 document。 解决方法：使用 uni-app 提供的 canvas 组件来替代 ECharts 默认的 DOM 渲染。

<template>
  <canvas ref="chart" canvas-id="chart" style="width: 100%; height: 400px;"></canvas>
</template>

<script>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import { getCanvasContext } from 'echarts/lib/export';

export default {
  setup() {
    const chart = ref(null);

    onMounted(() => {
      const ctx = uni.createCanvasContext('chart', this);
      const myChart = echarts.init(null, null, {
        renderer: 'canvas',
        devicePixelRatio: 2,
        width: 300,
        height: 300,
        context: ctx
      });
      const option = {
        title: {
          text: 'ECharts 示例'
        },
        tooltip: {},
        xAxis: {
          data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10]
          }
        ]
      };
      myChart.setOption(option);
      myChart.render();
    });

    return {
      chart
    };
  }
};
</script>