echarts做了一个气泡图

最新推荐文章于 2026-04-06 09:40:13 发布

原创

最新推荐文章于 2026-04-06 09:40:13 发布 · 1.6k 阅读

标签

#echarts #javascript #前端

收录于

本文介绍了如何利用ECharts 4.2.1版本创建一个气泡图，包括设置图表背景颜色、隐藏坐标轴、自定义图标大小和颜色，并展示了具体的Vue组件代码实现。通过数据重组和随机坐标生成，实现了气泡大小根据数据比例变化的效果，同时在标签上显示详细信息。

今天，用echarts做了一个气泡图，功能只是实现了，样式还需要自己修改，
我用的echarts的版本是v4.2.1
在这里插入图片描述

<template>
  <div>
    <div style="width:50%">
      <div class="perstatimg">
        <div id="myHorizontal" class="myHorizontalClass" :style="{ width: '643px', height: '300px' }"></div>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
    }
  },
  mounted(){
    this.drawLine()
  },
  methods: {
    // 画图
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myHorizontal"));
      // 绘制流程数量图表
      myChart.setOption({
        backgroundColor: this.$echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [
          {
            offset: 0,
            color: '#f7f8fa'
          },
        ]),
        title: {
          text: '气