Echarts实现气泡图（含完整代码，可直接运行）

最新推荐文章于 2024-07-11 15:27:50 发布

Delicia_Lani

最新推荐文章于 2024-07-11 15:27:50 发布

阅读量1w

点赞数 4

本文链接：https://blog.csdn.net/qq_29918313/article/details/121211210

版权

本文介绍如何使用Echarts创建一种特殊的气泡图，不显示横纵坐标，通过Echarts库生成随机数并根据value调整气泡大小。尽管Echarts自带的气泡图可能无法满足需求，但通过自定义，可以实现所需效果。文章提供了一个已封装的chart实例作为参考。

摘要由CSDN通过智能技术生成

Echarts示例图中提供的气泡图是这样的：Examples - Apache ECharts

当然还提供了另外几个，具体可参考官网。但是我的需求中不能显示横纵坐标，具体的实现效果如图所示：

在展现气泡的过程中，最大的问题应该是某一个气泡的横纵坐标，因为要防止重合。其实后来想想，可以不用这个气泡图，而是自己写，然后生成随机数渲染图，并且球的大小根据value值得变大而变大。既然已经用了，那就来说说使用Echarts 的实现吧。

对了，下述代码中chart是我自己封装的，大家在使用的时候直接写个div，引上echarts那一套就可以了。

<template>
  <div>
    <chart
      v-else
      id="chart"
      ref="pieChart"
      height="120px"
    />
  </div>
</template>

<script>

export default {
  components: {
  },
  data() {
    // const protocolData = [
    //   [
    //     [11, 11, 41, 'Australia'],
    //     [20, 20, 21, 'China'],
    //     [30, 72, 41, 'South Korea'],
    //     [43, 31, 31, 'Canada'],
    //     [50, 50, 51, 'Norway'],
    //     [60, 60, 21, 'test'],
    //     [76, 70, 31, 'France'],
    //     [86, 80, 21, 'France1'],
    //   ]
    // ];
    return {