vue+echars封装气泡图的方法

本文实例为大家分享了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>

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