美文网首页数据分析
Tableau在Vue项目中的运用

Tableau在Vue项目中的运用

作者: 夜半暖人心 | 来源:发表于2019-03-13 00:34 被阅读0次

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/

相关文章

网友评论

    本文标题:Tableau在Vue项目中的运用

    本文链接:https://www.haomeiwen.com/subject/krdapqtx.html