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;

第六步：检验同步效果

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