简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
首页
文章
问答
课程
专题
下载
手游
词典
最近更新

首页  >  文章  >  web前端  >  通过VUE2.0+Element-UI+Echarts如何实现封装的组件

通过VUE2.0+Element-UI+Echarts如何实现封装的组件

亚连
亚连原创
2018-06-02 09:46:511703浏览

下面我就为大家分享一篇VUE2.0+Element-UI+Echarts封装的组件实例，具有很好的参考价值，希望对大家有所帮助。

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

-html

<p class="resultp">
  <p id="panels">
   <el-collapse>
    <el-collapse-item v-for="item in indicators">
    <template slot="title">
     <span class=&#39;resulticon&#39;>
      {{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>
     <p v-show="tableAndMap==3?true:tableAndMap==1?true:false" :id="item.indicatorName"></p>
    </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>
  </p> 
 </p>

js，panel组件的代码

var panelsVue = new Vue({
 el : "#panels",
 props : ["initData","indicators","mapOptions"],
 data : {
  rowOrColumn : false, //行列转换
  tableOrMap : true, //表和图切换
  tableAndMap : 3, //表和图同时显示
  mapInitOption : {
    title: {
     text: &#39;&#39;
    },
    tooltip : {
     trigger: &#39;axis&#39;
    },
    toolbox: {
     show : true,
     feature : {
      mark : {show: true},
      dataView : {show: true, readOnly: false},
      magicType : {show: true, type: [&#39;line&#39;, &#39;bar&#39;]},
      restore : {show: true},
      saveAsImage : {show: true}
     }
    },
    calculable : true,
    xAxis : [
     {
      type : &#39;category&#39;,
      boundaryGap : false
     }
    ],
    yAxis : [
     {
      type : &#39;value&#39;,
      axisLabel : {
       formatter: &#39;{value}&#39;
      }
     }
    ]
   } //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(&#39;p&#39;).height()*1.5;
    var width = $(dom).siblings(&#39;p&#39;).width();
    $(dom).css({
     height:heigth,
     width:width
    });
    var myChart= echarts.init(document.getElementById([indicatorName]),&#39;macarons&#39;);
    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:&#39;line&#39;};
       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:&#39;line&#39;};
       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, &#39;Sheet&#39;, &#39;download&#39; + new Date().getTime() + &#39;.xls&#39;);
   }
 },
 watch : {
  initData : function(newValue){
   this.indicators=this.listToRowObject(newValue);
  }
 },
 mounted : function(){
 }
});
Vue.set(panelsVue,&#39;initData&#39;,ListAndList);

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

采用多vue对象的形式之后的页面

html 

<p class="resultp"></p>

js,panel组件

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 = $("<p></p>");
  $(".resultp").append(el[0]); 
  var vueObj = new Vue({
   el : el[0],
   template : &#39;<p id="panels"><el-collapse><el-collapse-item>&#39;+
   &#39;<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>&#39;+
   &#39;<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>&#39;+
  &#39;</span></template><template><p v-show="!tableAndMap" :id="item.indicatorName"></p></template><template v-if="tableAndMap"><el-table :data="item.tableData" max-height="300" stripe border fix fit style="width: 100%">&#39;+
   &#39;<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></p>&#39;,
   props : [&#39;item&#39;,&#39;mapOption&#39;],
   data : {
    indicator : indicators[i],
    rowOrColumn : false, // 行列转换
    tableOrMap : true, // 表和图切换
    tableAndMap : true, // 表和图同时显示
    indexid : i,
    mapInitOption : {
     title : {
      text : &#39;&#39;,
      show : false
     },
     tooltip : {
      trigger : &#39;item&#39;,
      formatter: &#39;&#39;
     },
     legend : {
      data : [],
      right : 90, // 不要遮住右边的按钮
      left : 85,
      padding : 10
     },
     toolbox : {
      show : true,
      feature : {
       mark : {
        show : true
       },
       magicType : {
        show : true,
        type : [&#39;line&#39;, &#39;bar&#39;]
       },
       restore : {
        show : true
       },
       saveAsImage : {
        show : true
       }
      }
     },
     grid : {
      y : &#39;&#39;,
      y2 : &#39;&#39;,
      containLabel : true
     },
     calculable : true,
     xAxis : [{
       type : &#39;category&#39;,
       boundaryGap : false,
       axisLabel : {
        interval : 0
       // rotate : 45
       }
      }
     ],
     yAxis : [{
       type : &#39;value&#39;,
       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 : &#39;line&#39;,
        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 = &#39;<span style="display:inline-block;margin-right:5px;"&#39;+
       &#39;>行:&#39;+params.seriesName +&#39;</span><br>&#39;;
       html+=&#39;<span style="display:inline-block;margin-right:5px;&#39;+
       &#39;">列:&#39;+params.name +&#39;</span><br>&#39;;
       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(&#39;chart.wan&#39;)+ myUnit;
         }else{
          if(unitHandle==&#39;%&#39;){
           showValue=parseFloat(showValue)*100;
           showValue = showValue.toFixed(1) + myUnit;
          }else{
           showValue = showValue.toFixed(1) + myUnit;
          }
         }
        }
       }
       html+=&#39;<span style="display:inline-block;margin-right:5px;&#39;+
       &#39;">值:&#39;+showValue +&#39;</span>&#39;;
       return html;
      };
     return sigleOption;
    },
    listToRowMap : function (ListAndList) {
     /* var mapType;
     if(typeof(this.mapOptions)==&#39;undefined&#39;){
      mapType=&#39;line&#39;;
     }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 : &#39;line&#39;,
        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 = &#39;<span style="display:inline-block;margin-right:5px;"&#39;
       + &#39;">行:&#39;+params.seriesName +&#39;</span><br>&#39;;
       html+=&#39;<span style="display:inline-block;margin-right:5px;"&#39;
       + &#39;">列:&#39;+params.name +&#39;</span><br>&#39;;
       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(&#39;chart.wan&#39;)+myUnit;
         }else{
          if(unitHandle==&#39;%&#39;){
           showValue=parseFloat(showValue)*100;
           showValue = showValue.toFixed(1) + myUnit;
          }else{
           showValue = showValue.toFixed(1) + myUnit;
          }
         }
        }
       }
       html+=&#39;<span style="display:inline-block;margin-right:5px;"&#39;
       + &#39;">值:&#39;+showValue +&#39;</span>&#39;;
       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+&#39;(&#39;+listAndList.indicatorUnit+&#39;)&#39;);
     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, &#39;Sheet&#39;, &#39;download&#39; + new Date().getTime() + &#39;.xls&#39;);
     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(&#39;chart.wan&#39;);
  }
 }
 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 = &#39;<span style="display:inline-block;margin-right:5px;&#39; + &#39;border-radius:10px;width:9px;height:9px;background-color:&#39;
 + color + &#39;">行:&#39;+params.seriesName +&#39;</span>&#39;;
 html+=&#39;<span style="display:inline-block;margin-right:5px;&#39; + &#39;border-radius:10px;width:9px;height:9px;background-color:&#39;
 + color + &#39;">列:&#39;+params.name +&#39;</span>&#39;;
 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(&#39;chart.wan&#39;);
   }else{
    showValue=parseFloat(showValue)*100;
    showValue = showValue.toFixed(1) + unitHandle();
   }
  }
 }
 html+=&#39;<span style="display:inline-block;margin-right:5px;&#39; + &#39;border-radius:10px;width:9px;height:9px;background-color:&#39;
 + color + &#39;">值:&#39;+showValue +&#39;</span>&#39;;
 console.log(html);
 return html;
}
// 数字格式处理 1,000,000
function toThousands(num) {
 if (typeof (num) == &#39;undefined&#39;) {
  num = ""
 }
 num = num + &#39;&#39;, result = &#39;&#39;;
 if (num.indexOf(&#39;%&#39;) > -1) {
  return num;
 }
 var s = "";
 if (num.indexOf(&#39;.&#39;) > -1) {
  s = num.substring(num.indexOf(&#39;.&#39;), num.length);
  num = num.substring(0, num.indexOf(&#39;.&#39;));
 }
 var n = false;
 if (num.indexOf(&#39;-&#39;) > -1) {
  num = num.substring(1);
  n = true;
 }
 while (num.length > 3) {
  result = &#39;,&#39; + num.slice(-3) + result;
  num = num.slice(0, num.length - 3);
 }
 if (num != undefined) {
  result = num + result;
 }
 if (n) {
  result = "-" + result;
 }
 if(s==&#39;.0&#39;){
  return result;
 }
 return result + s;
}
// 千分位与单位处理
function cellsDeal(num,unit) {
 if (typeof (num) == &#39;undefined&#39;) {
  num = "";
 }
 if(num===&#39;&#39;){
  return num;
 }
 num = num + &#39;&#39;, result = &#39;&#39;;
 if (unit==&#39;%&#39;) {
  num=parseFloat(num)*100;
  num = num.toFixed(1) + &#39;&#39;;
  if(num.indexOf(".")!=-1){
   return num.substring(0,num.indexOf(".")+2)+"%";
  }else{
   return num+"%";
  }
 }
 var s = "";
 if (num.indexOf(&#39;.&#39;) > -1) {
  num=parseFloat(num).toFixed(1);
  s = num.substring(num.indexOf(&#39;.&#39;), num.length); //小数位
  num = num.substring(0, num.indexOf(&#39;.&#39;)); //整数位
 }
 var n = false;
 if (num.indexOf(&#39;-&#39;) > -1) {
  num = num.substring(1);
  n = true;
 }
 while (num.length > 3) {
  result = &#39;,&#39; + 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[&#39;width&#39;] = legendWidth;
 options.grid.y2 = bottomHeight;
 options.grid.y = topHeight;
 if(chartWidth!=&#39;810&#39;){
  options.grid["x"]=40;
 }
 var columnAndRow = [&#39;startProvince&#39;,&#39;startArea&#39;]; //始发省份和地区默认X轴旋转45度
 if(options.xAxis[0].data[0].match(&#39;^(\\d+)\\+(\\d+)&#39;)!=null||columnAndRow.indexOf(column.code)!=-1||columnAndRow.indexOf(row.code)!=-1){
  options.xAxis[0].axisLabel[&#39;rotate&#39;]=45;
 }else{
  options.xAxis[0].axisLabel[&#39;rotate&#39;]=0;
 }
 return {chartHeight:chartHeight,chartWidth:chartWidth};
}

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

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在Vue.directive中发现有关自定义指令的问题

详细讲解JavaScript图片处理与合成技术（详细教程）

如何实现微信web端后退强制刷新功能（详细教程）

以上是通过VUE2.0+Element-UI+Echarts如何实现封装的组件的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：在使用vue-aplayer插件时出现了一些问题如何解决下一篇：通过使用vue如何才能实现添加mp3音频文件

相关文章

查看更多