Uniapp使用echarts打包之后界面不显示（h5正常）#uniapp使用echarts遇到的坑

最新推荐文章于 2024-04-16 02:12:29 发布
最新推荐文章于 2024-04-16 02:12:29 发布
阅读量2.6k 收藏 7
点赞数 3
分类专栏： Vue 小程序 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31754591/article/details/121570228
版权

❤️在繁华中自律，在落魄中自愈❤️

我这里遇到的问题是啥呢，就是h5一切显示都正常，然后打包安卓之后就发现，一直提示有一个值undefined啥的，自己也是不知道从何处下手，然后就考虑更换了版本试试，果然，换了方法之后，就ok了。

重点：

这里说下正确引入echatrts 的办法

首先在插件市场找到echarts-renderjs 也就是echars 模板
自己可以先导入hbuilderx 看看效果
也就是下边这玩意
在这里插入图片描述
然后根据例子导入组件使用组件就行

<echarts :option="option" style="height: 300px;" @click="echartsClick"></echarts>

import Echarts from '@/components/echarts/echarts.vue'
import EchartsEl from '@/components/echarts/echarts-el.vue'

//	components: {
//		Echarts,
//		EchartsEl
//	},

自己使用别人的代码注意看看版本，有些可能都不能使用了，到时候也不知道会遇到啥问题。一般还是以官网新一点的版本来吧。。

codernmx
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
uniap 安卓/H5 使用echarts 常见问题解决
weixin_45157073的博客
03-09 1026
uniapp echarts 图层 数据超出，app打包不显示echarts
uni-app封装echarts折线图，安卓真机测试可以使用
02-09
echarts直接使用h5方式渲染在真机里会报错和显示不了，所以需要使用renderjs配合使用才可以
关于echarts的api功能本地测试可行，打包线上功能失效问题
weixin_39460408的博客
04-27 1273
最近在用echarts开发一个H5的柱状图页面 大致情况是在本地运行，浏览器显示正常，但是webpack打包后发到线上测试环境，功能就失效。 排除结果： 前端在本地运行的时候，会获取nodemodules安装的依赖包，确认过package.json里面的echarts依赖包是最新的4.7.0版本 但是本地打包后发到线上，原先功能失效。 看到webpack里面的 externals: ...
uniapp中加载Echarts图表H5可以显示正常图表， 打包app图表不显示的问题
qq_35145095的博客
03-25 658
在 UniApp 中，由于多端适配的特性，ECharts 需要通过 render.js 文件来进行多端的适配工作。在使用 UniApp 将应用打包成 APK 时，如果你在应用中使用了 ECharts 图表库，可能会需要使用 render.js 文件。因此，如果你在 UniApp 中使用 ECharts，并且希望将应用打包成 APK，确保在打包过程中包含了 render.js 文件，并且在使用 ECharts 时按照文档要求正确配置 render.js，以确保图表库能够在 APK 中正常运行和显示。
在uniapp使用echarts，封装成组件使用，经真机测试可用
最新发布
2401_84240454的博客
04-16 637
splitNumber: 5 //坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整.在类目轴中无效。type: ‘line’, //折线图是用折线将各个数据点标志连接起来的图表，用于展现数据的变化趋势。type: ‘line’, //折线图是用折线将各个数据点标志连接起来的图表，用于展现数据的变化趋势。type: ‘line’, //折线图是用折线将各个数据点标志连接起来的图表，用于展现数据的变化趋势。
解决uni-app中使用echarts时，无法在真机上显示问题
小超人拯救大世界的博客
03-01 1667
记录基于renderjs在uniapp真机上运行echarts的实现，不涉及原理
uni-app中使用echarts图表，避免插件市场echarts图例不显示等系列bug，超简单教程
Zmeiyoumao的博客
11-26 5828
uni-app中使用echarts图表 uni-app 是一个使用 Vue.js 开发所有前端应用的框架，对于跨端开发有着很大的优势，在uni-app中也有不少的组件，最流行、下载量最多的的图表组件是官方推荐的秋云开发的ucharts，这个图表组件已经完成了大多数的需求，并且可以兼容多端使用。但是它的类型有点少，当我老大要我实现一个类似与这种排行榜时， 我翻遍了它的所有示例。只有这个横屏模式。 emmmmmmm，就离谱，然后就不得不去琢磨echarts导入（重要提示：echarts不支持小程序！！！） ec
【uniapp 使用ECharts】
前端-CV全粘工程师
08-03 5498
创建ECharts实例，并设置图表选项。最后，可以通过监听事件来响应用户的交互行为。创建画布实例，然后使用。
uni-app中使用echarts教程
热门推荐
shi450561200的博客
04-06 2万+
一、下载echart方法一：从下载的源代码或编译产物安装方法二：从 npm 安装方法三：选择需要的模块，在线定制下载即echarts.min.js 下载二、引入。
uni问题：APP端Echarts图表不显示
m0_74802419的博客
11-20 4109
因此借助网上的参考，进行Echarts组件封装，借助renderjs 在视图层操作dom ，进行Echarts实例初始化，并将配置数据定义在主script中的data中，在主script中进行数据的处理。需求是要在APP端使用折线图对上一个月的利息进行展示，于是很自然的我使用了Echarts进行图表的绘制，参考Echarts官网示例，在H5端很轻松的就将图表画了出来。打印接口返回的数据，发现数据有，然后注释掉接口的数据，将x轴和线条的data数据写死，发现依旧不显示图表。| 轻轻松松工作，简简单单生活。
uniapp微信小程序使用Echarts组件
07-28
uniapp微信小程序使用Echarts组件,使用实例 <echarts class="uni-ec-canvas" ref="echarts2" :option="option" canvasId="echarts1" id='echarts2'></echarts>
uniapp-echarts.rar
07-02
uni-app使用echarts--h5端--可以实现地图下钻
threejs文件包，uniapp 里使用 echarts、threejs、地图插件等
03-17
threejs文件包，uniapp 里使用 echarts、threejs、地图插件等
Echarts.zip（适用uni-app App端和H5端的echarts图表组件）
05-27
适用uni-app App端和H5端的echarts图表组件
【转载】Vue打包后Echarts图表不显示问题解决
非晓为骁的博客
02-21 3291
原文链接：https://blog.csdn.net/yyz_1987/article/details/119903964 工作中刚好碰到的问题，然后找到这篇文章，这篇文章是转载的。 最近发现一奇怪问题，正常本机测试情况下，echarts图表显示的没问题。但是只要打包后部署到nginx里，第一次首页加载没问题，但进入其他tab页面再返回首页时，echarts图表就是显示不出来了。监测控制台也没有任何的错误输出。 网上有很多的说辞和办法，但试过了都没有效果。最后经过不断的尝试摸索，终于解决啦。 有的说是生命
uniapp echart 使用及其问题解决
weixin_51108556的博客
06-07 587
uniapp使用echarts ，属性dataZoom 不生效问题解决，uni app 中有一个 ‘wx’ 全局变量污染了echarts中的 wx 变量解决
uniapp 引入echarts（app端、H5）
weixin_45476607的博客
02-10 2145
uniapp引入echarts，（app，H5）
uni-app - 在uniapp中使用echarts展示图表
iotjin的专栏
07-12 1万+
习惯使用echarts图表，在uniapp中使用npm安装echarts再使用，或多或少有问题，最终找到一个好用的插件lime-echart 官网地址 uni-app插件市场地址 安装 直接在插件市场，使用HBuilderX导入插件即可，最终导入到uni_modules文件夹 使用 使用方法可参考插件市场的用法，以下是一个异步加载demo <template> <view> <view style="width: 100%; height:50.
uni引入echarts
SoQBulingBuling的博客
05-06 1721
在uniapp中使用echart 因为项目需要所以要是使用echarts，如果只是想用图表展示数据的话还是推荐ucharts的。 百度过网上的很多方法 npm下载…由于更新问题就放弃了 最后使用的是uni插件市场上的一款插件 –renderjs-echarts-demo下载这个demo 可以看到他主要依靠的是： static/echarts.js 这个文件 当引入你需要的图表时只需要将data中的...
uniapp使用echarts微信小程序
04-04
UniApp是一个基于Vue.js的跨平台开发框架，可以用于开发微信小程序、H5、App等多个平台的应用程序。而ECharts是一个由百度开发的数据可视化库，可以用于绘制各种图表和图形。 在UniApp中使用ECharts来绘制图表需要以下几个步骤： 1. 安装ECharts插件：在UniApp项目中，可以通过npm安装ECharts插件，命令如下： ``` npm install echarts --save ``` 2. 引入ECharts组件：在需要使用ECharts的页面或组件中，引入ECharts组件，例如： ```vue <template> <view> <ec-canvas id="mychart" canvas-id="mychart" :ec="ec"></ec-canvas> </view> </template> <script> import * as echarts from 'echarts'; export default { data() { return { ec: { lazyLoad: true // 延迟加载 } }; }, onLoad() { this.initChart(); }, methods: { initChart() { this.$nextTick(() => { this.ecComponent = this.selectComponent('#mychart'); this.ecComponent.init((canvas, width, height) => { const chart = echarts.init(canvas, null, { width: width, height: height }); // 绘制图表 chart.setOption({ // 配置项 }); // 将图表实例绑定到this上，方便其他方法调用 this.chart = chart; return chart; }); }); } } }; </script> ``` 3. 配置ECharts图表：在`initChart`方法中，可以通过`chart.setOption`方法来配置ECharts图表的各种属性和数据，具体的配置项可以参考ECharts官方文档。 以上就是在UniApp中使用ECharts绘制图表的基本步骤。通过这种方式，你可以在微信小程序中使用ECharts来展示各种图表和数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

codernmx

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值