uni-app中引入echarts所遇到的坑

梦里梦外; 2023-07-07 08:08 7阅读 0赞

由于传统web端的echarts使用方式在真机运行时报错，以下是解决方式：

<view :prop="options" :change:prop="echarts.updateEcharts" id="line"></view>

注意：options需要定义在data中，赋值可以在mounted，也可以直接写在data

<script module="echarts" lang="renderjs">
    	let myChart
    	export default { 
    		mounted() { 
    
    			if (typeof window.echarts === 'function') { 
    				this.initEcharts();
    			} else { 
    				// 动态引入较大类库避免影响页面展示
    				const script = document.createElement('script')
    				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
    				script.src = 'static/js/echart/echarts.js';//你的项目中echarts.js的路径
    				script.onload = this.initEcharts.bind(this);
    				document.head.appendChild(script);
    			}
    
    		},
    		methods: { 
    
    			initEcharts: function() { 
    				// this.chart2 = this.load_echart(this.setChartBar(data2), 'canvasLineBar');
    				myChart = echarts.init(document.getElementById('line'));
    				// 观测更新的数据在 view 层可以直接访问到
    				myChart.setOption(this.options);
    			},
    
    			updateEcharts(newValue, oldValue, ownerInstance, instance) { 
    				// 监听 service 层数据变更
    				if (myChart !== "") { 
    					myChart.setOption(newValue, true)//如果需要频繁的更新数据且更新图表，建议加上true
    				}
    
    			},
    
    		}
    
    	}
    </script>

## hbuilderX内置浏览器运行报错 ##

\#\#1、**\[system\] ReferenceError: plus is not defined**  
问题不大，别慌。不影响你的工作。plus，需要在移动端可以使用

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关记录Android studio使用所遇到的坑

一、当我们导入三方框架可能会遇到这个问题 ![Image 1][] 以为我的gradle版本是2.3.2，下面是对应的表： ![Image 1][] 附上网址：h

骑猪看日落/ 2024年02月17日 22:44/ 0 赞/ 5 阅读

相关 uni-app中引入echarts所遇到的坑

由于传统web端的echarts使用方式在真机运行时报错，以下是解决方式： <view :prop="options" :change:prop="echarts.u

梦里梦外;/ 2023年07月07日 08:08/ 0 赞/ 8 阅读

相关【Vue】26.Vue中引入Echarts图表tab切换时遇到的坑

最近在做Echarts图表切换的时候遇到了一个坑，产品设计的需求是这样，两个tab，一个是疾病风险图表，一个是意外风险图表，tab切换时显示不同的图表，而且要根据不同角色的年龄

你的名字/ 2023年06月13日 04:52/ 0 赞/ 48 阅读

相关 uniapp打包成H5遇到的坑

1：点击菜单栏发行，点击选择网站-H5手机版， ![format_png][] 2：在网站域名这一栏填写，网站域名，例如[www.xxx.com][]或者你的服务器的IP地

梦里梦外;/ 2023年02月27日 05:42/ 0 赞/ 68 阅读

相关关于superset邮件发送所遇到的坑

最近公司做superset二次开发，鉴于网上资料比较少，特意把开发中遇到的bug做一下记录，希望留给有用的人 1，vim config.py ENABLE_SCHE

- 日理万妓/ 2022年12月28日 14:13/ 0 赞/ 643 阅读

相关 uniapp引入echarts App端 formatter无效问题

前言在开发中有时候根据需求需要添加总和之类的特殊要求，发现在web端没有问题在App端解析不了formatter 里面函数解决方案问题原因;需要在setOp

一时失言乱红尘/ 2022年11月18日 11:00/ 0 赞/ 678 阅读

相关 Vue中引入echarts

第一步：通过npm安装echarts依赖包 npm install echarts --save 第二步：在js中引用 import as ec

清疚/ 2022年10月19日 04:07/ 0 赞/ 308 阅读

相关 vue中引入echarts

一、全局引入 1.通过以下命令安装Echarts ![在这里插入图片描述][20190429213452843.png] 2.main.js中引入echarts 和

骑猪看日落/ 2022年04月24日 22:10/ 0 赞/ 457 阅读

相关 Springboot下引入mybatis遇到的坑点

一、前言近来参与一个电力大数据项目，开发小组决定在 DAO 层使用 MyBatisPlus ——国产、新颖、强大、轻量。官方API地址：http:/

一时失言乱红尘/ 2022年03月17日 04:18/ 0 赞/ 282 阅读

相关【Vue】20.vue项目中引入echarts图表遇到的问题

最近做一个公众号有需求是要添加一个图表，自己调查了一下，决定使用ECharts，在vue项目中引入ECharts，由于第一次做图表，还要跟UI设计图保持一致，也是遇到了好多样式

淡淡的烟草味﹌/ 2022年02月14日 18:39/ 0 赞/ 659 阅读