第vue+echars封裝氣泡圖的方法本文實(shí)例為大家分享了vue+echars封裝氣泡圖的具體代碼，供大家參考，具體內(nèi)容如下

前端可視化封裝氣泡圖

1.html

template

div

divref="bubbleChart"/div

/div

/template

2.js

script

exportdefault{

name:"BubbleChart",

props:{

rowData:{

default:()={

return[

{

name:"員工增長",

value:-20,

},

{

name:"員工增長",

value:-38,

},

{

name:"員工增長",

value:44,

},

{

name:"員工增長",

value:42,

},

{

name:"員工增長",

value:35,

},

{

name:"員工增長",

value:30,

},

{

name:"員工增長",

value:-25,

},

{

name:"員工增長",

value:20,

},

{

name:"員工增長",

value:12,

},

{

name:"員工增長",

value:15,

},

{

name:"營收增長",

value:15,

},

{

name:"營收增長",

value:-15,

},

{

name:"營收增長",

value:30,

},

{

name:"營收增長",

value:-21,

},

{

name:"營收增長",

value:-22,

},

{

name:"營收增長",

value:23,

},

{

name:"營收增長",

value:8,

},

{

name:"營收增長",

value:56,

},

{

name:"營收增長",

value:31,

},

{

name:"營收增長",

value:-3,

},

];

},

},

color:{

default:()={

return"#50BCD8";

},

},

legends:{

type:Array,

default:()={

return["員工增長","營收增長"];

},

},

data(){

return{

chartInstance:null,

staffData:[],

revenueData:[],

dataList:[],

};

mounted(){

this.initChart();

methods:{

//初始化實(shí)例

initChart(){

//

掛在DOM

this.chartInstance=this.$echarts.init(this.$refs.bubbleChart);

//

初始化配置項

letoption={

grid:{

left:"0%",

right:"2%",

bottom:"3%",

containLabel:true,

},

xAxis:{

name:this.legends[1],

nameTextStyle:{

padding:[40,65,0,-65]

//四個數(shù)字分別為上右下左與原位置距離

},

type:"value",

scale:true,

axisLabel:{

formatter:"{value}",

},

splitLine:{

show:false,

},

axisLine:{

lineStyle:{

color:"#BFEBFF",

},

},

},

yAxis:{

name:this.legends[0],

type:"value",

scale:true,

axisLabel:{

formatter:"{value}",

},

splitLine:{

show:false,

},

axisLine:{

lineStyle:{

color:"#BFEBFF",

},

},

},

series:[],

};

this.setSeries(option);

this.setOption(option);

},

//

設(shè)置series

setSeries(option){

this.rowData.forEach((e)={

if(===this.legends[0]){

this.staffData.push(e);

}else{

this.revenueData.push(e);

}

});

this.staffData.forEach((e,i)={

this.revenueData.forEach((item,index)={

if(i===index){

this.dataList.push([e.value,item.value]);

}

});

});

let_series={

data:this.dataList,

type:"scatter",

symbolSize:function(data){

return(Math.abs(data[1])+Math.abs(data[0]))/2;

},

label:{

show:false,

},

itemStyle:{

normal:{

color:this.color,

},

},

};

option.series.push(_series);

},

//

設(shè)置圖表

setOption(option){

this.chartInstance