Tableau在Vue项目中的运用

NO.	步骤描述
1	在全局导入tableau的js包
2	创建要插入tableau可视化元素的容器
3	在Vue的mounted生命周期中（这个时候才能获取到Dom元素）写js配置

image

//示例代码
<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/