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

最近新搭建的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失效问题,推荐。

效果如下

相关推荐
Yeats_Liao8 分钟前
Go Web 编程快速入门 14 - 性能优化与最佳实践:Go应用性能分析、内存管理、并发编程最佳实践
前端·后端·性能优化·golang
蒜香拿铁11 分钟前
Angular【http服务端交互】
前端·http·angular.js
游戏开发爱好者820 分钟前
Fiddler抓包实战教程 从安装配置到代理设置,详解Fiddler使用方法与调试技巧(HTTPHTTPS全面指南)
前端·测试工具·小程序·https·fiddler·uni-app·webview
universe_0126 分钟前
前端八股之HTTP
前端·网络协议·http
技术砖家--Felix2 小时前
Spring Boot Web开发篇:构建RESTful API
前端·spring boot·restful
yume_sibai3 小时前
TS 常用内置方法
前端·javascript·typescript
新知图书3 小时前
ArkTS语言、基本组成与数据类型
前端·javascript·typescript
嘗_3 小时前
手写自己的小型react
前端·javascript·react.js
嘀咕博客3 小时前
h5游戏免费下载:HTML5拉杆子过关小游戏
前端·游戏·html5
Moonbit3 小时前
MoonBit 推出 LLVM Debugger,核心用户数破十万
前端·编程语言·llvm