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">中国 
<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 + ' ' + params.value}
</div>`
}
confine: true,
// enterable: true,
// alwaysShowContent: false,
position: function(point) {
return [point[0] + 2, point[1] + 2];
}
}
}
}
}