简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie gekapselte Komponenten über VUE2.0+Element-UI+Echarts

So implementieren Sie gekapselte Komponenten über VUE2.0+Element-UI+Echarts

亚连
亚连Original
2018-06-02 09:46:511702Durchsuche

下面我就为大家分享一篇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端后退强制刷新功能（详细教程）

Das obige ist der detaillierte Inhalt vonSo implementieren Sie gekapselte Komponenten über VUE2.0+Element-UI+Echarts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So lösen Sie einige Probleme bei der Verwendung des Vue-Aplayer-Plug-InsNächster Artikel：So lösen Sie einige Probleme bei der Verwendung des Vue-Aplayer-Plug-Ins

In Verbindung stehende Artikel

Mehr sehen