Echarts气泡图（相邻效果，气泡之间不叠加）

最新推荐文章于 2024-08-06 14:49:30 发布

brhrrd

最新推荐文章于 2024-08-06 14:49:30 发布

阅读量666

点赞数

分类专栏：前端 html 面试文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/brhrrd/article/details/123052780

版权

本文介绍了如何使用Echarts创建气泡图，并避免气泡间的重叠。通过设置圆的半径为0来隐藏最大背景图，调整padding值以控制圆圈间距，以及注意在D3.js代码中正确使用分号。

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

效果图

借助Echarts中提供的样例完成，官网样例可自行前往

官网链接放下面啦！！

Examples - Apache ECharts

使用版本

完整代码如下

<!-- d3js 气泡图 -->
<template>
  <div id="bubble" style="width: 500px;height:500px"></div>
</template>

<script>
import * as echarts from 'echarts/core';
import {
  DatasetComponent,
  TooltipComponent,
  VisualMapComponent
} from 'echarts/components';
import { CustomChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([
  DatasetComponent,
  TooltipComponent,
  VisualMapComponent,
  CustomChart,
  CanvasRenderer
]);
import * as d3 from 'd3';
export default {
  data() {
    return {
      option: {},
      colorList: ['#5470c6', '#91cc75', '#fac858&#