Tableau中嵌入ECharts并传递参数

ECharts是一款由百度前端技术部基于Javascript开发的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。

Tableau的可视化虽然做得很好,但是在有些图形,比如上面的仪表盘就没有支撑好。

于是我就想着如果能将Tableau和ECharts结合起来用就好了,但是在网上查了很多,Tableau对其他语言的支持并不是很好。不过仪表板中可以加入网页,我们可以考虑在页面级别上融合,当然仅仅这样是不够的,我们需要把Tableau和ECharts的动作统一起来,这时可以通过将Tableau的参数放置在网页URL后面实现,下面做一个简单的实例。

第一步:模拟数据

这里假设是一家公司各月某关键KPI的累计完成情况:

年月 累计完成率

201703 0.27

201706 0.56

201709 0.88

第二步:搭建环境

这里以Tomcat作为web应用服务器(大家网上搜索下,这个不是本篇文章重点)

第三步:下载ECharts

到官网下载ECharts,这里先以一个仪表盘示例,大家可以根据自己需求,使仪表盘多样化,ECharts关键代码如下:

option = {

backgroundColor: '#1b1b1b',

tooltip : {

formatter: "

"

},

toolbox: {

show : true,

feature : {

mark : ,

restore : ,

saveAsImage :

}

},

series : [

{

name:'速度',

type:'gauge',

min:0,

max:120,

splitNumber:12,

radius: '50%',

axisLine: { // 坐标轴线

lineStyle: { // 属性lineStyle控制线条样式

color: [[0.09, 'lime'],[0.82, '#1e90ff'],[1, '#ff4500']],

width: 3,

shadowColor : '#fff', //默认透明

shadowBlur: 10

}

},

axisLabel: { // 坐标轴小标记

textStyle: { // 属性lineStyle控制线条样式

fontWeight: 'bolder',

color: '#fff',

shadowColor : '#fff', //默认透明

shadowBlur: 10

}

},

axisTick: { // 坐标轴小标记

length :15, // 属性length控制线长

lineStyle: { // 属性lineStyle控制线条样式

color: 'auto',

shadowColor : '#fff', //默认透明

shadowBlur: 10

}

},

splitLine: { // 分隔线

length :25, // 属性length控制线长

lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式

width:3,

color: '#fff',

shadowColor : '#fff', //默认透明

shadowBlur: 10

}

},

pointer: { // 分隔线

shadowColor : '#fff', //默认透明

shadowBlur: 5

},

title : {

textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE

fontWeight: 'bolder',

fontSize: 20,

fontStyle: 'italic',

color: '#fff',

shadowColor : '#fff', //默认透明

shadowBlur: 10

}

},

detail : {

formatter: function (value) {

value = value + '%';

return value;

},

backgroundColor: 'rgba(30,144,255,0.8)',

borderWidth: 1,

borderColor: '#fff',

shadowColor : '#fff', //默认透明

shadowBlur: 5,

offsetCenter: [0, '50%'], // x, y,单位px

textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE

fontWeight: 'bolder',

color: '#fff'

}

},

data:[]

},

]

};

myChart.setOption(option);

此时,生成的图形是这样的:

第四步:网页嵌入Tableau

在仪表板中,将对象里面的网页图标拖到工作区,输入对应URL,我的是:http://127.0.0.1:8080/ECharts_to_Tableau.html,效果如下:

第五步:添加参数,同步Tableau与ECharts的动作

仅仅把ECharts放到Tableau中是不够的,还需要把两者的数据交互动作同步起来。首先在Tableau中添加参数,如下图所示:

然后创建与参数对应的累计完成率字段

重新编辑URL,将参数从Tableau传递到ECharts,http://127.0.0.1:8080/ECharts_to_Tableau.html?stat_mo=

在ECharts获取参数:

function GetQueryString(name) {

var reg = new RegExp("(^&)"+ name +"=([^&]*)(&$)");

if(r!=null)return unescape(r[2]);

return null;

}

var stat_mo=GetQueryString("stat_mo");

为了实现同步选择效果,ECharts需要动态读取数据。这里为了简单起见,我们将数据以json格式存放在ECharts中,方便读取,实际生产环境中,一般需要动态读取数据库中的数据。

var dynData={"201703":0.27,"201706":0.56,"201709":0.88};

ECharts获取Tableau参数选择后,显示对应结果:

option.series[0].data[0].value = dynData[stat_mo]*100;

第六步:检验同步效果

简单拖拉即可得到如下仪表板,大家可以根据实际需要调整美化。

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180124G03ALR00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券