vue echarts tooltip动态绑定模板,并且处理vue事件绑定
先上代码:
tooltip: {
// 这里是车辆icon
show: true,
// trigger: "item",
// backgroundColor: "transparent",
appendToBody: true,
textStyle: {
color: "#ffffff" //设置文字颜色
},
formatter: (params) => {
const TruckTooltip = Vue.extend(trucktooltipVue);
const component = new TruckTooltip({
propsData: { carData: params.data }
});
const vm = component.$mount();
// 监听自定义事件--重要
vm.$on('showDialog', (data) => {
this.showDialog(data); // 调用外部的方法
});
return vm.$el.outerHTML; // 获取组件的 HTML
// return formatHtml(params.data)
},
},
这里自定义监听子组件,trucktooltipVue里面使用this.$emit('showDialog', this.carData.extraInfo.item.shareUrl) 来触发父组件的方法
这里的子组件,因为 tooltip 的内容是以字符串形式返回的,且 ECharts 不会自动处理 Vue 的事件绑定,所以要绑定到window对象上