https://www.hcharts.cn/demo/highcharts/packed-bubble/

如果分类种类有很多，一种的柱状图显示出来界面非常拥挤，此时可以使用气泡图来表示。

首先我们要下载引入，这里参考此文档即可。

https://www.hcharts.cn/docs/install-from-npm/

    drawbar() {
      let that = this;
      const sortedData = this.qipaoListData.sort((a, b) => b.count - a.count);
      const top20Data = sortedData.slice(0, 20);
      if (this.qipaoListData.length > 20) {
        const otherData = sortedData.slice(20);
        const otherCount = otherData.reduce((acc, cur) => acc + cur.count, 0);
        const otherItem = {
          text: "其它",
          count: otherCount
        };
        top20Data.push(otherItem);
      }

      let chartContent = {
        coordinate: [],
        series: [
          {
            data: []
          }
        ]
      };
      top20Data.forEach(item => {
        chartContent.coordinate.push(item.text);
        chartContent.series[0].data.push(item.count);
      });

      const categories = chartContent.coordinate;
      const values = chartContent.series[0].data;

      // 定义颜色数组
      const colors = [
        "#FF5733",
        "#33FF57",
        "#3357FF",
        "#F1C40F",
        "#8E44AD",
        "#E74C3C",
        "#3498DB",
        "#2ECC71",
        "#9B59B6",
        "#34495E",
        "#1ABC9C",
        "#F39C12",
        "#D35400",
        "#C0392B",
        "#7D3C98",
        "#2980B9",
        "#27AE60",
        "#2C3E50",
        "#E67E22"
      ];

      // 创建数据数组，包含每个分类的名称、对应的值和颜色

      const chartData = categories.map((category, index) => ({
        name: category,
        value: values[index], // 对应的值
        z: values[index], // 使用 z 属性来控制气泡大小
        color: colors[index % colors.length] // 为每个气泡指定颜色
      }));

      const myChart = Highcharts.chart(this.$refs.chart1, {
        chart: {
          type: "packedbubble",
          height: "330px",
          events: {
            load: function() {
              this.series.forEach(series => {
                series.data.forEach(point => {
                  point.update({
                    z: point.value // 使用 value 作为气泡的大小
                  });
                });
              });
            }
          }
        },
        title: {
          text: null // 设置标题为 null，确保不显示标题
        },
        tooltip: {
          useHTML: true,
          pointFormat: "{point.name}<br>{point.value}条"
        },
        plotOptions: {
          packedbubble: {
            minSize: chartData.length === 1 ? "50%" : "70%",
            maxSize: chartData.length === 1 ? "100%" : "300%",
            zMin: 0,
            zMax: 1000,
            layoutAlgorithm: {
              splitSeries: false,
              gravitationalConstant: 0.02,
              bubblePadding: 10, //气泡间隔
              overlap: false
            },
            dataLabels: {
              enabled: true,
              align: "center",
              className: "circle-p",
              format: "{point.name}<br>{point.value}条", // 使用 <br> 标签换行
              filter: {
                property: "value",
                operator: ">",
                value: 0
              },
              style: {
                color: "black",
                textOutline: "none",
                fontWeight: "normal",
                align: "center",

                fontSize: "12px" // 设置文字大小
              }
            }
          }
        },
        series: [
          {
            name: "问题类型",
            data: chartData, // 使用从 chartContent 生成的数据
            events: {
              click: function(event) {
                if (event.point.name) {
                  if (event.point.name == "其它") {
                    that.$message({
                      message: "其它暂不支持反查!",
                      type: "warning",
                      showClose: true
                    });
                  } else {
                    that.condition.wTLX = event.point.name;
                    that.currentListDataX.index = 1;
                    that.condition.pageIndex = 1;
                    that.getTable();
                    that.echartsChange2 = true;
                  }
                }
              }
            }
          }
        ]
      });
    },

这里面是对气泡做了一个限制。只取数组前数量最多的20个。对气泡赋上颜色及一些基础设置供大家参考