如何将Vue Echarts的气泡图封装成长尾词？

本文共计601个文字，预计阅读时间需要3分钟。

原文：本文实例为大家分享了vue+echarts封装气泡图的完整代码，供大家参考，具体内容如下：前端可视化封装气泡图+1.++template

本文以实例形式展示了如何使用vue和echarts封装气泡图，具体代码如下：前端可视化气泡图封装+1.+HTML+模板

本文实例为大家分享了vue+echars封装气泡图的具体代码，供大家参考，具体内容如下

前端可视化封装气泡图

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。