当前位置：首页 > article >正文

7.在 Vue 3 中使用 ECharts 实现动态散点图：完整教程与代码解析

article 2025/1/12 1:37:56

引言

在前端开发中，数据可视化是一个非常重要的领域。ECharts 是一个强大的 JavaScript 图表库，能够帮助我们轻松实现各种复杂的图表效果。本文将详细介绍如何在 Vue 3 中使用 ECharts 实现一个动态散点图，并逐步解析代码的实现细节。

1. 环境准备

在开始之前，确保你已经安装了以下依赖：

Vue 3
ECharts

可以通过以下命令安装 ECharts：

npm install echarts

2. 项目结构

我们将创建一个 Vue 组件来实现散点图。以下是项目的文件结构：

src/
├── components/
│   └── BackButton.vue
├── views/
│   └── ScatterChart.vue

3. 实现步骤

3.1 创建 Vue 组件

在 ScatterChart.vue 中，我们定义了一个 Vue 组件，用于渲染散点图。

<!--
 * @Author: 彭麒
 * @Date: 2025/1/10
 * @Email: 1062470959@qq.com
 * @Description: 此源码版权归吉檀迦俐所有，可供学习和借鉴或商用。
 -->
<template>
  <div class="w-full justify-start flex h-[180px] items-center pl-10">
    <BackButton @click="goBack"/>
  </div>
  <div class="font-bold text-[24px]">在Vue3中使用Echarts实现散点图</div>
  <div class="chart-container mt-4">
    <div ref="chartRef" class="bubble-chart"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import BackButton from "@/views/components/BackButton.vue";
import router from "@/router";
const goBack = () => {
  setTimeout(() => {
    router.push('/Echarts')
  }, 1000)
}
const chartRef = ref<HTMLElement | null>(null)
let chart: echarts.ECharts | null = null

const result = [
  {
    id: 1,
    name: '1电力热力',
    num: 0,
    size: 150,
    color: '#00DEFF',
    position: [50, 50],
  },
  {
    id: 2,
    name: '2水利环境',
    num: 0,
    size: 130,
    color: '#0c6491',
    position: [10, 30],
  },
  {
    id: 3,
    name: '3批发零售',
    num: 0,
    size: 100,
    color: '#0c6491',
    position: [75, 65],
  },
  {
    id: 4,
    name: '4制造业',
    num: 0,
    size: 100,
    color: '#0c6491',
    position: [27, 65],
  },
  {
    id: 5,
    name: '5房地产',
    num: 0,
    size: 100,
    color: '#0c6491',
    position: [68, 17],
  },
  {
    id: 6,
    name: '6交通运输',
    num: 0,
    size: 70,
    color: '#0c6491',
    position: [8, 90],
  },
  {
    id: 7,
    name: '7居民服务',
    num: 0,
    size: 70,
    color: '#0c6491',
    position: [35, 5],
  },
  {
    id: 8,
    name: '8教育',
    num: 0,
    size: 70,
    color: '#0c6491',
    position: [65, 89],
  },
  {
    id: 9,
    name: '9教育',
    num: 0,
    size: 70,
    color: '#0c6491',
    position: [98, 90],
  },
  {
    id: 10,
    name: '10教育',
    num: 0,
    size: 70,
    color: '#0c6491',
    position: [90, 30],
  },
]

const initChart = () => {
  if (!chartRef.value) return

  chart = echarts.init(chartRef.value)

  const data = result.map((item) => ({
    name: item.name,
    number: item.num,
    value: item.position,
    symbolSize: item.size,
    itemStyle: {
      normal: {
        color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
          {
            offset: 0.2,
            color: 'rgba(27, 54, 72, 0.3)',
          },
          {
            offset: 1,
            color: item.color,
          },
        ]),
        borderWidth: 3,
        borderColor: item.color,
      },
    },
  }))

  const option = {
    backgroundColor: '#061438',
    grid: {
      show: false,
      top: 10,
      bottom: 10,
    },
    xAxis: [
      {
        type: 'value',
        show: false,
        min: 0,
        max: 100,
      },
    ],
    yAxis: [
      {
        min: 0,
        show: false,
        max: 100,
      },
    ],
    series: [
      {
        type: 'scatter',
        symbol: 'circle',
        symbolSize: 120,
        label: {
          normal: {
            show: true,
            formatter: '{b},{c}',
            color: '#fff',
            textStyle: {
              fontSize: '20',
            },
          },
        },
        animationDurationUpdate: 500,
        animationEasingUpdate: 500,
        animationDelay: function (idx) {
          return idx * 100
        },
        data: data,
      },
    ],
  }

  chart.setOption(option)
}

const handleResize = () => {
  chart?.resize()
}

onMounted(() => {
  initChart()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  chart?.dispose()
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
.chart-container {
  width: 80%;
  height: 50%;
  min-height: 600px;
  background-color: #061438;
  margin-left: 10%;
}

.bubble-chart {
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 768px) {
  .chart-container {
    min-height: 400px;
  }
}

@media screen and (max-width: 480px) {
  .chart-container {
    min-height: 300px;
  }
}
</style>

3.2 代码解析

模板部分:
- 使用 ref 绑定了一个 div 元素作为 ECharts 的容器。
- 页面顶部有一个返回按钮，点击后会延迟 1 秒跳转到 /Echarts 路由。
脚本部分:
- 引入了 Vue 3 的 ref、onMounted 和 onUnmounted 生命周期钩子。
- 使用 echarts 初始化图表，并在组件挂载时调用 initChart 函数。
- 定义了一个 result 数组，包含散点图的数据（如名称、大小、颜色、位置等）。
- initChart 函数将 result 数据转换为 ECharts 所需的格式，并设置图表的配置项。
- 监听窗口的 resize 事件，以便在窗口大小变化时调整图表大小。
- 在组件卸载时销毁图表实例并移除事件监听器。
样式部分:
- 定义了图表容器的样式，包括宽度、高度和背景颜色。
- 使用媒体查询对移动端进行了适配。