vcharts中(echarts也一樣) 點選地圖區域觸發彈窗事件 (tooltip點選顯示)
阿新 • • 發佈:2022-03-01
<ve-map :legend-visible="false" :judge-width="true" ref="VeMapRef" width="700px" :data="chartData" :tooltip="chartTooltip" :events="chartEvents" //點選事件的 後面我去掉了 :settings="chartSettings" ></ve-map>
this.chartTooltip = { trigger: "item", triggerOn: "click",// triggerOn 一定要改為 “click”。預設值是下面兩個,只觸發則設定哪個都可以,也可以不設定此項,但是滑鼠移走的話,這個提示框就消失了,所以改成 “click”, 滑鼠移走不會消失 enterable: true,//enterable 要設定為 true,才能使滑鼠進入提示框,才可以為提示框新增點選事件。 extraCssText: "z-index: 99;max-width: 100px;white-space:pre-wrap", formatter: function (params) { return ( params.name + "</br>" + `<div style='cursor:pointer;' onclick="open_pcDisplay(0,'${params.name}')">檢視XXX</div>` + `<div style='cursor:pointer;' onclick="open_pcDisplay(1,'${params.name}')">檢視XXX</div>` ); }, }
mounted() {
let that = this;
window.open_pcDisplay = function (type, city = null) {
that.$router.push({
path: "/pcDisplay",
query: {
type: type,
city: city,
},
});
};
},
參考連結:https://www.cnblogs.com/shiyi-iiii/p/15125039.html