How to implement encapsulated components through VUE2.0+Element-UI+Echarts-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How to implement encapsulated components through VUE2.0+Element-UI+Echarts

亚连

Jun 02, 2018 am 09:46 AM

accomplish Pretending

下面我就为大家分享一篇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>

Copy after login

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);

Copy after login

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

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

html

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

Copy after login

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};
}

Copy after login

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

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

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

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

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

The above is the detailed content of How to implement encapsulated components through VUE2.0+Element-UI+Echarts. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

How to fix KB5055523 fails to install in Windows 11?

3 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

3 weeks ago By DDD

Roblox: Dead Rails - How To Tame Wolves

4 weeks ago By DDD

Roblox: Grow A Garden - Complete Mutation Guide

2 weeks ago By DDD

Strength Levels for Every Enemy & Monster in R.E.P.O.

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial

1657

CakePHP Tutorial

1415

Laravel Tutorial

1309

PHP Tutorial

1257

C# Tutorial

1230

Related knowledge

How to implement dual WeChat login on Huawei mobile phones? Mar 24, 2024 am 11:27 AM

How to implement dual WeChat login on Huawei mobile phones? With the rise of social media, WeChat has become one of the indispensable communication tools in people's daily lives. However, many people may encounter a problem: logging into multiple WeChat accounts at the same time on the same mobile phone. For Huawei mobile phone users, it is not difficult to achieve dual WeChat login. This article will introduce how to achieve dual WeChat login on Huawei mobile phones. First of all, the EMUI system that comes with Huawei mobile phones provides a very convenient function - dual application opening. Through the application dual opening function, users can simultaneously

Use Java to write code to implement love animation Dec 23, 2023 pm 12:09 PM

Realizing love animation effects through Java code In the field of programming, animation effects are very common and popular. Various animation effects can be achieved through Java code, one of which is the heart animation effect. This article will introduce how to use Java code to achieve this effect and give specific code examples. The key to realizing the heart animation effect is to draw the heart-shaped pattern and achieve the animation effect by changing the position and color of the heart shape. Here is the code for a simple example: importjavax.swing.

PHP Programming Guide: Methods to Implement Fibonacci Sequence Mar 20, 2024 pm 04:54 PM

The programming language PHP is a powerful tool for web development, capable of supporting a variety of different programming logics and algorithms. Among them, implementing the Fibonacci sequence is a common and classic programming problem. In this article, we will introduce how to use the PHP programming language to implement the Fibonacci sequence, and attach specific code examples. The Fibonacci sequence is a mathematical sequence defined as follows: the first and second elements of the sequence are 1, and starting from the third element, the value of each element is equal to the sum of the previous two elements. The first few elements of the sequence

How to implement the WeChat clone function on Huawei mobile phones Mar 24, 2024 pm 06:03 PM

How to implement the WeChat clone function on Huawei mobile phones With the popularity of social software and people's increasing emphasis on privacy and security, the WeChat clone function has gradually become the focus of people's attention. The WeChat clone function can help users log in to multiple WeChat accounts on the same mobile phone at the same time, making it easier to manage and use. It is not difficult to implement the WeChat clone function on Huawei mobile phones. You only need to follow the following steps. Step 1: Make sure that the mobile phone system version and WeChat version meet the requirements. First, make sure that your Huawei mobile phone system version has been updated to the latest version, as well as the WeChat App.

Development suggestions: How to use the ThinkPHP framework to implement asynchronous tasks Nov 22, 2023 pm 12:01 PM

"Development Suggestions: How to Use the ThinkPHP Framework to Implement Asynchronous Tasks" With the rapid development of Internet technology, Web applications have increasingly higher requirements for handling a large number of concurrent requests and complex business logic. In order to improve system performance and user experience, developers often consider using asynchronous tasks to perform some time-consuming operations, such as sending emails, processing file uploads, generating reports, etc. In the field of PHP, the ThinkPHP framework, as a popular development framework, provides some convenient ways to implement asynchronous tasks.

Master how Golang enables game development possibilities Mar 16, 2024 pm 12:57 PM

In today's software development field, Golang (Go language), as an efficient, concise and highly concurrency programming language, is increasingly favored by developers. Its rich standard library and efficient concurrency features make it a high-profile choice in the field of game development. This article will explore how to use Golang for game development and demonstrate its powerful possibilities through specific code examples. 1. Golang’s advantages in game development. As a statically typed language, Golang is used in building large-scale game systems.

PHP Game Requirements Implementation Guide Mar 11, 2024 am 08:45 AM

PHP Game Requirements Implementation Guide With the popularity and development of the Internet, the web game market is becoming more and more popular. Many developers hope to use the PHP language to develop their own web games, and implementing game requirements is a key step. This article will introduce how to use PHP language to implement common game requirements and provide specific code examples. 1. Create game characters In web games, game characters are a very important element. We need to define the attributes of the game character, such as name, level, experience value, etc., and provide methods to operate these

How to implement exact division operation in Golang Feb 20, 2024 pm 10:51 PM

Implementing exact division operations in Golang is a common need, especially in scenarios involving financial calculations or other scenarios that require high-precision calculations. Golang's built-in division operator "/" is calculated for floating point numbers, and sometimes there is a problem of precision loss. In order to solve this problem, we can use third-party libraries or custom functions to implement exact division operations. A common approach is to use the Rat type from the math/big package, which provides a representation of fractions and can be used to implement exact division operations.

See all articles