echarts 之 formatter 点击事件(Vue)

echarts中 formatrer 添加 onclick 事件
此次开发过程中遇到的一个问题,做个记录,便于以后查看;
需求:点击查看,携带必要的参,渲染该省份地图;


mounted钩子中挂载 查看 的方法;
echarts 官方地址:https://echarts.apache.org/zh/option.html#tooltip.formatte

mounted() {
	let _this = this;
	window.goto_province = function(name, code, level,) {
		console.log(11111111111111111111111111111111)
		console.log(name, code, level, );
		// _this.$parent.changeTemp(0);
		_this.toPreWeb(name, code, level)
		if (level == '2') {
			// 重新加载数据,渲染省份地图
			_this.provinceName = String(name);
			_this.orgLevel = level;
			_this.org_code = code;
			_this.curr += 1
			_this.sendMessage() // 传递省份名称至父组件
			_this.$parent.initAllData(code, level, name) // 调用父组件方法
		} else {
			// To next web;
			var param = [];
				param[0] = name;
				param[1] = code;
				param[2] = level;
			Emp.execute("gotoProvince(" + JSON.stringify(param) + ")")
		}
	}
},

初始化 echarts 图表
通过tooltips添加点击事件,首先修改tooltips中的 triggerOn,然后在tooltips里面添加formatter方法。

initEcharts(mapData, mapJson = '', mapType = 'china') {
	let _this = this;
	let option = {
		tooltip: {
			trigger: 'item',
			triggerOn: 'click',
			formatter: function(params) {
				console.log(222222222222)
				console.log(params)
				_this.$parent.initQst(params.data.code, params.data.level)
				_this.toPreWeb(params.data.name, params.data.code, params.data.level)
				if (params.data == undefined) return;
				if (params.data.level == '2') {
					return `<div style="z-index: 999">
                                    <div style="display: flex; justify-content: space-between">中国&emsp;
                                    <button style="pointer-events: all; background-color: #00c685; border: none"
                                    οnclick="goto_province('${params.data.name}','${params.data.code}','${params.data.level}',)">查看></button></div><br>
                                    ${params.name + '&nbsp;&nbsp;&nbsp;&nbsp;' + params.value}
                                </div>`
				}
				confine: true,
				// enterable: true,
				// alwaysShowContent: false,
				position: function(point) {
					return [point[0] + 2, point[1] + 2];
				}
			}
		}
	}
}


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值