uniapp使用Echarts图表H5显示正常 打包app显示异常

uniapp使用Echarts在H5页面调试 调试完在H5正常显示 然后通过安卓机调试的时候 发现直接空白了 还有这个爆错 Initialize failed: invalid dom 我有多个图表、图表是通过v-for循环出来的

解决方案

原来是yarn直接安装Echarts 然后改成本地JS文件引入
gitbub文件地址 — dist/echarts.js文件 只用到这一个js文件
在这里插入图片描述

这是一个图表

<template><view class="content"><view :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts"></view></view></view>
</template><script>export default {data() {return {option: {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {show: false,type: 'value'},series: [{data: [120,{value: 200,itemStyle: {color: '#a90000'}},150,{value: 20,itemStyle: {color: '#00aa00'}},70,110,130],type: 'bar'}],grid: {top: '40rpx',left: '0rpx',bottom: '40rpx',bottom: '40rpx',},},}}}
</script><script module="echarts" lang="renderjs">let myChartexport default {mounted() {if (typeof window.echarts === 'function') {this.initEcharts()} else {const script = document.createElement('script')script.src = 'static/echarts.js'script.onload = this.initEcharts.bind(this)document.head.appendChild(script)}},methods: {initEcharts() {setTimeout(() => {myChart = echarts.init(document.getElementById('echarts'))myChart.setOption(this.option)})window.addEventListener('resize', () => {myChart.resize()});},updateEcharts(newValue, oldValue, ownerInstance, instance) {// 监听 service 层数据变更if (myChart) {myChart.setOption(newValue)window.addEventListener('resize', () => {myChart.resize()});}},onClick(event, ownerInstance) {// 调用 service 层的方法ownerInstance.callMethod('onViewClick', {test: 'test'})}}}
</script><style>.echarts {width: 100%;height: 434rpx;}
</style>

效果图 正常展示

在这里插入图片描述

注意

因为我是循环图表 然后发现 :prop=“item.option” 这样不能使用 通过下标三元表达式也不行 数据只能暴露在最外层

然后找了个笨方法 图表有三个 然后每一个盒子里都写三个图表 搭配v-show进行区分
在js里手动渲染 循环也不行 当然记得设置宽高

循环体内一段是这样
html

						<view v-show="index==0" :prop="option1" :change:prop="echarts.updateEcharts" id="main1"class="main1" style="width: 200rpx;height:100rpx"></view><view v-show="index==1" :prop="option2" :change:prop="echarts.updateEcharts" id="main2"class="main2" style="width: 200rpx;height:100rpx"></view>

js 渲染部分

 					myChart1 = echarts.init(document.getElementById('main1'))myChart1.setOption(this.option1)myChart2 = echarts.init(document.getElementsByClassName('main2')[1])myChart2.setOption(this.option2)myChart3 = echarts.init(document.getElementsByClassName('main3')[2])myChart3.setOption(this.option3)

之后H5、App都正常显示了

测试数据
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/753396.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

二十几岁的我们:在旷野中找寻自我

二十几岁&#xff0c;这是一个充满变数、充满机遇和挑战的年纪。它如同一片辽阔的旷野&#xff0c;每个人都在其中寻找自己的方向&#xff0c;摸索着自己的道路。这是一个既令人兴奋又令人迷茫的年纪&#xff0c;我们穿着不同的鞋子&#xff0c;注定要走不同的路。 在这个年纪里…

MySQL表字段数据类型设计建议

MySQL表字段数据类型设计建议 前言阿里巴巴Mysql字段类型规范一、数值类型二、日期和时间类型三、字符串类型四、IP存储总结 前言 最新的 Java 面试题&#xff0c;技术栈涉及 Java 基础、集合、多线程、Mysql、分布式、Spring全家桶、MyBatis、Dubbo、缓存、消息队列、Linux……

面向对象(下)

目录 01、static1.1、static的使用1.2、static应用举例1.3、单例(Singleton)设计模式 02、main方法的语法03、类的成员之四&#xff1a;代码块04、关键字&#xff1a;final05、抽象类与抽象方法5.1、多态的应用&#xff1a;模板方法设计模式(TemplateMethod) 06、接口(interfac…

redis中setnx命令的底层原理是什么

该命令的含义是set if not exists,Redis是单线程的&#xff0c;所有的命令都是串行执行的。而且Redis的SETNX操作是原子的&#xff0c;即使有大量的线程同时发送SETNX命令&#xff0c;Redis也会一个接一个地执行这些命令。也就是说&#xff0c;即使有多个线程同时使用SETNX尝试…

直接码住!引流四大关键要素一定要知道!

在当今流量盛行的时代&#xff0c;要想做好引流工作&#xff0c;就必须了解并掌握引流的四大关键要素&#xff0c;接下来就一起来看看这四大要素分别是什么吧&#xff01; 1、渠道 选择合适的引流渠道是引流工作中至关重要的一环。不同的产品或服务适合的渠道可能会有所不同&…

(九)Android布局类型(约束布局ConstraintLayout)

约束布局&#xff08;ConstraintLayout&#xff09;与相对布局差不多&#xff0c;是创建一个应用后默认的布局方式&#xff0c;比相对布局更加灵活&#xff0c;一般用于平铺的布局&#xff08;不适用于层叠布局&#xff09;&#xff0c;常用于托拖拽方式构建页面&#xff0c;最…

第五篇:数字视频广告格式概述 - IAB视频广告标准《数字视频和有线电视广告格式指南》

第五篇&#xff1a;第五篇&#xff1a;数字视频广告格式概述 - IAB视频广告标准《数字视频和有线电视广告格式指南 --- 我为什么要翻译介绍美国人工智能科技公司IAB系列技术标准&#xff08;2&#xff09; ​​​​​​​翻译计划 第一篇序言第二篇简介和目录第三篇概述- IA…

由浅到深认识C语言(2):C语言的类型及语句

该文章Github地址&#xff1a;https://github.com/AntonyCheng/c-notes 在此介绍一下作者开源的SpringBoot项目初始化模板&#xff08;Github仓库地址&#xff1a;https://github.com/AntonyCheng/spring-boot-init-template & CSDN文章地址&#xff1a;https://blog.csdn…

pr画中画模板视频素材

pr画中画视频模板&#xff0c;视频聊天对话模板。软件支持&#xff1a;Premiere Pro 2021或更高版本。 来自&#xff1a;pr模板网&#xff0c;下载地址&#xff1a;https://prmuban.com/38196.html

【Python多进程】的进阶讲解

Python多进程 1. 介绍2. multiprocessing模块的基本用法3. 使用Pool4. 进程间通信5. 进程同步6. Process子类化7. 注意事项及选择 1. 介绍 Python中的多进程是通过multiprocessing模块来实现的&#xff0c;与多线程相比&#xff0c;多进程可以实现真正的并行计算&#xff0c;因…

代码随想录算法训练营第day26|39. 组合总和、 40.组合总和II、 131.分割回文串

39. 组合总和 力扣题目链接(opens new window) 给定一个无重复元素的数组 candidates 和一个目标数 target &#xff0c;找出 candidates 中所有可以使数字和为 target 的组合。 candidates 中的数字可以无限制重复被选取。 说明&#xff1a; 所有数字&#xff08;包括 ta…

python--常用简单功能

os函数获取上层目录 # 获取当前目录 print(os.path.abspath(os.path.dirname(__file__))) # 获取上级目录 print(os.path.abspath(os.path.dirname(os.path.dirname(__file__)))) print(os.path.abspath(os.path.dirname(os.getcwd()))) print(os.path.abspath(os.path.join(o…

execl数据多维度建模(二)

源数据 1.选择数据 1&#xff09;插入透视表 选中源数据的数据区域--插入--数据透视表&#xff08;新的工作表名&#xff1a;透视表&#xff09; 2&#xff09;透视表设置 ShipCountry拉入行标签&#xff1b;CategoryName拉入列标签&#xff1b;sales拉入值的位置 3&#xf…

第八节:Vben Admin登录页面自定义

系列文章目录 第一节:Vben Admin介绍和初次运行 第二节:Vben Admin 登录逻辑梳理和对接后端准备 第三节:Vben Admin登录对接后端login接口 第四节:Vben Admin登录对接后端getUserInfo接口 第五节:Vben Admin权限-前端控制方式 第六节:Vben Admin权限-后端控制方式 第七节…

计算机二级Python题目12

目录 1. 基础题 1.1 基础题1 1.2 基础题2 1.3 基础题3 2. turtle画图题 3. 大题 3.1 大题1 3.2 大题2 1. 基础题 1.1 基础题1 sinput("请输入一个小数&#xff1a;") ss[::-1] cs0 for c in s:if c.:breakcseval(c) print({:*>10}.format(cs)) 1.2 基础…

软考论文写作注意事项

本博客地址&#xff1a;https://security.blog.csdn.net/article/details/136816368 一. 论文要求 1、形式方面的要求。首先&#xff0c;内容要丰满&#xff0c;即字数要够&#xff0c;其中摘要字数为 290&#xff5e;320&#xff0c;正文字数为 2200&#xff5e;2800&#x…

kvm利用脚本创建一个新的虚拟机 —— 筑梦之路

1. 脚本文件 #!/usr/bin/env bash # 创建虚拟机 ## 2021/3/28kvm_install(){set -ueset -o pipefail# 创建相关目录ls /home/kvm/{ks,virtualhost,virtual-img} 1>/dev/null 2>&1 || mkdir -p /home/kvm/{virtualhost,virtual-img}# 此程序的变量KVM_HOME/home/kvmK…

winpcap设备名

接口定义&#xff1a; #include <pcap/pcap.h> char errbuf[PCAP_ERRBUF_SIZE]; pcap_t *pcap_open_live(const char *device, int snaplen, int promisc, int to_ms, char *errbuf);其中的device构造如下&#xff1a; 调用GetAdaptersInfo&#xff0c;返回值中的Adapt…

Linux 系统日志

系统日志类型 /var/log/syslog&#xff1a;系统日志&#xff0c;记录所有系统事件。/var/log/messages&#xff1a;系统消息&#xff0c;记录所有系统消息&#xff0c;包括启动信息、错误和警告信息。/var/log/auth.log&#xff1a;认证日志&#xff0c;记录所有认证事件&…

CPU生产的生命周期 - 原材料篇

CPU是中央处理器的缩写&#xff0c;它是执行程序指令的电子电路。CPU使用的基本原材料是硅、铜、铝和各种塑料。由于CPU在现代社会中被大量消耗&#xff0c;因此生产商必须考虑原材料的能源投入和环境影响。 硅是地壳中第二丰富的元素。它以二氧化硅和硅酸盐的形式存在。二氧化…