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

<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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="el-icon-upload2" :class="item.indicatorName" download="somedata.xls" @click="return exportExcel(item.indicatorName)"        data-command="show" title="保存为表"></a>      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="glyphicon glyphicon-repeat" aria-hidden="true" @click="convert" data-command="show" title="图表切换"></a>      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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>

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;i<ListAndList.indicatorNames.length;i++){    var 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; j<indicatorNames.length;j++){    var 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;j<ListAndList.indicatorNames.length;j++){      var 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;k<ListAndList[indicatorName].length;k++){       var 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;j<ListAndList.indicatorNames.length;j++){      var 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;k<ListAndList.rowKeys.length;k++){       var sigleSerie={type:'line'};       var x= [];       for(var z = 0;z<ListAndList.colKeys.length;z++){        x.push(ListAndList[indicatorName][z][k]);       }       sigleSerie["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;i<listAndList[indicatorName].length;i++){     var 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);

<div class="resultDiv"></div>

var panelsVueArr = [];var responseData;function createHtml(respData){ var indicatorResult = respData.indicatorResult;  var indicators = []; for(var j=0;j<indicatorResult.indicatorNames.length;j++){  var 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;i<indicators.length;i++){  var el = $("<div></div>");  $(".resultDiv").append(el[0]);   var vueObj = new Vue({   el : el[0],   template : '<div id="panels"><el-collapse><el-collapse-item>'+   '<template slot="title"><span class="resulticon">{{item.indicatorName}}({{item.indicatorUnit}}) <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="el-icon-upload2" :class="item.indicatorName" download="somedata.xls" @click="exportExcel" data-command="show" title="保存为表"></a>'+   '<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="glyphicon glyphicon-repeat" aria-hidden="true" @click="convert" data-command="show" title="图表切换"></a><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="glyphicon glyphicon-transfer" aria-hidden="true" @click="transpose" data-command="show" title="行列转置"></a>'+  '</span></template><template><div v-show="!tableAndMap" :id="item.indicatorName"></div></template><template v-if="tableAndMap"><el-table :data="item.tableData" max-height="300" stripe border fix fit style="width: 100%">'+   '<el-table-column v-for="(column,index) in item.columns" :prop="column" :fixed="index==0" :label="column" :min-width="column.length<8?118:column.length>16?250:column.length*15"></el-table-column></el-table></template></el-collapse-item></el-collapse></div>',   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 = '<span style="display:inline-block;margin-right:5px;"'+       '>行:'+params.seriesName +'</span><br>';       html+='<span style="display:inline-block;margin-right:5px;'+       '">列:'+params.name +'</span><br>';       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+='<span style="display:inline-block;margin-right:5px;'+       '">值:'+showValue +'</span>';       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 = '<span style="display:inline-block;margin-right:5px;"'       + '">行:'+params.seriesName +'</span><br>';       html+='<span style="display:inline-block;margin-right:5px;"'       + '">列:'+params.name +'</span><br>';       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+='<span style="display:inline-block;margin-right:5px;"'       + '">值:'+showValue +'</span>';       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;j<listAndList.indicatorData[i].length;j++){       listAndList.indicatorData[i][j]=cellsDeal(listAndList.indicatorData[i][j],listAndList.indicatorUnit);      }      var 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;}//格式化tooltipvar tooltipFormatter = function (params,ticket,callback) { console.log(params); var color = params.color; var html = '<span style="display:inline-block;margin-right:5px;' + 'border-radius:10px;width:9px;height:9px;background-color:' + color + '">行:'+params.seriesName +'</span>'; html+='<span style="display:inline-block;margin-right:5px;' + 'border-radius:10px;width:9px;height:9px;background-color:' + color + '">列:'+params.name +'</span>'; 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+='<span style="display:inline-block;margin-right:5px;' + 'border-radius:10px;width:9px;height:9px;background-color:' + color + '">值:'+showValue +'</span>'; console.log(html); return html;}// 数字格式处理 1,000,000function 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};}