VUE2.0+Element-UI+Echarts封装的组件

本文用Vue2.0+elementUI的panel组件和table组件+echarts的柱状图和折线图实现对结果的展示，实现了表格和图之间的切换和图和表之间的转置。

-html

<div class="resultDiv">
        <div id="panels">
            <el-collapse>
                <el-collapse-item v-for="item in indicators">
                <template slot="title">
                    <span class='resulticon'>
                        {{item.indicatorName}} 
                        <a href="#" class="el-icon-upload2" :class="item.indicatorName" download="somedata.xls" @click="return exportExcel(item.indicatorName)" 
                            data-command="show" title="保存为表"></a>
                        <a href="#" class="glyphicon glyphicon-repeat" aria-hidden="true" @click="convert" data-command="show" title="图表切换"></a>
                        <a href="#" class="glyphicon glyphicon-transfer" aria-hidden="true" @click="transpose" data-command="show" title="行列转置"></a>
                    </span>
                </template>
                <template>
                    <div v-show="tableAndMap==3?true:tableAndMap==1?true:false"  :id="item.indicatorName"></div>
                </template>
                <template v-if="tableAndMap==3?true:tableAndMap==2?true:false">
                    <el-table :data="item.tableData" max-height="300" stripe border fix style="width: 100%">
                        <el-table-column v-for="(column,index) in item.columns" :prop="column" :fixed="index==0" :label="column" min-width="150"></el-table-column>
                    </el-table>
                </template>
                </el-collapse-item>
            </el-collapse>
        </div>    
    </div>

• js，panel组件的代码

var panelsVue = new Vue({
    el : "#panels",
    props : ["initData","indicators","mapOptions"],
    data : {
        rowOrColumn : false, //行列转换
        tableOrMap : true, //表和图切换
        tableAndMap : 3, //表和图同时显示
        mapInitOption : {
                title: {
                    text: ''
                },
                tooltip : {
                    trigger: 'axis'
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        boundaryGap : false
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        axisLabel : {
                            formatter: '{value}'
                        }
                    }
                ]
            } //echarts 初始化参数
    },
    methods:{
        table : function(ev){
            if(this.rowOrColumn){
                this.indicators=this.listToRowObject(this.initData);
                this.mapOptions= this.listToColumnMap(this.initData);
                this.rowOrColumn=false;
            }else{
                this.indicators=this.listToColumnObject(this.initData);
                this.mapOptions= this.listToRowMap(this.initData);
                this.rowOrColumn=true;
            }
            for(var i=0;i<this.mapOptions.length;i++){
                var indicatorName= this.mapOptions[i].title.text;
                var dom = document.getElementById([indicatorName])
                var heigth = $(dom).siblings('div').height()*1.5;
                var width = $(dom).siblings('div').width();
                $(dom).css({
                    height:heigth,
                    width:width
                });
                var myChart= echarts.init(document.getElementById([indicatorName]),'macarons');
                myChart.setOption(this.mapOptions[i]);
            }
            ev.stopPropagation();
        },
        listToRowObject :function (ListAndList){
            var indicatorNames=[];
            var tableDatas=[];
            var columns = [];
            var options = [];
            ListAndList = ListAndList.indicatorResult;
            for(var i=0;ivar objects=[];
                var column =[];
                var indicatorName = ListAndList.indicatorNames[i];
                for(var yIndex in ListAndList[indicatorName]){
                    var obj = {};
                    obj[indicatorName]=ListAndList.colKeys[yIndex];
                    for(var xIndex in ListAndList[indicatorName][yIndex]){
                        obj[ListAndList.rowKeys[xIndex]]=ListAndList[indicatorName][yIndex][xIndex];
                    }
                    objects.push(obj);
                }
                indicatorNames.push(indicatorName);
                column.push(indicatorName);
                column=column.concat(ListAndList.rowKeys);
                var indicator={};
                indicator[indicatorName]=objects;
                columns.push(column);
                tableDatas.push(indicator);
            }
            for(var j = 0; jvar indicatorObj = {};
                indicatorObj["tableData"]=tableDatas[j][indicatorNames[j]];
                indicatorObj["columns"] = columns[j];
                indicatorObj["indicatorName"] = indicatorNames[j];
                options.push(indicatorObj);
            }
            return options;
            },
            listToColumnObject :function (ListAndList) {
                var options = [];
                var columns = [];
                var indicatorNames = [];
                var indicatorMap = {};
                ListAndList = ListAndList.indicatorResult;
                for (var i = 0; i < ListAndList.indicatorNames.length; i++) {
                    var column = [];
                    var objs = [];
                    var indicatorName = ListAndList.indicatorNames[i];
                    indicatorNames.push(indicatorName);
                    column.push(indicatorName);
                    column = column.concat(ListAndList.colKeys);
                    columns.push(column);
                    var indicatorData = [];
                    indicatorData.push(ListAndList.rowKeys);
                    indicatorData = indicatorData.concat(ListAndList[indicatorName]);
                    for (var k = 0; k < indicatorData[0].length; k++) {
                        var aRow = {};
                        for (var j = 0; j < indicatorData.length; j++) {
                            aRow[column[j]] = indicatorData[j][k];
                        }
                        objs.push(aRow);
                    }
                    indicatorMap[indicatorName] = objs;
                }
                for (var j = 0; j < indicatorNames.length; j++) {
                    var indicatorObj = {};
                    indicatorObj["tableData"] = indicatorMap[indicatorNames[j]];
                    indicatorObj["columns"] = columns[j];
                    indicatorObj["indicatorName"] = indicatorNames[j];
                    options.push(indicatorObj);
                }
                return options;
            },
            listToColumnMap: function(ListAndList){
                    ListAndList = ListAndList.indicatorResult;
                    var options=[];
                    for(var j = 0;jvar sigleOption ={};
                        sigleOption=JSON.parse(JSON.stringify(this.mapInitOption));//实现深复制
                        sigleOption.xAxis[0]["data"]=ListAndList.rowKeys;
                        var indicatorName = ListAndList.indicatorNames[j];
                        sigleOption["title"]["text"]=indicatorName;
                        var series =[];
                        for(var k=0;kvar sigleSerie={type:'line'};
                            sigleSerie["name"] = ListAndList.colKeys[k];
                            sigleSerie["data"] = ListAndList[indicatorName][k];
                            series.push(sigleSerie);
                        }
                        sigleOption["series"]=series;
                        options.push(sigleOption);
                    };
                    return options;
            },
            listToRowMap: function(ListAndList){
                    ListAndList = ListAndList.indicatorResult;
                    var options=[];
                    for(var j = 0;jvar sigleOption ={};
                        sigleOption=JSON.parse(JSON.stringify(this.mapInitOption));//实现深复制
                        sigleOption.xAxis[0]["data"]=ListAndList.colKeys;
                        var indicatorName = ListAndList.indicatorNames[j];
                        sigleOption["title"]["text"]=indicatorName;
                        var series =[];
                        for(var k=0;kvar sigleSerie={type:'line'};
                            var x= [];
                            for(var z = 0;z"name"] = ListAndList.rowKeys[k];
                            sigleSerie["data"] = x;
                            series.push(sigleSerie);
                        }
                        sigleOption["series"]=series;
                        options.push(sigleOption);
                    };
                    return options;
            },
            map : function(ev){
                if(this.tableAndMap==1){
                    this.tableAndMap=2;
                }else if(this.tableAndMap==2){
                    this.tableAndMap=3;
                }else{
                    this.tableAndMap=1;
                }
                ev.stopPropagation();
            },
            exportExcel : function(indicatorName,my){
                debugger;
                console.log(indicatorName);
                var listAndList = JSON.parse(JSON.stringify(this.initData.indicatorResult));
                var rowTd = listAndList.rowKeys;
                var excellData=[];
                rowTd.splice(0,0,indicatorName);
                excellData.push(rowTd);
                for(var i = 0;ivar rowTr = listAndList[indicatorName][i];
                    rowTr.splice(0,0,listAndList.colKeys[i]);
                    excellData.push(rowTr);
                }
                return ExcellentExport.excelByData($("."+indicatorName)[0], excellData, 'Sheet', 'download' + new Date().getTime() + '.xls');
            }
    },
    watch : {
        initData : function(newValue){
            this.indicators=this.listToRowObject(newValue);
        }
    },
    mounted : function(){
    }
});
Vue.set(panelsVue,'initData',ListAndList);

---

在使用上述组件过程中，发现当转置和表格切换之后里面全部都有变化，虽然可以做到单个panel组件自己实现转置和切换，但是发现如果数据太多会导致页面卡死，为了性能优化所以后来考虑采用多vue对象的形式（虽然我的思路是如果改变数据之后，vue将重新渲染html，导致页面卡死，但是后来仔细查资料之后，发现vue当数据改变之后会复用原来相同的html。但是由于时间的原因，也没试。大家可以考虑一下）
采用多vue对象的形式之后的页面

• html
  
• js,panel组件

var panelsVueArr = [];
var responseData;
function createHtml(respData){
    var indicatorResult = respData.indicatorResult; 
    var indicators = [];
    for(var j=0;jvar indicator = {};
        indicator["indicatorName"]=indicatorResult.indicatorNames[j];
        indicator["indicatorUnit"]=indicatorResult.indicatorUnits[j];
        indicator["rowKeys"]=indicatorResult.rowKeys;
        indicator["colKeys"]=indicatorResult.colKeys;
        indicator["indicatorData"]=indicatorResult[indicatorResult.indicatorNames[j]];
        indicators.push(indicator);
    }

    for(var i =0;ivar el = $("
");
        $(".resultDiv").append(el[0]); 
        var vueObj = new Vue({
            el : el[0],
            template : '
'+
            '
',
            props : ['item','mapOption'],
            data : {
                indicator : indicators[i],
                rowOrColumn : false, // 行列转换
                tableOrMap : true, // 表和图切换
                tableAndMap : true, // 表和图同时显示
                indexid : i,
                mapInitOption : {
                    title : {
                        text : '',
                        show : false
                    },
                    tooltip : {
                        trigger : 'item',
                        formatter: ''
                    },
                    legend : {
                        data : [],
                        right : 90, // 不要遮住右边的按钮
                        left : 85,
                        padding : 10
                    },
                    toolbox : {
                        show : true,
                        feature : {
                            mark : {
                                show : true
                            },
                            magicType : {
                                show : true,
                                type : ['line', 'bar']
                            },
                            restore : {
                                show : true
                            },
                            saveAsImage : {
                                show : true
                            }
                        }
                    },
                    grid : {
                        y : '',
                        y2 : '',
                        containLabel : true
                    },
                    calculable : true,
                    xAxis : [{
                            type : 'category',
                            boundaryGap : false,
                            axisLabel : {
                                interval : 0
                            //  rotate : 45
                            }
                        }
                    ],
                    yAxis : [{
                            type : 'value',
                            axisLabel : {
                                formatter : yAxisFormatter
                            }
                        }
                    ]
                } // echarts 初始化参数
            },
            methods : {
                transpose : function (ev) {
                    if (this.rowOrColumn) {
                        this.item = this.listToRowObject(this.indicator);
                        this.mapOption = this.listToRowMap(this.indicator);
                        this.rowOrColumn = false;
                    } else {
                        this.item = this.listToColumnObject(this.indicator);
                        this.mapOption = this.listToColumnMap(this.indicator);
                        this.rowOrColumn = true;
                    }
                        var indicatorName = this.mapOption.title.text;
                        var myChart = echarts.init(document.getElementById([indicatorName]),rmp_theme);
                        var grid = computerGrid(this.mapOption);
                        myChart.resize({
                            width : grid.chartWidth+"px",
                            height : grid.chartHeight+"px"
                        });
                        myChart.setOption(this.mapOption);
                    ev.stopPropagation();
                },
                listToColumnObject : function (ListAndList) {
                    var x_y = column.text+"\\"+row.text;
                    var itemTable ={};
                    var columnR = [];
                    var tableData=[];
                    for (var yIndex in ListAndList.indicatorData) {
                        var obj = {};
                       obj[x_y] = ListAndList.colKeys[yIndex];
                       for (var xIndex in ListAndList.indicatorData[yIndex]) {
                         obj[ListAndList.rowKeys[xIndex]] =cellsDeal(ListAndList.indicatorData[yIndex][xIndex],ListAndList.indicatorUnit);
                       }
                       tableData.push(obj);
                     }
                    columnR.push(x_y);
                    columnR = columnR.concat(ListAndList.rowKeys);
                    itemTable["indicatorName"]=ListAndList.indicatorName;
                    itemTable["tableData"] = tableData;
                    itemTable["columns"]=columnR;
                    itemTable["indicatorUnit"]=ListAndList.indicatorUnit;
                    return itemTable;
                },
                listToRowObject : function (ListAndList) {
                    var itemTable ={};
                    var indicatorMap = {};
                    var indicatorData=[];
                    var y_x = row.text+"\\"+column.text;
                    var columnR = [];
                    var tableData = [];
                    columnR.push(y_x);
                    columnR = columnR.concat(ListAndList.colKeys);
                    indicatorData.push(ListAndList.rowKeys);
                    indicatorData = indicatorData.concat(ListAndList.indicatorData);
                    for (var k = 0; k < indicatorData[0].length; k++) {
                        var aRow = {};
                        for (var j = 0; j < indicatorData.length; j++) {
                            if(j==0){
                                aRow[columnR[j]] = indicatorData[j][k];
                            }else{
                                aRow[columnR[j]] = cellsDeal(indicatorData[j][k],ListAndList.indicatorUnit);
                            }
                        }
                        tableData.push(aRow);
                     }
                    itemTable["indicatorName"]=ListAndList.indicatorName;
                    itemTable["tableData"] = tableData;
                    itemTable["columns"]=columnR;
                    itemTable["indicatorUnit"]=ListAndList.indicatorUnit;
                    return itemTable;
                },
                listToColumnMap : function (ListAndList) {
                 //   var echartOption = echarts.getInstanceByDom(document.getElementById(ListAndList.indicatorName)).getOption();
                 //   var mapType = echarts.getInstanceByDom(document.getElementById(ListAndList.indicatorName)).getOption().series[0].type;
                    var options = [];
                        var sigleOption = {};
                        sigleOption = this.mapInitOption; // 实现深复制
                        var rowKeys = JSON.parse(JSON.stringify(ListAndList.rowKeys));
                        rowKeys.pop();
                        sigleOption.xAxis[0]["data"] = rowKeys;
                        var indicatorName = ListAndList.indicatorName;
                        sigleOption["title"]["text"] = indicatorName;
                        var series = [];
                        for (var k = 0; k < ListAndList.indicatorData.length - 1; k++) {
                            var sigleSerie = {
                                type : 'line',
                                barMaxWidth : 40,
                                barMinHeight : 15
                            };
                            sigleSerie["name"] = ListAndList.colKeys[k];
                            var rows = JSON.parse(JSON.stringify(ListAndList.indicatorData[k]))
                            rows.pop();
                            sigleSerie["data"] = rows;
                            series.push(sigleSerie);
                        }
                        sigleOption["series"] = series;
                        var legendData = JSON.parse(JSON.stringify(ListAndList.colKeys));
                        legendData.pop();
                        sigleOption.legend.data = legendData;
                        var unitHandle=ListAndList.indicatorUnit;
                        sigleOption.tooltip.formatter=function (params,ticket,callback) {
                            var myUnit =unitHandle;
                            var html = '+
                            '>行:'+params.seriesName +'
';
                            html+=''">列:'+params.name +'
';
                            var showValue = params.value;
                            if (typeof (showValue) == "undefined") {
                                showValue = "NoData";
                            } else {
                                // 图悬浮框 千分位+万 +单位
                                if (!isNaN(showValue)) {
                                    if (showValue > 10000) {
                                        showValue = toThousands((showValue / 10000).toFixed(1)) + $.i18n.get('chart.wan')+ myUnit;
                                    }else{
                                        if(unitHandle=='%'){
                                            showValue=parseFloat(showValue)*100;
                                            showValue = showValue.toFixed(1) + myUnit;
                                        }else{
                                            showValue = showValue.toFixed(1) + myUnit;
                                        }
                                    }
                                }
                            }
                            html+=''">值:'+showValue +'';
                            return html;
                        };
                    return sigleOption;
                },
                listToRowMap : function (ListAndList) {
                  /*  var mapType;
                    if(typeof(this.mapOptions)=='undefined'){
                        mapType='line';
                    }else{
                        mapType = echarts.getInstanceByDom(document.getElementById(ListAndList.indicatorNames[0])).getOption().series[0].type;
                    }*/
                    var options = [];
                        var sigleOption = {};
                        sigleOption = this.mapInitOption; // 实现深复制
                        var colKeys = JSON.parse(JSON.stringify(ListAndList.colKeys));
                        colKeys.pop();
                        sigleOption.xAxis[0]["data"] = colKeys;
                        var indicatorName = ListAndList.indicatorName;
                        sigleOption["title"]["text"] = indicatorName;
                        var series = [];
                        for (var k = 0; k < ListAndList.rowKeys.length - 1; k++) { // 图TTL指标去掉
                            var sigleSerie = {
                                type : 'line',
                                barMaxWidth : 40,
                                barMinHeight : 15
                            };
                            var x = [];
                            for (var z = 0; z < ListAndList.colKeys.length - 1; z++) {
                                x.push(ListAndList.indicatorData[z][k]);
                            }
                            sigleSerie["name"] = ListAndList.rowKeys[k];
                            sigleSerie["data"] = x;
                            series.push(sigleSerie);
                        }
                        sigleOption["series"] = series;
                        var legendData = JSON.parse(JSON.stringify(ListAndList.rowKeys));
                        legendData.pop();
                        sigleOption.legend.data = legendData;
                        var unitHandle=ListAndList.indicatorUnit;
                        sigleOption.tooltip.formatter=function (params,ticket,callback) {
                            var myUnit =unitHandle;
                            var color = params.color;
                            var html = '
                            +  '">行:'+params.seriesName +'
';
                            html+='
                            + '">列:'+params.name +'
';
                            var showValue = params.value;
                            if (typeof (showValue) == "undefined") {
                                showValue = "NoData";
                            } else {
                                // 图悬浮框 千分位+万 +单位
                                if (!isNaN(showValue)) {
                                    if (showValue > 10000) {
                                        showValue = toThousands((showValue / 10000).toFixed(1)) + $.i18n.get('chart.wan')+myUnit;
                                    }else{
                                        if(unitHandle=='%'){
                                            showValue=parseFloat(showValue)*100;
                                            showValue = showValue.toFixed(1) + myUnit;
                                        }else{
                                            showValue = showValue.toFixed(1) + myUnit;
                                        }
                                    }
                                }
                            }
                            html+='
                            + '">值:'+showValue +'';
                            return html;
                        };
                    return sigleOption;
                },
                convert : function (ev) {
                    if (this.tableAndMap) {
                        this.tableAndMap = false;
                    } else {
                        this.tableAndMap = true;
                    }
                    var indicatorName = this.mapOption.title.text;
                    var myChart = echarts.init(document.getElementById([indicatorName]),rmp_theme);
                    var grid = computerGrid(this.mapOption);
                    myChart.resize({
                        width : grid.chartWidth+"px",
                        height : grid.chartHeight+"px"
                    });
                    myChart.setOption(this.mapOption);
                    ev.stopPropagation();
                },
                exportExcel : function (ev) {
                    var listAndList = JSON.parse(JSON.stringify(this.indicator));
                    var rowTd = listAndList.rowKeys;
                    var excellData = [];
                    rowTd.splice(0, 0, listAndList.indicatorName+'('+listAndList.indicatorUnit+')');
                    excellData.push(rowTd);
                    for (var i = 0; i < listAndList.indicatorData.length; i++) {
                        for(var j=0;jvar rowTr = listAndList.indicatorData[i];
                        rowTr.splice(0, 0, listAndList.colKeys[i]);
                        excellData.push(rowTr);
                    }
                    ExcellentExport.excelByData($("." + listAndList.indicatorName)[0], excellData, 'Sheet', 'download' + new Date().getTime() + '.xls');
                    return ev.stopPropagation();
                }
            },
            watch : {
                indicator : function (newValue) {

                }
            },
            mounted : function () {
           //   this.item= this.listToRowObject(this.indicator);
            },
            beforeMount : function(){
                this.item= this.listToRowObject(this.indicator);
                this.mapOption = this.listToRowMap(this.indicator);
            }

        })
        panelsVueArr.push(vueObj);
    }   
}

//格式化Y轴数字显示
var yAxisFormatter = function(value, index) {

    var text = value;
    if (!isNaN(value)) {
        if (value > 10000) {
            // 千分位 + 万
            text = toThousands((value / 10000).toFixed(1)) + $.i18n.get('chart.wan');
        }
    }

    if (value.formatter) {
        text = value.formatter.replace("{value}", text);
    }
    return text;
}
//格式化tooltip
var tooltipFormatter = function (params,ticket,callback) {
    console.log(params);

    var color = params.color;
    var html = ''border-radius:10px;width:9px;height:9px;background-color:'
    + color + '">行:'+params.seriesName +'';
    html+=''border-radius:10px;width:9px;height:9px;background-color:'
    + color + '">列:'+params.name +'';
    var showValue = params.value;
    if (typeof (showValue) == "undefined") {
        showValue = "NoData";
    } else {
        // 图悬浮框 千分位+万 +单位
        if (!isNaN(showValue)) {
            if (showValue > 10000||showValue<-10000) {
                showValue = toThousands((showValue / 10000).toFixed(1)) + $.i18n.get('chart.wan');
            }else{
                showValue=parseFloat(showValue)*100;
                showValue = showValue.toFixed(1) + unitHandle();
            }
        }
    }
    html+=''border-radius:10px;width:9px;height:9px;background-color:'
    + color + '">值:'+showValue +'';
    console.log(html);
    return html;
}




// 数字格式处理 1,000,000
function toThousands(num) {
    if (typeof (num) == 'undefined') {
        num = ""
    }
    num = num + '', result = '';
    if (num.indexOf('%') > -1) {
        return num;
    }
    var s = "";
    if (num.indexOf('.') > -1) {
        s = num.substring(num.indexOf('.'), num.length);
        num = num.substring(0, num.indexOf('.'));
    }
    var n = false;
    if (num.indexOf('-') > -1) {
        num = num.substring(1);
        n = true;
    }

    while (num.length > 3) {
        result = ',' + num.slice(-3) + result;
        num = num.slice(0, num.length - 3);
    }
    if (num != undefined) {
        result = num + result;
    }

    if (n) {
        result = "-" + result;
    }
    if(s=='.0'){
        return result;
    }
    return result + s;
}


// 千分位与单位处理
function cellsDeal(num,unit) {
    if (typeof (num) == 'undefined') {
        num = "";
    }
    if(num===''){
        return num;
    }
    num = num + '', result = '';
    if (unit=='%') {
        num=parseFloat(num)*100;
        num = num.toFixed(1) + '';
        if(num.indexOf(".")!=-1){
            return num.substring(0,num.indexOf(".")+2)+"%";
        }else{
            return num+"%";
        }
    }
    var s = "";
    if (num.indexOf('.') > -1) {
        num=parseFloat(num).toFixed(1);
        s = num.substring(num.indexOf('.'), num.length); //小数位
        num = num.substring(0, num.indexOf('.')); //整数位
    }
    var n = false;
    if (num.indexOf('-') > -1) {
        num = num.substring(1);
        n = true;
    }
    while (num.length > 3) {
        result = ',' + num.slice(-3) + result;
        num = num.slice(0, num.length - 3);
    }
    if (num != undefined) {
        result = num + result;
    }
    if (n) {
        result = "-" + result;
    }
    if(unit.indexOf("/")!=-1){
        s=s.substring(0,2);
    }else{
        s="";
    }
    return result + s;
}

/*动态计算echarts的grid属性 */
function computerGrid(options){

    // 图宽度 默认
    var chartWidth = 810;

    // 图例占宽度比
    var legendWidth = chartWidth * 0.8;

    // 图高度默认
    var chartHeight = 250;
    // 图中grid离容器下边距高度默认
    var bottomHeight = 25;
    // 图中grid离容器上边距高度默认
    var topHeight = 40;

    // 根据x轴刻度数量 算宽度，如果超过默认 则使用计算值
    if (options.xAxis[0].data.length * 30 - chartWidth > 0) {
        chartWidth = options.xAxis[0].data.length * 30;
    }

    // x轴刻度 最长的长度值
    var maxLength = 0;

    var legendCount = 8;

    if (options.xAxis[0].data.length > legendCount) {
        options.xAxis[0].data.forEach(function(val) {
            if (maxLength < val.length) {
                maxLength = val.length;
                if (/[^\u0000-\u00FF]/.test(val)) {
                    // 计算图中grid离容器下边距高度
                    bottomHeight = maxLength * 14;
                } else {
                    // 计算图中grid离容器下边距高度
                    bottomHeight = maxLength * 13.5;
                }
            }
        });
    }

    var tmpWidth = 0;
    options.legend.data.forEach(function(val) {
        if (/[^\u0000-\u00FF]/.test(val)) {
            tmpWidth += val.length * 22 + 30;
        } else {
            tmpWidth += val.length * 11 + 30;
        }
    });

    var rowNum = tmpWidth / legendWidth;
    // 根据图例算 图中grid离容器上边距高度
    if (rowNum > 1) {
        topHeight += (rowNum - 1) * 23;
    }

    chartHeight += bottomHeight + topHeight;
    options.legend['width'] = legendWidth;
    options.grid.y2 = bottomHeight;
    options.grid.y = topHeight;
    if(chartWidth!='810'){
        options.grid["x"]=40;
    }
    var columnAndRow = ['startProvince','startArea']; //始发省份和地区默认X轴旋转45度
    if(options.xAxis[0].data[0].match('^(\\d+)\\+(\\d+)')!=null||columnAndRow.indexOf(column.code)!=-1||columnAndRow.indexOf(row.code)!=-1){
        options.xAxis[0].axisLabel['rotate']=45;
    }else{
        options.xAxis[0].axisLabel['rotate']=0;
    }
    return {chartHeight:chartHeight,chartWidth:chartWidth};
}

---

上述代码实现了 echart图数据的格式化，和对数据的自适应。修改为上述方式之后发现性能提高了不止一个数量级。