（2）基于Echarts插件的多维数据可视化设计和实现

前言：本文针对多维离散数据和多维连续数据，分别构建多维可视化图表。由于离散和连续图表展示的效果差别大，故多维图表的可视化，分为两大部分进行设计和实现。

总体设计思想：主要是采用类似树形图结合柱状图、线图、散点图、面积图。树形图主要展示的是维度的值，和各个维度值之间的关系。如图（1）所示。第一条数据：[“企业”, “个人政府征订”,”奉化站”,”2013-07”, 6500]，在图表中与这条数据相关的内容，除了第一根蓝色方形，还包括红线相连的名称(企业，个人政府征订，奉化站)。如果把图中所有的名称相互连接起来，像图中红线一样，是不是感觉像一棵树？特别要注意的是（企业-个人政府征订-奉化站） 可以看成一个分组，在这个分组里可能有不止一个值，它分布着多条数据。

图1：多维数据展示
总体实现方式：要实现如图1所示的效果，可以采用Echarts插件的各种组件经过一系列的计算和整合，当然其中肯定涉及插件若干接口的改造和新增。最终生成的图表才能展示出我们需要的效果。

多维离散型数据的设计思路：

多维离散型数据的定义：所有的维度都是离散的，不存在任何连续型维度。对于多维离散型数据，由于在每一条数据相互之间在轴上并没直接关系，关系同属于一个分组。对于同一个度量，各个分组展示出来的图表类型应该是一致的。（特殊情况，对于三个维度的数据，类目气泡图也是可以展示的）

基于Echarts插件的多维离散型数据可视化实现
一、问题阐释
1. 基于Echarts插件，要实现多维数据可视化，是否有官方接口，如果有官方接口不就轻松搞定？
通过查看Echarts的文档，发现确实有一个图表类型，可以展示多维数据，如图2所示，但是这种展示方式，貌似并不能适合所有多维数据，而且可视化的效果有点差强人意。

图2 Echarts的多维数据展示
2. 如果要实现我们设计的树形加普通图表的展示方式，如何实现树形？如何进行分组？每一个分组高和宽占用整个图表高和宽多少？每一个分组由于是同一个度量，是不是应该共享同一个度量轴？
对于这些问题，暂时不做回答。接下来，我会手把手教大家如何解决这些问题，最终实现整个多维图表。

二 多维数据的结构
要实现整个设计，一共需要三个数据结果，我把它们取名:data，measure, dimension。具体的数据例子，如下所示，data：是一个二级数组[[d1,..,dn,m1,..,mn],…,[d1,..,dn,m1,..,mn]] (dn：表示第n个维度的信息，而mn表示n个度量的信息)，它存储着图表要显示的多维数据详情，每一条数据时一个数组，数组的前几位是维度的值，后几位是度量的值。measure：是一个数组，它存储着度量字段的相关信息，数组内每条数据时一个js对象，对象的key属性，是度量的关键字，用于区分其他度量；alias属性时度量的别名，用于显示度量的中文名称；state属性表示度量所对应的图表类型。dimension ：也是一个数组，构造跟measure差不多，公共的属性表示的含义和measure是一样的，continuity字段表示的是维度的连续性，’11’表示是连续的。colType：表示维度的数据类型。如果是离散的，维度的数据类型一般都是字符串型的。

var data = [
    [
        "企业",
        "余姚站",
        "2013-05",
        0.015
    ],  
    ...
    [
        "普通客户",
        "仓基站",
        "2013-01",
        0.019
    ]
];
var dimension = [
    {
        "key":"cust_type",       
        "alias":"cust_type",
        "continuity":"00",
        "colType":"string"
    },
    ....
    {
        "key":"Month",     
        "alias":"Month", 
        "continuity":"11",
        "colType":"date"
    }
];
var measure =      
[
    {
        "key":"huan_bi",     
        "alias":"总和_huan_bi",            
        "state":"bar"
    },
    ...
     {
        "key":"tong_bi",
        "alias":"总和_tong_bi",                  
        "state":"bar"
    }
];

三、Echarts接口的扩展和新增

为了解决（1）提出的问题，在Echarts的接口一共需要扩展一个接口，新增2个接口。
扩展的接口主要是：
Axis.prototype.dataToCoord;该接口主要负责计算名称或者叫标签的坐标值；在Echarts中标签值叫label，而字符串的label一般用category离散的轴表示，每一个label之间的距离是等距的。这个与我们要求是有出入的，因为在多维图表中，每一个label之间并不一定是等距的，所以我们要定距给其一个值，使之满足我们的要求。而这个值的计算是在Echarts插件外部进行的，由函数calLabelProperty完成。

calLabelProperty函数的功能，主要是计算跟label定位和显示相关的三个属性值，line：表示两个label之间的分割线；area表示每条label信息在图表中所占的宽度；curBit表示每条label在图表上的位置。代码中normalizeData变量保存着每一个label在一条轴上的比率值，介于0和1之间。

 dataToCoord: function (data, clamp) {
                var extent = this._extent;
                var scale = this.scale;
                var normalizeData = this.model.get('normalizeData');
                //沈才良 @face
                if (normalizeData) {
                    data = normalizeData[data];
                } else {
                    data = scale.normalize(data);
                }

                if (this.onBand && scale.type === 'ordinal') {
                    extent = extent.slice();
                    fixExtentWithBands(extent, scale.count());
                }

                return linearMap(data, normalizedExtent, extent, clamp);
            },

calLabelProperty: function(chartLabelData, isContinue) {
    var categoryLabel = [];
    var sum = 0, labelArray, percentArray, areaArray;
    var curSum = 0, curBit = 0;
    var curBitArray = [];
    var classNum = chartLabelData.length;

    for (var i = 0; i < classNum; i++) {                
        //如果图表是离散的，则是label的总和
        sum = isContinue ? chartLabelData[classNum - 1].labelData.length : chartLabelData[i].sum;
        //当前的统计和
        curSum = 0;
        categoryLabel[i] = {};
        /*
           labelArray: 保存每一个维度上的label
           lineArray: 保存各个label之间的分隔线的位置
           curBitArray: 保存各个label的位置
           areaArray: 保存各个label在图表上所占的区域宽
        */
        labelArray = categoryLabel[i].label = [];
        lineArray = categoryLabel[i].line = [];
        curBitArray = categoryLabel[i].percent = [];
        areaArray = categoryLabel[i].area = [];
        //求出每一个类别子项的显示位置的值
        for(var j = 0, dataItem; j < chartLabelData[i].labelData.length; j++) {
            dataItem = chartLabelData[i].labelData[j];  
            //连续的时候，离散的最后一个维度计算curSum等于 j + 1               
            if (isContinue && i == (classNum - 1)) {
                curSum = j + 1;
            } else {
                curSum += dataItem.count;
            }   
             //删除label里面的换行符号
            labelArray.push((dataItem.labelName + '').replace(/\r\n/g, ' '));
            lineArray.push(curSum / sum);
        }
        //每一个维度的第一个分组信息计算，跟其他分组不一样
        curBitArray[0] = lineArray[0] / 2;
        areaArray[0] = lineArray[0];
        for ( j = 1; j < lineArray.length; j++) {
            areaArray.push(lineArray[j] - lineArray[j-1]);
            curBitArray.push(lineArray[j - 1] + (lineArray[j] - lineArray[j - 1]) / 2);
        }
    }
    return categoryLabel;
},

新增的接口主要是：label之间的分割线、悬浮label所占区域时候区域背景色改变的变化接口。
新增接口的定义在AxisBuilder构造函数所属区域中builders.axisLabel函数中。

   //添加标签的hover事件
    buildHoverRect({
        group: this.group, 
        pos: pos, 
        textEl: textEl, 
        axisModel: axisModel, 
        contentBit: areaData[index]
    });
    /**
      * 当用户悬浮在label上面
      * 则显示整个label分组所占的空间
      * 由于zrender默认的hide和show函数
      * 当数据超过100多时，性能差，故采用
      * 设置opacity达到显示和隐藏的效果
    */
    textEl.on('mouseover', function (event) {
        this.hoverRect.setStyle('opacity', 0.24);
    });
    /**
       * opacity = 0表示隐藏该label有颜色背景
       * textEl:表示每一个label在图表上的实体
    */
    textEl.on('mouseout', function (event) {
        this.hoverRect.setStyle('opacity', 0);
    });
    /**
        * 生成hover时候出现的矩形和背景
        * @param {Object} params: userful params to build hover rect
        * @param {Number} contentBit: 每一个label所在的区域长度，[0,1]之间
        * @param {Array.<Number>} pos: label的坐标值,二维的
    */
    function buildHoverRect(params) {   
        var axisModel = params.axisModel;
        var coordinateRect = axisModel.coordinateSystem && axisModel.coordinateSystem._rect;
        var extent = axisModel.axis.getExtent();     
        var axisWidth = extent[1] - extent[0];  
        //得到显示区域的宽度大小       
        var contentWidth = Math.ceil(axisWidth * params.contentBit);
        var rect = new graphic.Rect({
            shape: {
                x: params.pos[0] + coordinateRect.x - contentWidth / 2,
                y: params.pos[1] + coordinateRect.y - 7, 
                height: 28,
                width: contentWidth
            },
            z: 2,
            style: {
                 fill:'green',
                 opacity: 0,
                 lineWidth: 1
            },
            silent: false
        });
        //添加到group中,以便echarts统一绘制
        params.group.add(rect);
        //方便隐藏和显示
        params.textEl.hoverRect = rect;
    }

第二个重要的接口新增是buildSplitLine函数，主要负责构建label之间的分隔线。具体代码和注释如下所示：

/**
  * 生成label之间的分割线，方便用户识别不同的label分组
   * {Array} group：分组组件，生成的line只有放入这个组件中，才能统一绘制
   * {Object} axisModel: 坐标轴的model模型，主要保存与坐标轴相关的信息
*/
function buildSplitLine(group, axisModel) {
    var axisType = axisModel.mainType;
    var show = axisModel.get('classSplitLine.show');
    if (axisType != "singleAxis" || show !== true) {
        return;
    }
    //获取分割线的所需的数据，由外部接口calLabelProperty计算出
    var data = axisModel.get('classSplitLine.data');
    var coordinateRect = axisModel.coordinateSystem && axisModel.coordinateSystem._rect;
    var extent = axisModel.axis.getExtent();     
    var axisWidth = extent[1] - extent[0];  
    var point1 = [];
    var point2 = [];
    for (var i = 0 ; i < data.length - 1; i++) {
        //求出分隔线两个端点的坐标值
        point1[0] = data[i] * axisWidth + coordinateRect.x;
        point1[1] = coordinateRect.y;
        point2[0] = data[i] * axisWidth + coordinateRect.x;
        point2[1] = coordinateRect.y + 26;  
        var line = new graphic.Line(graphic.subPixelOptimizeLine({
            shape: {
                x1: point1[0],
                y1: point1[1],
                x2: point2[0],
                y2: point2[1]
            },
            style: {
                 stroke: "#d3d3d3",
                 color: '#666',
                // lineDash: [4, 4],
                 opacity: 0.5,
                 lineWidth: 1
            },
            z2: 3,
            silent: true
        }));
        group.add(line);
    }
}

这几个接口具体定义的位置，请参考我详细的源码。
源码下载地址：http://download.csdn.net/download/mulumeng981/9985030 (基于Echarts最新版3.7.1)

如果你注意到一个不准确或似乎不太正确的地方，请让我知道。谢谢！