微客导航 » 文章资讯 » VUE2.0+Element-UI+Echarts封装的组件实例

VUE2.0+Element-UI+Echarts封装的组件实例

2023-09-15 21:34:05 214

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

-html







{{item.indicatorName}}

js，panel组件的代码

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


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

js,panel组件

varpanelsVueArr=[];
varresponseData;
functioncreateHtml(respData){
varindicatorResult=respData.indicatorResult;
varindicators=[];
for(varj=0;j

"); $(".resultDiv").append(el[0]); varvueObj=newVue({ el:el[0], template:'

'+ '{{item.indicatorName}}({{item.indicatorUnit}})'+ '

'+ '

'+ '16?250:column.length*15">

', 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; } varindicatorName=this.mapOption.title.text; varmyChart=echarts.init(document.getElementById([indicatorName]),rmp_theme); vargrid=computerGrid(this.mapOption); myChart.resize({ width:grid.chartWidth+"px", height:grid.chartHeight+"px" }); myChart.setOption(this.mapOption); ev.stopPropagation(); }, listToColumnObject:function(ListAndList){ varx_y=column.text+"\\"+row.text; varitemTable={}; varcolumnR=[]; vartableData=[]; for(varyIndexinListAndList.indicatorData){ varobj={}; obj[x_y]=ListAndList.colKeys[yIndex]; for(varxIndexinListAndList.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; returnitemTable; }, listToRowObject:function(ListAndList){ varitemTable={}; varindicatorMap={}; varindicatorData=[]; vary_x=row.text+"\\"+column.text; varcolumnR=[]; vartableData=[]; columnR.push(y_x); columnR=columnR.concat(ListAndList.colKeys); indicatorData.push(ListAndList.rowKeys); indicatorData=indicatorData.concat(ListAndList.indicatorData); for(vark=0;k行:'+params.seriesName+'
'; html+='列:'+params.name+'
'; varshowValue=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+='值:'+showValue+''; returnhtml; }; returnsigleOption; }, listToRowMap:function(ListAndList){ /*varmapType; if(typeof(this.mapOptions)=='undefined'){ mapType='line'; }else{ mapType=echarts.getInstanceByDom(document.getElementById(ListAndList.indicatorNames[0])).getOption().series[0].type; }*/ varoptions=[]; varsigleOption={}; sigleOption=this.mapInitOption;//实现深复制 varcolKeys=JSON.parse(JSON.stringify(ListAndList.colKeys)); colKeys.pop(); sigleOption.xAxis[0]["data"]=colKeys; varindicatorName=ListAndList.indicatorName; sigleOption["title"]["text"]=indicatorName; varseries=[]; for(vark=0;k行:'+params.seriesName+'
'; html+='列:'+params.name+'
'; varshowValue=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+='值:'+showValue+''; returnhtml; }; returnsigleOption; }, convert:function(ev){ if(this.tableAndMap){ this.tableAndMap=false; }else{ this.tableAndMap=true; } varindicatorName=this.mapOption.title.text; varmyChart=echarts.init(document.getElementById([indicatorName]),rmp_theme); vargrid=computerGrid(this.mapOption); myChart.resize({ width:grid.chartWidth+"px", height:grid.chartHeight+"px" }); myChart.setOption(this.mapOption); ev.stopPropagation(); }, exportExcel:function(ev){ varlistAndList=JSON.parse(JSON.stringify(this.indicator)); varrowTd=listAndList.rowKeys; varexcellData=[]; rowTd.splice(0,0,listAndList.indicatorName+'('+listAndList.indicatorUnit+')'); excellData.push(rowTd); for(vari=0;i10000){ //千分位+万 text=toThousands((value/10000).toFixed(1))+$.i18n.get('chart.wan'); } } if(value.formatter){ text=value.formatter.replace("{value}",text); } returntext; } //格式化tooltip vartooltipFormatter=function(params,ticket,callback){ console.log(params); varcolor=params.color; varhtml='行:'+params.seriesName+''; html+='列:'+params.name+''; varshowValue=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+='值:'+showValue+''; console.log(html); returnhtml; } //数字格式处理1,000,000 functiontoThousands(num){ if(typeof(num)=='undefined'){ num="" } num=num+'',result=''; if(num.indexOf('%')>-1){ returnnum; } vars=""; if(num.indexOf('.')>-1){ s=num.substring(num.indexOf('.'),num.length); num=num.substring(0,num.indexOf('.')); } varn=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'){ returnresult; } returnresult+s; } //千分位与单位处理 functioncellsDeal(num,unit){ if(typeof(num)=='undefined'){ num=""; } if(num===''){ returnnum; } num=num+'',result=''; if(unit=='%'){ num=parseFloat(num)*100; num=num.toFixed(1)+''; if(num.indexOf(".")!=-1){ returnnum.substring(0,num.indexOf(".")+2)+"%"; }else{ returnnum+"%"; } } vars=""; if(num.indexOf('.')>-1){ num=parseFloat(num).toFixed(1); s=num.substring(num.indexOf('.'),num.length);//小数位 num=num.substring(0,num.indexOf('.'));//整数位 } varn=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=""; } returnresult+s; } /*动态计算echarts的grid属性*/ functioncomputerGrid(options){ //图宽度默认 varchartWidth=810; //图例占宽度比 varlegendWidth=chartWidth*0.8; //图高度默认 varchartHeight=250; //图中grid离容器下边距高度默认 varbottomHeight=25; //图中grid离容器上边距高度默认 vartopHeight=40; //根据x轴刻度数量算宽度，如果超过默认则使用计算值 if(options.xAxis[0].data.length*30-chartWidth>0){ chartWidth=options.xAxis[0].data.length*30; } //x轴刻度最长的长度值 varmaxLength=0; varlegendCount=8; if(options.xAxis[0].data.length>legendCount){ options.xAxis[0].data.forEach(function(val){ if(maxLength1){ 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; } varcolumnAndRow=['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图数据的格式化，和对数据的自适应。修改为上述方式之后发现性能提高了不止一个数量级。

以上这篇VUE2.0+Element-UI+Echarts封装的组件实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

VUE2.0+Element-UI+Echarts封装的组件实例

热门推荐

随机推荐