在MSTR中使用ECharts作为VI模板（1）-- 创建第一个ECharts的VI模板
一不小心竟然把自己写的文章给改了，我晕啊。只能重写。。。。
MSTR（MicroStrategy）是一个BI的工具，其默认的VI（视觉效果模板）很有限。官方推荐使用D3.js虽然强大，可实在很复杂，对于JS苦手的我确实很难弄。好在ECharts可以集成其中，要知道ECharts的便捷性对于D3.js来说不是一个数量级的。
本篇从一个简单的示例入手，演示如何在MSTR中使用ECharts。
本篇内容包括：
- 创建VI并引入ECharts
- 创建ECharts图表
- 数据绑定
- 代码整理与优化
- 最终效果
1. 获取筛选后的数据
1.1 准备工作
正式开始前，我们需要准备几样东西：
- D3.js
这个是D3.js的标准库，我们其实用它来建一个Div作为ECharts的容器，地址为https://d3js.org/d3.v4.min.js这个是V4版本的，不过我习惯使用V3版本的，略微有一些不同，地址为https://d3js.org/d3.v4.min.js - ECharts.js
这个不用说了，百度ECharts的库，地址为http://echarts.baidu.com/dist/echarts.min.js
当然还可以有其他的库，比如Jquery等等。可以都下载下来。然后放在MSTR目录下的Tomcat中MicroStrategy的Plugins目录下。我就直接丢在这个根目录了。
1.2 创建VI
我是在Web版，利用Visualization Builder来创建的。也可以参照文档，使用它规定的格式直接创建那些Js，XML文件。当然VI Builder要省力很多。
1.3 引用库
在VI Builder中选择Configuration标签，然后在下方输入库的地址，点击“Add Library”按钮即可。
然后取一个名字，这个名字将用在Dashboard中作为识别用。
最后先保存一下，保存的时候系统会提示保存在哪个文件夹，取一个文件夹名称吧。因为VI是一个按照指定方式存储的文件夹和文件组成的，所以需要给一个文件夹的名称。在以后有空的时候再来讲这个文件夹的构成。
由于我把几个库直接放在了Plugins更目录下，所以引用的代码为：
../plugins/d3.v3.min.js ../plugins/echarts.min.js
至于这个Plugins，是在MSTR下自带的Tomcat目录下的webapp下的MicroStrategy下的Plugins。很复杂，试着找找。
2. 创建ECharts图表
2.1 创建第一个ECharts图表
作为测试，我用了ECharts给的最简单的柱形图的示例。代码来自于这里。我们稍微做一下改动，作为ECharts容器的Div我们使用D3.js来创建。代码直接写在Plot Code里面即可。
代码如下：
//Div名称和高宽配置
var divName="main" + parseInt(Math.random()*100000000);
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
2.2 效果演示
正常情况下（至少是按照官方说明的情况下），当代码写好，直接点击Apply按钮或者保存一下，就可以直接看到效果。但是我这里怎么都不行，D3.js代码倒是可以，ECharts总是提示找不到对象。
无奈只能创建一个Dashboard看效果，这里倒是显示正常。顺便说一下，我这个MSTR的版本是10.0.6。还有个问题就是每次VI代码更新，需要清空浏览器缓存才能看到最新版。查看了VI的JS源代码，它默认是去读缓存的，但是改了之后没啥效果，如果有解决的朋友也跟我说一下。
题外话说多了，正常情况下，你可以看见这样一张图。
3 数据绑定
3.1 数据绑定接口
刚才做好的图表是死的，和数据一点关系没有，因而需要绑定一个数据接口。获取数据的接口代码如下，共有两种形式，树形结构和表结构，返回的都是Json数据。
//获取树形结构
var rawData = this.dataInterface.getRawData(
mstrmojo.models.template.DataInterface.ENUM_RAW_DATA_FORMAT.TREE);
//获取表结构
var rawData = this.dataInterface.getRawData(
mstrmojo.models.template.DataInterface.ENUM_RAW_DATA_FORMAT.ROWS_ADV);
我这里使用了第二种表结构做示例，两者略有不同
3.2 绑定数据
接下去的代码很简单了，数据给了rawData变量，只要按照ECharts所需要的数据要求整理一下即可。获取数据及图表设置代码如下：
//获取数据
var rawData = this.dataInterface.getRawData(
mstrmojo.models.template.DataInterface.ENUM_RAW_DATA_FORMAT.ROWS_ADV);
var xTitle=[];
var xValue=[];
for(i=0;i < rawData.length;i++){
xTitle[i]=rawData[i].headers[0]["name"];
xValue[i]=rawData[i].values[0]["rv"];
}
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: xTitle
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: xValue
}]
};
这时候可以尝试再到Dashboard里面去添加一个数据集看看效果，正常情况下是可行的。
4 代码整理与优化
最后我们将代码整理并优化一下，使图表自适应。最终代码如下：
//Div名称和高宽配置
var divName="main" + parseInt(Math.random()*100000000);
var margin = {
top : 10,
right : 10,
bottom : 30,
left : 30
}, width = parseInt(this.width, 10) - margin.left- margin.right,
height = parseInt(this.height, 10) - margin.top - margin.bottom;
//删除已有的图形
if(this.domNode.childNodes.length>=1){
for(i=0;i< this.domNode.childNodes.length;i++){
this.domNode.removeChild(this.domNode.childNodes[i]);}
}
//使用D3创建一段Div
d3.select(this.domNode).append("div")
.attr("ID",divName)
.style("height",height + "px")
.style("width",width + "px");
//初始化Echarts对象
var myChart = echarts.init(document.getElementById(divName));
//获取数据
var rawData = this.dataInterface.getRawData(
mstrmojo.models.template.DataInterface.ENUM_RAW_DATA_FORMAT.ROWS_ADV);
var xTitle=[];
var xValue=[];
for(i=0;i < rawData.length;i++){
xTitle[i]=rawData[i].headers[0]["name"];
xValue[i]=rawData[i].values[0]["rv"];
}
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: xTitle
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: xValue
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
5 最终效果
参考
MSTR官方文档 最近这个文档经常更新，我写这篇文章的时候，文档已经和我之前看到的不一样了，越来越完善了，但是地址也可能会变。