先上代码:
tooltip: {// 这里是车辆iconshow: 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对象上