Methods of encapsulating bubble diagrams by vue+echarts

This article has shared the specific code of vue+echarts encapsulated bubble diagram for your reference. The specific content is as follows

Front-end visual encapsulation bubble diagram

1. html

<template>
  <div class="bubble-chart">
    <div ref="bubbleChart" class="bubble"></div>
  </div>
</template>

2. js

&lt;script&gt;
export default {
  name: "BubbleChart",
  props: {
    rowData: {
      default: () =&gt; {
        return [
          {
            name: "Employee Growth",
            value: -20,
          },
          {
            name: "Employee Growth",
            value: -38,
          },
          {
            name: "Employee Growth",
            value: 44,
          },
          {
            name: "Employee Growth",
            value: 42,
          },
          {
            name: "Employee Growth",
            value: 35,
          },
          {
            name: "Employee Growth",
            value: 30,
          },
          {
            name: "Employee Growth",
            value: -25,
          },
          {
            name: "Employee Growth",
            value: 20,
          },
          {
            name: "Employee Growth",
            value: 12,
          },
          {
            name: "Employee Growth",
            value: 15,
          },
          {
            name: "Revenue Growth",
            value: 15,
          },
          {
            name: "Revenue Growth",
            value: -15,
          },
          {
            name: "Revenue Growth",
            value: 30,
          },
          {
            name: "Revenue Growth",
            value: -21,
          },
          {
            name: "Revenue Growth",
            value: -22,
          },
          {
            name: "Revenue Growth",
            value: 23,
          },
          {
            name: "Revenue Growth",
            value: 8,
          },
          {
            name: "Revenue Growth",
            value: 56,
          },
          {
            name: "Revenue Growth",
            value: 31,
          },
          {
            name: "Revenue Growth",
            value: -3,
          },
        ];
      },
    },
    color: {
      default: () =&gt; {
        return "#50BCD8";
      },
    },
    legends: {
      type: Array,
      default: () =&gt; {
        return ["Employee Growth", "Revenue Growth"];
      },
    },
  },
  data() {
    return {
      chartInstance: null,
      staffData: [],
      revenueData: [],
      dataList: [],
    };
  },
  mounted() {
    ();
  },
  methods: {
    // Initialize the instance    initChart() {
      // Hang in DOM       = this.$(this.$);
      // Initialize the configuration item      let option = {
        grid: {
          left: "0%",
          right: "2%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          name: [1],
           nameTextStyle: {
            padding: [40, 65, 0, -65]    // The four numbers are the distance between the upper, right, lower and left, respectively        },
          type: "value",
          scale: true,
          axisLabel: {
            formatter: "{value}",
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#BFEBFF",
            },
          },
        },
        yAxis: {
          name: [0],
          type: "value",
          scale: true,
          axisLabel: {
            formatter: "{value}",
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#BFEBFF",
            },
          },
        },
        series: [],
      };

      (option);
      (option);
    },
    // Set series    setSeries(option) {
      ((e) =&gt; {
        if ( === [0]) {
          (e);
        } else {
          (e);
        }
      });
      ((e, i) =&gt; {
        ((item, index) =&gt; {
          if (i === index) {
            ([, ]);
          }
        });
      });
      let _series = {
        data: ,
        type: "scatter",
        symbolSize: function(data) {
          return ((data[1]) + (data[0])) / 2;
        },
        label: {
          show: false,
        },
        itemStyle: {
          normal: {
            color: ,
          },
        },
      };
      (_series);
    },
    // Set up the chart    setOption(option) {
      (option);
    },
  },
};
&lt;/script&gt;

3. css

<style lang="less" scoped>
.bubble-chart {
  width: 100%;
  height: 100%;

  .bubble {
    width: 100%;
    height: 100%;
  }
}
</style>

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.