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 小时前
浏览器中的隐藏IDE: Elements (元素) 面板
开发语言·前端·ide·php
江拥羡橙6 小时前
Vue和React怎么选?全面比对
前端·vue.js·react.js
楼田莉子7 小时前
Qt开发学习——QtCreator深度介绍/程序运行/开发规范/对象树
开发语言·前端·c++·qt·学习
暮之沧蓝7 小时前
Vue总结
前端·javascript·vue.js
木易 士心8 小时前
Promise深度解析:前端异步编程的核心
前端·javascript
im_AMBER8 小时前
Web 开发 21
前端·学习
又是忙碌的一天8 小时前
前端学习day01
前端·学习·html
Joker Zxc8 小时前
【前端基础】20、CSS属性——transform、translate、transition
前端·css
excel8 小时前
深入解析 Vue 3 源码:computed 的底层实现原理
前端·javascript·vue.js
大前端helloworld8 小时前
前端梳理体系从常问问题去完善-框架篇(react生态)
前端