uniapp+Echartsh子向父传值$emit失效

1.需求:点击柱状图的每一个柱子获取到 id(后台数据props传过来的)

2.失效原因:<script module='echarts' lang="renderjs"> 中不允许使用this.$emit

使用的话我这里是会报这样的错误:TypeError: Cannot read property 'nid' of undefined at view.umd.min.js:1 ,H5不会报错,APP上会报

可以了解一下:

renderjs内如何主动发起通讯? - DCloud问答

解决方案:

html:

<view @tap="echarts.onClick" :prop="zztEchast" :change:prop="echarts.update" class="echarts" id="echartsLV"></view>

普通的Script

<script>
	export default {
		props: {
			zztEchast: Object
		},
		methods:{
            //重点
			onViewClick(val){
				this.$emit("clickitem",val);
			}
		}
	}
</script>

<script module='echarts' lang="renderjs">

<script module='echarts' lang="renderjs">
	export default {
		data() {
			return {
				chart: null,
				ownerInstance:null,//重点
			}
		},
		mounted() {
			let _this = this;
			_this.initEcharts();
		},
		methods: {
			initEcharts() {
				let _this = this;
				const echarts = require('@/static/echarts.min1.js');
				_this.chart = echarts.init(document.getElementById("echartsLV"), {
					height: 'auto',
					width: 'auto',
				})
				_this.update(_this.zztEchast);
			
				window.onresize = () => {
					_this.chart.resize();
				}
			},
			update(zztEchast) {
				let _this=this 
				const echarts = require('@/static/echarts.min1.js');
				if (zztEchast) {
					const option = {
						grid: {
							left: 30,
							right: 10,
							top: 20,
							bottom: 30,
							containLabel: false,
						},
						xAxis: {
							type: 'category',
							data: zztEchast.keys,
							boundaryGap: true,
							axisLabel: {
								interval: 0,
								fontSize: 9,
							},
						},
						yAxis: {
							show: true,
							type: 'value',
							name: '',
							splitLine: { //网格线
								lineStyle: {
									type: 'dashed' //设置网格线类型 dotted:虚线   solid:实线
								},
								show: true //隐藏或显示
							},
							axisLine: {
								lineStyle: {
									type: 'solid',
									width: '1', //坐标线的宽度
									fontSize: 9
								}
							},
							axisLabel: {
								textStyle: {
									fontSize: 9
								}
							}
						},
						series: [{
								data: zztEchast.values,
								type: 'bar',
								showBackground: false,
								barWidth: 15, //柱图宽度
								itemStyle: {
									normal: {
										label: {
											show: true, //开启显示
											position: 'top', //在上方显示
											textStyle: { //数值样式
												color: 'black',
												fontSize: 12,
												color: "#37b3f9" 
											}
										},
										color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
											offset: 0,
											color: "#37b3f9" // 0% 处的颜色
										}, {
											offset: 0.6,
											color: "#37b3f9" // 60% 处的颜色
										}, {
											offset: 1,
											color: "#37b3f9" // 100% 处的颜色
										}], false)
									},
									
								},
							}
						],
						legend: {
							show: false
						},
					}
					this.chart.setOption(option);
					
				//每个柱子的点击事件 重点
				 this.chart.on('click', function(params) {
					 setTimeout(()=>{
						_this.ownerInstance.callMethod('onViewClick', params.data.id)
					 },100);
				 })
				}
			},
            //调用 service 层的方法 重点
			onClick(event, ownerInstance) {
				this.ownerInstance = ownerInstance;
			}
		}
	}
</script>

总结:js 中传值的方法最主要的已经备注,onClickthis.chart.on('click', function(params)onViewClick 这三个方法

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值