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;注定要走不同的路。 在这个年纪里…

面向对象(下)

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

(九)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

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

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

execl数据多维度建模(二)

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

计算机二级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 基础…

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

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

Linux——进程通信(二) 匿名管道的应用:进程池

前言 之前我们学习了进程通过匿名管道进行通信&#xff0c;实现了两个进程的数据传输。 如果我们管理的是很多个进程&#xff0c;通过管道发送指令&#xff0c;因为如果管道中没有数据&#xff0c;读端必须等待&#xff0c;也就是被管理的进程们都在等待我发送的指令&#xf…

CVE-2024-24112 XMall后台管理系统 SQL 注入漏洞分析

------作者本科毕业设计项目 基于 Spring Boot Vue 开发而成...... [Affected Component] /item/list /item/listSearch /sys/log /order/list /member/list (need time-based blind injection) /member/list/remove 项目下载地址 Exrick/xmall: 基于SOA架构的分布式…

cesium viewer camera flyto

一、viewer的flyTo内部调用的是camera的相关定位方法&#xff0c;针对不同的定位对象&#xff0c;计算出合适的位置和相机视角。viewer可以定位到entity、dataSource、Cesium3DTileset、ImageLayer等。 var rect [116.490401, 39.964771, 116.499623, 39.977102];var heading …

2024全国水科技大会:【协办单位】山东文远环保科技股份有限公司

山东文远环保科技股份有限公司坐落于千年古城齐国故都--临淄。初始成立于2011年&#xff0c;是淄博市首批国有资本参股的混合改制企业。 公司着力打造环保设备制造、环保工程及服务、环保水务/固废处理/新能源项目投资及运营管理、固废循环经济产业园等四大板块。是一家集投资、…

Elasticsearch8.x版本Java客户端Elasticsearch Java API 如何并发修改

前言 并发控制&#xff0c;一般有两种方案&#xff0c;悲观锁和乐观锁&#xff0c;其中悲观锁是默认每次更新操作肯定会冲突&#xff0c;所以每次操作都要先获取锁&#xff0c;操作完毕再释放锁&#xff0c;适用于写比较多的场景。而乐观锁是默认每次更新操作都不会冲突&#…

鸿蒙Harmony应用开发—ArkTS声明式开发(容器组件:GridCol)

栅格子组件&#xff0c;必须作为栅格容器组件(GridRow)的子组件使用。 说明&#xff1a; 该组件从API Version 9开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 可以包含单个子组件。 接口 GridCol(option?:{span?: number | …

综合知识篇00-综合知识考点汇总目录(2024年软考高级系统架构设计师冲刺知识点总结-综合知识篇-先导篇)

专栏系列文章推荐&#xff1a; 2024高级系统架构设计师备考资料&#xff08;高频考点&真题&经验&#xff09;https://blog.csdn.net/seeker1994/category_12593400.html 【历年案例分析真题考点汇总】与【专栏文章案例分析高频考点目录】&#xff08;2024年软考高级…

二叉树的初步学习和顺序结构实现

当我们学完顺序表、链表、栈和队列的时候&#xff0c;我们就要开始学习树了。树对于以后的学习有非常大的帮助&#xff0c;尤其是排序。好了&#xff0c;开始我们的学习吧。 1.树的概念及结构 1.1树的结构 树结构是一种非线性结构。它是由n&#xff08;n>0&#xff09;个…

CHINC邀请函 | 全视通邀您共赴青岛,碰撞数智火花

展会名称&#xff1a;2024中华医院信息网络大会&#xff08;CHINC&#xff09; 展会时间&#xff1a;3月29-31日 展会地址&#xff1a;青岛国际会展中心&#xff08;红岛馆&#xff09; 全视通展位&#xff1a;B2-A05A 全视通将携智慧病区、智慧门诊、智慧手术室、智慧后勤…

快速实现鸿蒙侧边栏显示与隐藏

文章目录 前言侧边栏组件使用快速搞定侧边栏总结 一、前言 有好多文章要分享&#xff0c;但是来不及&#xff0c;就把最近觉得比较重要的组件分享下。最近因为在完善玩android的一个app&#xff0c;我的这个app叫玩鸿蒙&#xff0c;过段时间就开源了&#xff0c;敬请期待。 …