Tableau在Vue项目中的运用
| NO. | 步骤描述 |
|---|---|
| 1 | 在全局导入tableau的js包 |
| 2 | 创建要插入tableau可视化元素的容器 |
| 3 | 在Vue的mounted生命周期中（这个时候才能获取到Dom元素）写js配置 |
//示例代码
<template>
<!-- 创建要插入Tableau可视化元素的容器 -->
<div ref="container" style="width:700px; height:1000px;"></div>
</template>
<script>
export default {
mounted() {
// 获取容器元素
let containerDiv = this.$refs.container;
// 数据服务器路径
// let url = "http://public.tableau.com/views/RegionalSampleWorkbook/Storms";
let url = "https://public.tableau.com/views/WorldIndicators/GDPpercapita";
// 配置选项
let options = {
//隐藏tab栏
hideTabs: true,
//加载后执行的回调函数
onFirstInteractive: function() {
console.log("Run this code when the viz has finished loading.");
},
//offsetWidth/offsetHeight 获取的是盒子的真实宽高（width/height+border+padding）
//设置图表模块和容器等宽
width: containerDiv.offsetWidth,
//设置图标模块和容器等高
height: containerDiv.offsetHeight
};
// 实例化一个Talleau视图对象,并传入上述三个参数
let view = new tableau.Viz(containerDiv, url, options);
}
};
</script>
<style lang="scss">
</style>
本文同步发表在我的个人博客：https://www.lubaojun.com/
