VUE2.0+Element-UI+Echarts封装的示例分析

  
   
    
    
     
      {{item.indicatorName}} 
      
      
      
     
    
    
    
     
      
     
    
    
   
  

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