一个优秀的个人网站_绍兴网站建设方案_seo网站关键字优化_小程序搭建教程

引言

在前端开发中，数据可视化是一个非常重要的领域。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 = nullconst 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) returnchart = 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 代码解析

1. 模板部分:

   • 使用 ref 绑定了一个 div 元素作为 ECharts 的容器。

   • 页面顶部有一个返回按钮，点击后会延迟 1 秒跳转到 /Echarts 路由。

2. 脚本部分:

   • 引入了 Vue 3 的 ref、onMounted 和 onUnmounted 生命周期钩子。

   • 使用 echarts 初始化图表，并在组件挂载时调用 initChart 函数。

   • 定义了一个 result 数组，包含散点图的数据（如名称、大小、颜色、位置等）。

   • initChart 函数将 result 数据转换为 ECharts 所需的格式，并设置图表的配置项。

   • 监听窗口的 resize 事件，以便在窗口大小变化时调整图表大小。

   • 在组件卸载时销毁图表实例并移除事件监听器。

3. 样式部分:

   • 定义了图表容器的样式，包括宽度、高度和背景颜色。

   • 使用媒体查询对移动端进行了适配。

---

4. 优化建议

1. 数据动态化:

   • 通过 API 或父组件传递数据，使图表更具通用性。

2. 图表配置优化:

   • 将图表的配置项提取为一个单独的函数或文件，便于复用和维护。

3. 响应式处理:

   • 进一步优化图表内容（如字体大小、符号大小等）以适应不同屏幕尺寸。

4. 代码复用:

   • 将图表初始化逻辑封装为一个自定义 Hook 或组件。

---

5. 总结

通过本文的介绍，你已经学会了如何在 Vue 3 中使用 ECharts 实现一个动态散点图。希望这篇文章对你有所帮助！如果你有任何问题或建议，欢迎在评论区留言。

---

参考链接

• ECharts 官方文档

• Vue 3 官方文档

---

版权声明：本文代码版权归吉檀迦俐所有，可供学习和借鉴或商用。转载请注明出处。

---

希望这篇文章能帮助你在 CSDN 上获得更多的阅读和点赞！如果有其他需求，欢迎随时联系我！