uniapp引入echarts报错解决，并解决图例事件和tooltip失效问题

阿琳a_2024-12-02 17:13

最近新搭建的uniapp项目需要引入echarts图表，没想到坑这么多，在此做一个记录。

我的uniapp是使用vite搭建的项目，所以我npm install echarts下载后，按照pc端那样import * as echarts from 'echarts'引入报错。

问题一：导入报错

1、下载zrender

复制代码

pnpm install zrender

下载zrender后又报错

2、下载tslib

复制代码

pnpm install tslib

在vite.config.js中添加

复制代码

resolve: {
    alias: {
        'zrender': 'zrender',
    }
}

复制代码

import {defineConfig} from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import AutoImport from 'unplugin-auto-import/vite'
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        uni(),
        AutoImport({
            imports: ['vue', 'uni-app'],
            dts: true
        })
    ],
    server: {
        https: false,
        host: '0.0.0.0',
        port: 5174,
        open: true
    },
    resolve: {
        alias: {
            'zrender': 'zrender',
        }
    }
})

就可以发现页面通过import * as echarts from 'echarts'导入不报错了。

问题二：图例点击事件失效和tooltip失效

这里我查了一下有人说可以直接在main.js中添加window.wx={}就可以解决，在浏览器调试的时候试了一下，确实可以；但是这个其实是有大问题的，打包app后在手机端无法打开app，应用报错，查了一下，因为H5是基于浏览器的，有window和document方法，而uni中非web端则运行在v8引擎中，没有window和document方法，所以会有问题，问题解决看问题三。

问题三:app使用echarts的页面显示空白，echarts没加载。

原因我用的是document.getElementById()去获取id的dom进行加载echarts，调试的时候在浏览器肯定是没问题的，打包到app后就有问题。

在uni市场上找到了一个插件：https://ext.dcloud.net.cn/plugin?id=4899

这个是社区作者封装的一个渲染echarts的组件，支持全平台，使用方法也非常简单，具体的使用方法可以看文档进行使用；这个组件也解决了图例点击事件失效和tooltip失效问题，推荐。

效果如下