vue+echarts封装气泡图的方法
作者：醒醒打工仔
这篇文章主要为大家详细介绍了vue+echarts封装气泡图的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue+echarts封装气泡图的具体代码，供大家参考，具体内容如下
前端可视化封装气泡图
1. html
<template> <div class="bubble-chart"> <div ref="bubbleChart" class="bubble"></div> </div> </template>
2. js
<script>
export default {
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: {
// 初始化实例
initChart() {
// 挂在 DOM
this.chartInstance = this.$echarts.init(this.$refs.bubbleChart);
// 初始化配置项
let option = {
grid: {
left: "0%",
right: "2%",
bottom: "3%",
containLabel: true,
},
xAxis: {
name: this.legends[1],
nameTextStyle: {
padding: [40, 65, 0, -65] // 四个数字分别为上右下左与原位置距离
},
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);
},
// 设置series
setSeries(option) {
this.rowData.forEach((e) => {
if (e.name === 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);
},
// 设置图表
setOption(option) {
this.chartInstance.setOption(option);
},
},
};
</script>3. css
<style lang="less" scoped>
.bubble-chart {
width: 100%;
height: 100%;
.bubble {
width: 100%;
height: 100%;
}
}
</style>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。