SoFunction
Updated on 2025-04-04

VUE2.0+Element-UI+Echarts encapsulated component instances

This article uses the panel component of Vue2.0+elementUI and the histogram and line chart of table component + echarts to display the results, realizing the switching between tables and graphs and transpose between graphs and tables.

-html

<div class="resultDiv">
  <div >
   <el-collapse>
    <el-collapse-item v-for="item in indicators">
    <template slot="title">
     <span class='resulticon'>
      {{}} 
      <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="" download="" @click="return exportExcel()" 
       data-command="show" title="Save as table"></a>
      &lt;a href="#" 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="chart switch"></a>      &lt;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="rowsing transpose"></a>     &lt;/span&gt;
    &lt;/template&gt;
    &lt;template&gt;
     &lt;div v-show="tableAndMap==3?true:tableAndMap==1?true:false" :id=""&gt;&lt;/div&gt;
    &lt;/template&gt;
    &lt;template v-if="tableAndMap==3?true:tableAndMap==2?true:false"&gt;
     &lt;el-table :data="" max-height="300" stripe border fix style="width: 100%"&gt;
      &lt;el-table-column v-for="(column,index) in " :prop="column" :fixed="index==0" :label="column" min-width="150"&gt;&lt;/el-table-column&gt;
     &lt;/el-table&gt;
    &lt;/template&gt;
    &lt;/el-collapse-item&gt;
   &lt;/el-collapse&gt;
  &lt;/div&gt; 
 &lt;/div&gt;

js, panel component code

var panelsVue = new Vue({
 el : "#panels",
 props : ["initData","indicators","mapOptions"],
 data : {
  rowOrColumn : false, //Course conversion  tableOrMap : true, //Table and graph switching  tableAndMap : 3, //The table and the picture are displayed at the same time  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 initialization parameters },
 methods:{
  table : function(ev){
   if(){
    =();
    = ();
    =false;
   }else{
    =();
    = ();
    =true;
   }
   for(var i=0;i&lt;;i++){
    var indicatorName= [i].;
    var dom = ([indicatorName])
    var heigth = $(dom).siblings('div').height()*1.5;
    var width = $(dom).siblings('div').width();
    $(dom).css({
     height:heigth,
     width:width
    });
    var myChart= (([indicatorName]),'macarons');
    ([i]);
   }
   ();
  },
  listToRowObject :function (ListAndList){
   var indicatorNames=[];
   var tableDatas=[];
   var columns = [];
   var options = [];
   ListAndList = ;
   for(var i=0;i&lt;;i++){
    var objects=[];
    var column =[];
    var indicatorName = [i];
    for(var yIndex in ListAndList[indicatorName]){
     var obj = {};
     obj[indicatorName]=[yIndex];
     for(var xIndex in ListAndList[indicatorName][yIndex]){
      obj[[xIndex]]=ListAndList[indicatorName][yIndex][xIndex];
     }
     (obj);
    }
    (indicatorName);
    (indicatorName);
    column=();
    var indicator={};
    indicator[indicatorName]=objects;
    (column);
    (indicator);
   }
   for(var j = 0; j&lt;;j++){
    var indicatorObj = {};
    indicatorObj["tableData"]=tableDatas[j][indicatorNames[j]];
    indicatorObj["columns"] = columns[j];
    indicatorObj["indicatorName"] = indicatorNames[j];
    (indicatorObj);
   }
   return options;
   },
   listToColumnObject :function (ListAndList) {
    var options = [];
    var columns = [];
    var indicatorNames = [];
    var indicatorMap = {};
    ListAndList = ;
    for (var i = 0; i &lt; ; i++) {
     var column = [];
     var objs = [];
     var indicatorName = [i];
     (indicatorName);
     (indicatorName);
     column = ();
     (column);
     var indicatorData = [];
     ();
     indicatorData = (ListAndList[indicatorName]);
     for (var k = 0; k &lt; indicatorData[0].length; k++) {
      var aRow = {};
      for (var j = 0; j &lt; ; j++) {
       aRow[column[j]] = indicatorData[j][k];
      }
      (aRow);
     }
     indicatorMap[indicatorName] = objs;
    }
    for (var j = 0; j &lt; ; j++) {
     var indicatorObj = {};
     indicatorObj["tableData"] = indicatorMap[indicatorNames[j]];
     indicatorObj["columns"] = columns[j];
     indicatorObj["indicatorName"] = indicatorNames[j];
     (indicatorObj);
    }
    return options;
   },
   listToColumnMap: function(ListAndList){
     ListAndList = ;
     var options=[];
     for(var j = 0;j&lt;;j++){
      var sigleOption ={};
      sigleOption=(());//Implement deep replication      [0]["data"]=;
      var indicatorName = [j];
      sigleOption["title"]["text"]=indicatorName;
      var series =[];
      for(var k=0;k&lt;ListAndList[indicatorName].length;k++){
       var sigleSerie={type:'line'};
       sigleSerie["name"] = [k];
       sigleSerie["data"] = ListAndList[indicatorName][k];
       (sigleSerie);
      }
      sigleOption["series"]=series;
      (sigleOption);
     };
     return options;
   },
   listToRowMap: function(ListAndList){
     ListAndList = ;
     var options=[];
     for(var j = 0;j&lt;;j++){
      var sigleOption ={};
      sigleOption=(());//Implement deep replication      [0]["data"]=;
      var indicatorName = [j];
      sigleOption["title"]["text"]=indicatorName;
      var series =[];
      for(var k=0;k&lt;;k++){
       var sigleSerie={type:'line'};
       var x= [];
       for(var z = 0;z&lt;;z++){
        (ListAndList[indicatorName][z][k]);
       }
       sigleSerie["name"] = [k];
       sigleSerie["data"] = x;
       (sigleSerie);
      }
      sigleOption["series"]=series;
      (sigleOption);
     };
     return options;
   },
   map : function(ev){
    if(==1){
     =2;
    }else if(==2){
     =3;
    }else{
     =1;
    }
    ();
   },
   exportExcel : function(indicatorName,my){
    debugger;
    (indicatorName);
    var listAndList = (());
    var rowTd = ;
    var excellData=[];
    (0,0,indicatorName);
    (rowTd);
    for(var i = 0;i&lt;listAndList[indicatorName].length;i++){
     var rowTr = listAndList[indicatorName][i];
     (0,0,[i]);
     (rowTr);
    }
    return ($("."+indicatorName)[0], excellData, 'Sheet', 'download' + new Date().getTime() + '.xls');
   }
 },
 watch : {
  initData : function(newValue){
   =(newValue);
  }
 },
 mounted : function(){
 }
});
(panelsVue,'initData',ListAndList);

During the process of using the above components, I found that all the changes are made after transposition and table switching. Although a single panel component can be transposition and switching by itself, I found that if there is too much data, the page will be stuck. In order to optimize performance, I later considered using the form of multiple vue objects (although my idea is that if the data is changed, vue will re-render the html, causing the page to be stuck, but after carefully checking the information, I found that vue will reuse the original same html after the data is changed. However, due to time, I didn't try it. You can consider it)

Page after taking the form of multiple vue objects

html 

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

js, panel components

var panelsVueArr = [];
var responseData;
function createHtml(respData){
 var indicatorResult = ; 
 var indicators = [];
 for(var j=0;j&lt;;j++){
  var indicator = {};
  indicator["indicatorName"]=[j];
  indicator["indicatorUnit"]=[j];
  indicator["rowKeys"]=;
  indicator["colKeys"]=;
  indicator["indicatorData"]=indicatorResult[[j]];
  (indicator);
 }
 for(var i =0;i&lt;;i++){
  var el = $("&lt;div&gt;&lt;/div&gt;");
  $(".resultDiv").append(el[0]); 
  var vueObj = new Vue({
   el : el[0],
   template : '&lt;div &gt;&lt;el-collapse&gt;&lt;el-collapse-item&gt;'+
   '&lt;template slot="title"&gt;&lt;span class="resulticon"&gt;{{}}({{}}) &lt;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="" download="" @click="exportExcel" data-command="show" title="Save as table"></a>'+   '&lt;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="Character Switch"></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="rowscope transpose"></a>'+  '&lt;/span&gt;&lt;/template&gt;&lt;template&gt;&lt;div v-show="!tableAndMap" :id=""&gt;&lt;/div&gt;&lt;/template&gt;&lt;template v-if="tableAndMap"&gt;&lt;el-table :data="" max-height="300" stripe border fix fit style="width: 100%"&gt;'+
   '&lt;el-table-column v-for="(column,index) in " :prop="column" :fixed="index==0" :label="column" :min-width="&lt;8?118:&gt;16?250:*15"&gt;&lt;/el-table-column&gt;&lt;/el-table&gt;&lt;/template&gt;&lt;/el-collapse-item&gt;&lt;/el-collapse&gt;&lt;/div&gt;',
   props : ['item','mapOption'],
   data : {
    indicator : indicators[i],
    rowOrColumn : false, // Row and column conversion    tableOrMap : true, // Switch tables and diagrams    tableAndMap : true, // Tables and figures are displayed at the same time    indexid : i,
    mapInitOption : {
     title : {
      text : '',
      show : false
     },
     tooltip : {
      trigger : 'item',
      formatter: ''
     },
     legend : {
      data : [],
      right : 90, // Do not cover the button on the right      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 initialization parameters   },
   methods : {
    transpose : function (ev) {
     if () {
       = ();
       = ();
       = false;
     } else {
       = ();
       = ();
       = true;
     }
      var indicatorName = ;
      var myChart = (([indicatorName]),rmp_theme);
      var grid = computerGrid();
      ({
       width : +"px",
       height : +"px"
      });
      ();
     ();
    },
    listToColumnObject : function (ListAndList) {
     var x_y = +"\\"+;
     var itemTable ={};
     var columnR = [];
     var tableData=[];
     for (var yIndex in ) {
      var obj = {};
      obj[x_y] = [yIndex];
      for (var xIndex in [yIndex]) {
       obj[[xIndex]] =cellsDeal([yIndex][xIndex],);
      }
      (obj);
      }
     (x_y);
     columnR = ();
     itemTable["indicatorName"]=;
     itemTable["tableData"] = tableData;
     itemTable["columns"]=columnR;
     itemTable["indicatorUnit"]=;
     return itemTable;
    },
    listToRowObject : function (ListAndList) {
     var itemTable ={};
     var indicatorMap = {};
     var indicatorData=[];
     var y_x = +"\\"+;
     var columnR = [];
     var tableData = [];
     (y_x);
     columnR = ();
     ();
     indicatorData = ();
     for (var k = 0; k &lt; indicatorData[0].length; k++) {
      var aRow = {};
      for (var j = 0; j &lt; ; j++) {
       if(j==0){
        aRow[columnR[j]] = indicatorData[j][k];
       }else{
        aRow[columnR[j]] = cellsDeal(indicatorData[j][k],);
       }
      }
      (aRow);
      }
     itemTable["indicatorName"]=;
     itemTable["tableData"] = tableData;
     itemTable["columns"]=columnR;
     itemTable["indicatorUnit"]=;
     return itemTable;
    },
    listToColumnMap : function (ListAndList) {
     // var echartOption = (()).getOption();
     // var mapType = (()).getOption().series[0].type;
     var options = [];
      var sigleOption = {};
      sigleOption = ; // Implement deep replication      var rowKeys = (());
      ();
      [0]["data"] = rowKeys;
      var indicatorName = ;
      sigleOption["title"]["text"] = indicatorName;
      var series = [];
      for (var k = 0; k &lt;  - 1; k++) {
       var sigleSerie = {
        type : 'line',
        barMaxWidth : 40,
        barMinHeight : 15
       };
       sigleSerie["name"] = [k];
       var rows = (([k]))
       ();
       sigleSerie["data"] = rows;
       (sigleSerie);
      }
      sigleOption["series"] = series;
      var legendData = (());
      ();
       = legendData;
      var unitHandle=;
      =function (params,ticket,callback) {
       var myUnit =unitHandle;
       var html = '&lt;span style="display:inline-block;margin-right:5px;"'+
       '&gt;OK:'+ +'&lt;/span&gt;&lt;br&gt;';
       html+='&lt;span style="display:inline-block;margin-right:5px;'+
       '"&gt;List:'+ +'&lt;/span&gt;&lt;br&gt;';
       var showValue = ;
       if (typeof (showValue) == "undefined") {
        showValue = "NoData";
       } else {
        // Picture suspended frame Millite + ten thousand + units        if (!isNaN(showValue)) {
         if (showValue &gt; 10000) {
          showValue = toThousands((showValue / 10000).toFixed(1)) + $.('')+ myUnit;
         }else{
          if(unitHandle=='%'){
           showValue=parseFloat(showValue)*100;
           showValue = (1) + myUnit;
          }else{
           showValue = (1) + myUnit;
          }
         }
        }
       }
       html+='&lt;span style="display:inline-block;margin-right:5px;'+
       '"&gt;value:'+showValue +'&lt;/span&gt;';
       return html;
      };
     return sigleOption;
    },
    listToRowMap : function (ListAndList) {
     /* var mapType;
     if(typeof()=='undefined'){
      mapType='line';
     }else{
      mapType = (([0])).getOption().series[0].type;
     }*/
     var options = [];
      var sigleOption = {};
      sigleOption = ; // Implement deep replication      var colKeys = (());
      ();
      [0]["data"] = colKeys;
      var indicatorName = ;
      sigleOption["title"]["text"] = indicatorName;
      var series = [];
      for (var k = 0; k &lt;  - 1; k++) { // Remove the TTL indicator of the picture       var sigleSerie = {
        type : 'line',
        barMaxWidth : 40,
        barMinHeight : 15
       };
       var x = [];
       for (var z = 0; z &lt;  - 1; z++) {
        ([z][k]);
       }
       sigleSerie["name"] = [k];
       sigleSerie["data"] = x;
       (sigleSerie);
      }
      sigleOption["series"] = series;
      var legendData = (());
      ();
       = legendData;
      var unitHandle=;
      =function (params,ticket,callback) {
       var myUnit =unitHandle;
       var color = ;
       var html = '&lt;span style="display:inline-block;margin-right:5px;"'
       + '"&gt;OK:'+ +'&lt;/span&gt;&lt;br&gt;';
       html+='&lt;span style="display:inline-block;margin-right:5px;"'
       + '"&gt;List:'+ +'&lt;/span&gt;&lt;br&gt;';
       var showValue = ;
       if (typeof (showValue) == "undefined") {
        showValue = "NoData";
       } else {
        // Picture suspended frame Millite + ten thousand + units        if (!isNaN(showValue)) {
         if (showValue &gt; 10000) {
          showValue = toThousands((showValue / 10000).toFixed(1)) + $.('')+myUnit;
         }else{
          if(unitHandle=='%'){
           showValue=parseFloat(showValue)*100;
           showValue = (1) + myUnit;
          }else{
           showValue = (1) + myUnit;
          }
         }
        }
       }
       html+='&lt;span style="display:inline-block;margin-right:5px;"'
       + '"&gt;value:'+showValue +'&lt;/span&gt;';
       return html;
      };
     return sigleOption;
    },
    convert : function (ev) {
     if () {
       = false;
     } else {
       = true;
     }
     var indicatorName = ;
     var myChart = (([indicatorName]),rmp_theme);
     var grid = computerGrid();
     ({
      width : +"px",
      height : +"px"
     });
     ();
     ();
    },
    exportExcel : function (ev) {
     var listAndList = (());
     var rowTd = ;
     var excellData = [];
     (0, 0, +'('++')');
     (rowTd);
     for (var i = 0; i &lt; ; i++) {
      for(var j=0;j&lt;[i].length;j++){
       [i][j]=cellsDeal([i][j],);
      }
      var rowTr = [i];
      (0, 0, [i]);
      (rowTr);
     }
     ($("." + )[0], excellData, 'Sheet', 'download' + new Date().getTime() + '.xls');
     return ();
    }
   },
   watch : {
    indicator : function (newValue) {
    }
   },
   mounted : function () {
   // = ();
   },
   beforeMount : function(){
    = ();
     = ();
   }
  })
  (vueObj);
 } 
}
//Format the Y-axis digital displayvar yAxisFormatter = function(value, index) {
 var text = value;
 if (!isNaN(value)) {
  if (value &gt; 10000) {
   // Millimeter + Ten Thousand   text = toThousands((value / 10000).toFixed(1)) + $.('');
  }
 }
 if () {
  text = ("{value}", text);
 }
 return text;
}
//Format tooltipvar tooltipFormatter = function (params,ticket,callback) {
 (params);
 var color = ;
 var html = '&lt;span style="display:inline-block;margin-right:5px;' + 'border-radius:10px;width:9px;height:9px;background-color:'
 + color + '"&gt;OK:'+ +'&lt;/span&gt;';
 html+='&lt;span style="display:inline-block;margin-right:5px;' + 'border-radius:10px;width:9px;height:9px;background-color:'
 + color + '"&gt;List:'+ +'&lt;/span&gt;';
 var showValue = ;
 if (typeof (showValue) == "undefined") {
  showValue = "NoData";
 } else {
  // Picture suspended frame Millite + ten thousand + units  if (!isNaN(showValue)) {
   if (showValue &gt; 10000||showValue&lt;-10000) {
    showValue = toThousands((showValue / 10000).toFixed(1)) + $.('');
   }else{
    showValue=parseFloat(showValue)*100;
    showValue = (1) + unitHandle();
   }
  }
 }
 html+='&lt;span style="display:inline-block;margin-right:5px;' + 'border-radius:10px;width:9px;height:9px;background-color:'
 + color + '"&gt;value:'+showValue +'&lt;/span&gt;';
 (html);
 return html;
}
// Digital format processing 1,000,000function toThousands(num) {
 if (typeof (num) == 'undefined') {
  num = ""
 }
 num = num + '', result = '';
 if (('%') &gt; -1) {
  return num;
 }
 var s = "";
 if (('.') &gt; -1) {
  s = (('.'), );
  num = (0, ('.'));
 }
 var n = false;
 if (('-') &gt; -1) {
  num = (1);
  n = true;
 }
 while ( &gt; 3) {
  result = ',' + (-3) + result;
  num = (0,  - 3);
 }
 if (num != undefined) {
  result = num + result;
 }
 if (n) {
  result = "-" + result;
 }
 if(s=='.0'){
  return result;
 }
 return result + s;
}
// Millimeters and unit processingfunction cellsDeal(num,unit) {
 if (typeof (num) == 'undefined') {
  num = "";
 }
 if(num===''){
  return num;
 }
 num = num + '', result = '';
 if (unit=='%') {
  num=parseFloat(num)*100;
  num = (1) + '';
  if((".")!=-1){
   return (0,(".")+2)+"%";
  }else{
   return num+"%";
  }
 }
 var s = "";
 if (('.') &gt; -1) {
  num=parseFloat(num).toFixed(1);
  s = (('.'), ); //Decimal places  num = (0, ('.')); //Integer bit }
 var n = false;
 if (('-') &gt; -1) {
  num = (1);
  n = true;
 }
 while ( &gt; 3) {
  result = ',' + (-3) + result;
  num = (0,  - 3);
 }
 if (num != undefined) {
  result = num + result;
 }
 if (n) {
  result = "-" + result;
 }
 if(("/")!=-1){
  s=(0,2);
 }else{
  s="";
 }
 return result + s;
}
/*Dynamic calculation of echarts grid attribute */
function computerGrid(options){
 // Image width default var chartWidth = 810;
 // The width ratio of the legend var legendWidth = chartWidth * 0.8;
 // The image height is default var chartHeight = 250;
 // The default margin height of grid from the container in the picture var bottomHeight = 25;
 // The default distance height of grid from the container in the picture var topHeight = 40;
 // Calculate the width according to the number of x-axis scales, and if the default is exceeded, the calculated value is used if ([0]. * 30 - chartWidth &gt; 0) {
  chartWidth = [0]. * 30;
 }
 // x-axis scale The longest length value var maxLength = 0;
 var legendCount = 8;
 if ([0]. &gt; legendCount) {
  [0].(function(val) {
   if (maxLength &lt; ) {
    maxLength = ;
    if (/[^\u0000-\u00FF]/.test(val)) {
     // Calculate the height of the grid from the bottom margin in the figure     bottomHeight = maxLength * 14;
    } else {
     // Calculate the height of the grid from the bottom margin in the figure     bottomHeight = maxLength * 13.5;
    }
   }
  });
 }
 var tmpWidth = 0;
 (function(val) {
  if (/[^\u0000-\u00FF]/.test(val)) {
   tmpWidth +=  * 22 + 30;
  } else {
   tmpWidth +=  * 11 + 30;
  }
 });
 var rowNum = tmpWidth / legendWidth;
 // Calculate the height of the grid from the upper margin of the container according to the legend if (rowNum &gt; 1) {
  topHeight += (rowNum - 1) * 23;
 }
 chartHeight += bottomHeight + topHeight;
 ['width'] = legendWidth;
 .y2 = bottomHeight;
  = topHeight;
 if(chartWidth!='810'){
  ["x"]=40;
 }
 var columnAndRow = ['startProvince','startArea']; //The default X-axis rotation of the originating province and region is 45 degrees if([0].data[0].match('^(\\d+)\\+(\\d+)')!=null||()!=-1||()!=-1){
  [0].axisLabel['rotate']=45;
 }else{
  [0].axisLabel['rotate']=0;
 }
 return {chartHeight:chartHeight,chartWidth:chartWidth};
}

The above code implements the formatting of echart graph data and adaptation to the data. After modifying it to the above method, it was found that the performance has been improved by more than one order of magnitude.

The above example of component packaged by VUE2.0+Element-UI+Echarts is all the content I share with you. I hope you can give you a reference and I hope you can support me more.