实现一个数据可视化小项目（Vue3 + ECharts5）

最近在B站看到一个做ECharts项目的视频，自己好久都没使用过了，因此决定学习并总结记录下基于 Vue3 + ECharts5 开发数据可视化项目的具体做法

tailwindcss是直接应用CSS类来构建界面，而无需手动编写和管理大量的样式规则

css 复制代码

@tailwind base; 
@tailwind components; 
@tailwind utilities;

npm i --save axios@1.4.0 echarts@5.4.2

使用 axios 来实现数据请求

在 src 目录下新建 utils 文件夹，在该文件夹下新建request.js，封装数据请求方法。同样在 src 目录下新建api文件夹，在其中创建请求具体api接口的方法，并在页面中引入接口方法，获取到相应数据

echarts的具体使用步骤

在 vite.config.js 文件中，配置路径别名

路径别名配置: 使用 @ 代替 src

整体就是一个页面，分成左、中、右三大部分，其中每个部分的图表都封装成相应的组件，然后在主页面引入展示。页面样式都是使用tailwindcss的类控制（关于类的具体说明，需要查看文档）

注：vscode中安装Tailwind CSS IntelliSense 插件，可以进行tailwindcss的类提示

如：关于页面背景图的引用方式

a. 定义一个DOM 元素，并给该元素添加 ref 属性，用于获取DOM元素

html 复制代码

<div ref="target"></div>

b. 接收从父组件传递过来的数据

父组件通过v-bind(简写=>冒号)绑定一个数据（data），然后子组件通过defineProps接受传过来的值

js 复制代码

//父组件
<HorizontalBar :data="data.regionData
"/>

//子组件
const props = defineProps({
  data: {
    type: Object,
    required: true
  }
})

c. 实现横向柱形图

初始化echarts实例，保证视图渲染完毕后再执行 DOM 相关操作（需要放到生命周期的 onMounted 函数里）
创建一个renderChart()方法，在其中实现构建option配置对象（指定图表配置项和数据）、通过 setOption 方法显示图表。该renderChart()方法需要在初始化echarts实例之后进行调用

注：主要根据echarts官方文档，配置options对象

3.使用watch()函数监听数据的变化（图表数据是变化的，因此使用了setInterval()函数隔3秒就重新获取数据），侦听到变化后执行的渲染图表的renderChart()方法

js 复制代码

watch(
  () => props.data, 
  renderChart
)

基本和横向柱形图的实现一样，区别主要在于option配置对象的配置

绘制原理：

一个环形图通过两个饼图绘制，分为上层和底层两部分，上层作为绘制进度，底层作为背景图。饼图通过让内外边距的距离(半径位置radius)减小，变为环形。
多个环形的实现：动态修改每一对环的位置，让最外层的大小逐渐缩小，中心点位置保持一致。创建 getSeriesData（）方法，生成对应的上层和底层 series 数据，进行渲染

ps: 这里主要展示了两个图表的具体实现，其它的图表就不一一记述了