Rumah > Artikel > hujung hadapan web > 通过VUE2.0+Element-UI+Echarts如何实现封装的组件
通过VUE2.0+Element-UI+Echarts如何实现封装的组件
- 亚连asal
- 2018-06-02 09:46:511767semak imbas
下面我就为大家分享一篇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='resulticon'>
{{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: ''
},
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<this.mapOptions.length;i++){
var indicatorName= this.mapOptions[i].title.text;
var dom = document.getElementById([indicatorName])
var heigth = $(dom).siblings('p').height()*1.5;
var width = $(dom).siblings('p').width();
$(dom).css({
height:heigth,
width:width
});
var myChart= echarts.init(document.getElementById([indicatorName]),'macarons');
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:'line'};
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:'line'};
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, 'Sheet', 'download' + new Date().getTime() + '.xls');
}
},
watch : {
initData : function(newValue){
this.indicators=this.listToRowObject(newValue);
}
},
mounted : function(){
}
});
Vue.set(panelsVue,'initData',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 : '<p id="panels"><el-collapse><el-collapse-item>'+
'<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>'+
'<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" :id="item.indicatorName"></p></template><template v-if="tableAndMap"><el-table :data="item.tableData" max-height="300" stripe border fix fit style="width: 100%">'+
'<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>',
props : ['item','mapOption'],
data : {
indicator : indicators[i],
rowOrColumn : false, // 行列转换
tableOrMap : true, // 表和图切换
tableAndMap : true, // 表和图同时显示
indexid : i,
mapInitOption : {
title : {
text : '',
show : false
},
tooltip : {
trigger : 'item',
formatter: ''
},
legend : {
data : [],
right : 90, // 不要遮住右边的按钮
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 初始化参数
},
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 : 'line',
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 = '<span style="display:inline-block;margin-right:5px;"'+
'>行:'+params.seriesName +'</span><br>';
html+='<span style="display:inline-block;margin-right:5px;'+
'">列:'+params.name +'</span><br>';
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('chart.wan')+ myUnit;
}else{
if(unitHandle=='%'){
showValue=parseFloat(showValue)*100;
showValue = showValue.toFixed(1) + myUnit;
}else{
showValue = showValue.toFixed(1) + myUnit;
}
}
}
}
html+='<span style="display:inline-block;margin-right:5px;'+
'">值:'+showValue +'</span>';
return html;
};
return sigleOption;
},
listToRowMap : function (ListAndList) {
/* var mapType;
if(typeof(this.mapOptions)=='undefined'){
mapType='line';
}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 : 'line',
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 = '<span style="display:inline-block;margin-right:5px;"'
+ '">行:'+params.seriesName +'</span><br>';
html+='<span style="display:inline-block;margin-right:5px;"'
+ '">列:'+params.name +'</span><br>';
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('chart.wan')+myUnit;
}else{
if(unitHandle=='%'){
showValue=parseFloat(showValue)*100;
showValue = showValue.toFixed(1) + myUnit;
}else{
showValue = showValue.toFixed(1) + myUnit;
}
}
}
}
html+='<span style="display:inline-block;margin-right:5px;"'
+ '">值:'+showValue +'</span>';
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+'('+listAndList.indicatorUnit+')');
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, 'Sheet', 'download' + new Date().getTime() + '.xls');
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('chart.wan');
}
}
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 = '<span style="display:inline-block;margin-right:5px;' + 'border-radius:10px;width:9px;height:9px;background-color:'
+ color + '">行:'+params.seriesName +'</span>';
html+='<span style="display:inline-block;margin-right:5px;' + 'border-radius:10px;width:9px;height:9px;background-color:'
+ color + '">列:'+params.name +'</span>';
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('chart.wan');
}else{
showValue=parseFloat(showValue)*100;
showValue = showValue.toFixed(1) + unitHandle();
}
}
}
html+='<span style="display:inline-block;margin-right:5px;' + 'border-radius:10px;width:9px;height:9px;background-color:'
+ color + '">值:'+showValue +'</span>';
console.log(html);
return html;
}
// 数字格式处理 1,000,000
function toThousands(num) {
if (typeof (num) == 'undefined') {
num = ""
}
num = num + '', result = '';
if (num.indexOf('%') > -1) {
return num;
}
var s = "";
if (num.indexOf('.') > -1) {
s = num.substring(num.indexOf('.'), num.length);
num = num.substring(0, num.indexOf('.'));
}
var n = false;
if (num.indexOf('-') > -1) {
num = num.substring(1);
n = true;
}
while (num.length > 3) {
result = ',' + num.slice(-3) + result;
num = num.slice(0, num.length - 3);
}
if (num != undefined) {
result = num + result;
}
if (n) {
result = "-" + result;
}
if(s=='.0'){
return result;
}
return result + s;
}
// 千分位与单位处理
function cellsDeal(num,unit) {
if (typeof (num) == 'undefined') {
num = "";
}
if(num===''){
return num;
}
num = num + '', result = '';
if (unit=='%') {
num=parseFloat(num)*100;
num = num.toFixed(1) + '';
if(num.indexOf(".")!=-1){
return num.substring(0,num.indexOf(".")+2)+"%";
}else{
return num+"%";
}
}
var s = "";
if (num.indexOf('.') > -1) {
num=parseFloat(num).toFixed(1);
s = num.substring(num.indexOf('.'), num.length); //小数位
num = num.substring(0, num.indexOf('.')); //整数位
}
var n = false;
if (num.indexOf('-') > -1) {
num = num.substring(1);
n = true;
}
while (num.length > 3) {
result = ',' + 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['width'] = legendWidth;
options.grid.y2 = bottomHeight;
options.grid.y = topHeight;
if(chartWidth!='810'){
options.grid["x"]=40;
}
var columnAndRow = ['startProvince','startArea']; //始发省份和地区默认X轴旋转45度
if(options.xAxis[0].data[0].match('^(\\d+)\\+(\\d+)')!=null||columnAndRow.indexOf(column.code)!=-1||columnAndRow.indexOf(row.code)!=-1){
options.xAxis[0].axisLabel['rotate']=45;
}else{
options.xAxis[0].axisLabel['rotate']=0;
}
return {chartHeight:chartHeight,chartWidth:chartWidth};
}
上述代码实现了 echart图数据的格式化，和对数据的自适应。修改为上述方式之后发现性能提高了不止一个数量级。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
Atas ialah kandungan terperinci 通过VUE2.0+Element-UI+Echarts如何实现封装的组件. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：在使用vue-aplayer插件时出现了一些问题如何解决Artikel seterusnya：通过使用vue如何才能实现添加mp3音频文件
Artikel berkaitan
Lihat lagi- Analisis mendalam bagi komponen kumpulan senarai Bootstrap
- Penjelasan terperinci tentang fungsi JavaScript kari
- Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)
- Angularjs menyepadukan UI WeChat (weui)
- Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional