本文主要是介绍Highcharts气泡填充图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
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个。对气泡赋上颜色及一些基础设置供大家参考
这篇关于Highcharts气泡填充图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
