今天,用echarts做了一个气泡图,功能只是实现了,样式还需要自己修改,
我用的echarts的版本是v4.2.1
<template>
<div>
<div style="width:50%">
<div class="perstatimg">
<div id="myHorizontal" class="myHorizontalClass" :style="{ width: '643px', height: '300px' }"></div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
}
},
mounted(){
this.drawLine()
},
methods: {
// 画图
drawLine() {
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("myHorizontal"));
// 绘制流程数量图表
myChart.setOption({
backgroundColor: this.$echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [
{
offset: 0,
color: '#f7f8fa'
},
]),
title: {
text: '气泡图',
x:'center',
},
legend: {
show: false
},
grid: {
left: '8%',
top: '10%'
},
xAxis: {
show: false
},
yAxis: {
show: false
},
toolbox: {
show: true,
type: ["bar"]
},
series: [
{
name: '1990',
data: [],
type: 'scatter',
symbolSize: function (data) {
return data[2];
},
itemStyle: {
color: 'rgba(46,107,230,0.10)',
borderColor: ' #7FB1FF'
},
label: {
show: true,
position: 'inside',
color: '#666666',
fontSize: 12,
formatter: function (param) {
let data = param.data[3].length > 4 ? param.data[3].slice(0, 4) + '...' : param.data[3];
var astr = '{a|' + param.data[4].toFixed(2) + '%' + '}' + '\n' + data;
return astr;
},
rich: {
a: {
color: '#2E6BE6',
align: 'center'
}
}
}
}
]
});
var data = [
{ name: "dns", value: 66 },
{ name: "htte", value: 155 },
{ name: "sdf", value: 911 },
{ name: "sd", value: 8 },
{ name: "s", value: 6221 },
{ name: "asd", value: 206 },
{ name: "qwe", value: 209 },
{ name: "qwewq", value: 132776 },
{ name: "999", value: 12 },
{ name: "fdgd", value: 550 },
{ name: "dns", value: 66 },
{ name: "htte", value: 155 },
{ name: "sdf", value: 911 },
{ name: "sd", value: 8 },
{ name: "s", value: 6221 },
{ name: "asd", value: 206 },
{ name: "qwe", value: 209 },
{ name: "qwewq", value: 132776 },
{ name: "999", value: 12 },
{ name: "fdgd", value: 550 },
// { name: "11", value: 99 },
// { name: "12", value: 123 },
// { name: "13", value: 11 },
// { name: "14", value: 55 },
// { name: "15", value: 77 },
// { name: "999", value: 234 },
// { name: "101", value: 78 },
// { name: "11", value: 99 },
// { name: "12", value: 123 },
// { name: "13", value: 11 },
// { name: "14", value: 55 },
// { name: "15", value: 77 },
];
var newdata = [];
let len = data.length;
if (len) {
let total = 0;
data.forEach(element => {
total += element.value;
});
let indexArr = this.generateNRandomCoords(len, len);
data.forEach((element, index) => {
// 重构数组x轴、y轴、球的大小、name、value
newdata.push([index * 3, indexArr[index], this.getTotalValue(element.value / total * 100), element.name, element.value / total * 100]);
});
}
myChart.setOption(
this.option = {
series: [
{
data: newdata,
},
],
}
);
},
// 随机生成球的y轴坐标,x轴在下方有体现,取了index * 3
generateNRandomCoords(height, n) {
let coords = [];
function next() {
let y = Math.random() * height;
if (coords.find((y1) => {
y1 === y;
})) {
return next();
}
return y;
}
for (let i = 0; i < n; i++) {
coords[i] = next();
}
return coords;
},
/**
* 避免数值非常大的时候,球会非常大,这里做个限制,超过某个值后,球的大小就固定为40
* data: 返回的某一个球的value值
* retura值是球的大小
*/
getTotalValue(data) {
if (data < 0.1) {
return 5;
} else if (0.1 <= data && data < 1) {
return 10;
} else if (1 <= data && data < 10) {
return 20;
} else if (10 <= data && data < 50) {
return 30;
} else {
return 40;
}
}
}
};
</script>
<style>
.perstatimg{
margin-top:20px;
height: 500px;
overflow: hidden;
}
</style>
参考链接:Echarts实现气泡图