在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官方文档最近这个文档经常更新，我写这篇文章的时候，文档已经和我之前看到的不一样了，越来越完善了，但是地址也可能会变。