VUE2.0+Element

VUE2.0+Element

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

-html

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

var indicatorName= this.mapOptions[i].title.text;

var dom = document.getElementById([indicatorName])

var heigth = $(dom).siblings('div').height()*1.5;

var width = $(dom).siblings('div').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

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

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

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

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

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

var sigleSerie={type:'line'};

var x= [];

for(var z = 0;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

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

js,panel组件

var panelsVueArr = [];

var responseData;

function createHtml(respData){

var indicatorResult = respData.indicatorResult;

var indicators = [];

for(var j=0;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

var el = $("

$(".resultDiv").append(el[0]);

var vueObj = new Vue({

el : el[0],

template : '

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 = '

'>行:'+params.seriesName +'
';

html+='列:'+params.name +'
';

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+='值:'+showValue +'';

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 = '

+ '">行:'+params.seriesName +'
';

html+='

+ '">列:'+params.name +'
';

http:// 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+='

+ '">值:'+showValue +'';

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][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 = '行:'+params.seriesName +'';

html+='列:'+params.name +'';

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+='值:'+showValue +'';

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图数据的格式化，和对数据的自适应。修改为上述方式之后发现性能提高了不止一个数量级。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。