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;
第六步:检验同步效果
简单拖拉即可得到如下仪表板,大家可以根据实际需要调整美化。
领取专属 10元无门槛券
私享最新 技术干货