极致呈现系列之：Vue3中使用Echarts图表初体验

Echarts简介

Echarts是一个基于JavaScript的开源可视化图表库，由百度开发和维护。它提供了多种类型的图表，包括折线图、柱状图、散点图、饼图、地图等，可以用于展示各种类型的数据。Echarts具有良好的交互性和可扩展性，可以通过自定义主题和图表样式来满足不同的需求。同时，Echarts还支持移动端和桌面端的多种平台，可以在不同的设备上进行数据可视化展示。

Echarts提供的图表类型及其适用场景

Echarts中提供的图表类型及其适用场景如下：

1. 折线图：适合展示数据随时间或者其他连续变量的变化趋势和变化情况，可以用于展示数据的增长趋势和波动情况，比较不同变量之间的趋势差异。
2. 柱状图：适合展示数据的大小和同类别之间的数据对比，可以用于比较不同变量之间的差异。
3. 饼图：适合展示不同类别数据之间的占比关系，可以用于展示不同类别之间数量的比例关系。
4. 散点图：适合展示两个变量之间的关系，可以用于展示变量之间的相关性。
5. 地图：适合展示不同地理区域之间的数据差异和地理位置信息，可以用于比较不同地理区域之间的数量差异。
6. 热力图：适合展示数据在空间上的分布情况和密度分布，可以用于展示数据的空间分布或密度特征。
7. 雷达图：适合展示多个变量之间的关系，可以用于展示不同变量之间的差异或相互影响。
8. 桑基图：适合展示多个变量之间数据的流向和转化情况，可以用于展示数据的流程和转化率及多个变量之间的相互影响关系。
9. K线图：适合展示股票等金融数据的变化情况，可以用于展示股票的价格趋势和波动情况。
10. 箱型图：适合展示数据的分布情况，可以用于展示数据的中位数、四分位数等统计特征。
11. 水球图：适合展示单一变量的状态，如进度、完成率等。
12. 漏斗图：适合展示数据的流程、转化率等信息。
13. 仪表盘：适合展示单一变量的状态，如温度、湿度、速度等。
14. 树图：适合展示层级结构的数据，可以用于展示不同层级之间的关系。
15. 矩形树图：适合展示层级结构的数据，可以用于展示不同层级之间的关系。
16. 关系图：适合展示复杂的关系网络或网络结构的数据，可以用于展示不同节点之间的关系。
17. 词云图：适合展示文本数据的关键词，可以用于展示文本数据的主题和关键词。
18. 旭日图：适合展示层级结构的数据，可以用于展示不同层级之间的关系。
19. 多图联动：可以将多个图表进行联动，可以用于展示不同变量之间的关系。
20. 玫瑰图：用于显示数据在不同类别之间的比例关系。
21. 3D图表：Echarts还支持各种3D图表，如3D柱状图、3D散点图等。
22. 时间线图表：可以根据时间轴展示数据的变化情况，可以用于展示数据随时间的变化趋势。

安装和使用Echarts

安装Echarts

在项目文件夹下，使用终端输入下面的指令在Vue项目中安装Echarts

npm install echarts --save

引入并使用Echarts

在Vue3中引入Echarts可以全局引入，也可以局部引入

全局引入

1. 在main.js文件中引入Echarts，并使用 provide 方法将 Echarts 实例提供给全局使用

import {
    createApp } from 'vue'
import App from './App.vue'
import * as echarts from 'echarts'

const app = createApp(App)
app.provide('$echarts', echarts)
app.mount('#app')

1. 在组件中使用 inject 方法获取 Echarts 实例，并在 onMounted 钩子函数中初始化图表

<template>
  <div ref="chart" style="width: 50%;height: 400px;"></div>
</template>
<script setup> 
import {
    ref,onMounted,inject } from 'vue'
const chart = ref(null) 

onMounted(() => {
   
  const echarts  = inject(