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>

来源：https://blog.csdn.net/weixin_45579925/article/details/119999805