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失效问题,推荐。

效果如下

相关推荐
一城烟雨_1 小时前
vue3 实现将html内容导出为图片、pdf和word
前端·javascript·vue.js·pdf
树懒的梦想1 小时前
调整vscode的插件安装位置
前端·cursor
低代码布道师3 小时前
第二部分:网页的妆容 —— CSS(下)
前端·css
一纸忘忧3 小时前
成立一周年!开源的本土化中文文档知识库
前端·javascript·github
涵信3 小时前
第九节:性能优化高频题-首屏加载优化策略
前端·vue.js·性能优化
前端小巷子4 小时前
CSS单位完全指南
前端·css
艾小逗4 小时前
uniapp中检查版本,提示升级app,安卓下载apk,ios跳转应用商店
android·ios·uni-app·app升级
SunTecTec4 小时前
Flink Docker Application Mode 命令解析 - 修改命令以启用 Web UI
大数据·前端·docker·flink
拉不动的猪5 小时前
前端常见数组分析
前端·javascript·面试
小吕学编程6 小时前
ES练习册
java·前端·elasticsearch