【Tableau】之URL_ACTION事件
<template><div id="vizContainer" ref="vizContainer" style="width:800px; height:700px;"></div></template><script>import 'tableau'export default {data() {return {viz: null}
·
vue项目中嵌入tableau可视化报表 之点击报表中的链接
<template>
<div id="vizContainer" ref="vizContainer" style="width:800px; height:700px;"></div>
</template>
<script>
import 'tableau'
export default {
data() {
return {
viz: null
}
},
create() {
this.initViz()
},
methods: {
initViz() {
let options = {
hideTabs: true,
hideToolbar: true,
disableUrlActionsPopups: true,
onFirstInteractive: () => {
// 添加URL_ACTION事件
this.viz.addEventListener(
tableau.TableauEventName.URL_ACTION,
this.urlActionEventHandler
)
}
}
let vizContainer = document.getElementById("vizContainer")
// let vizContainer = this.$refs.vizContainer
let url = "https://YOUR-SERVER/views/YOUR-VISUALIZATION"
// 或者url从后端获取
this.viz = new tableau.Viz(vizContainer, url, options)
// 创建一个viz对象并嵌入到div中
},
urlActionEventHandler(event) {
console.log("URL: ", event.getUrl())
// 得到url字符串
console.log('Target: ', event.getTarget())
// 得到一串标识符,类似这样: _598854375796357263
}
}
}
</script>
更多推荐
所有评论(0)