Echarts简介
Echarts是一个基于JavaScript的开源可视化图表库，由百度开发和维护。它提供了多种类型的图表，包括折线图、柱状图、散点图、饼图、地图等，可以用于展示各种类型的数据。Echarts具有良好的交互性和可扩展性，可以通过自定义主题和图表样式来满足不同的需求。同时，Echarts还支持移动端和桌面端的多种平台，可以在不同的设备上进行数据可视化展示。
Echarts提供的图表类型及其适用场景
Echarts中提供的图表类型及其适用场景如下：
- 折线图：适合展示数据随时间或者其他连续变量的变化趋势和变化情况，可以用于展示数据的增长趋势和波动情况，比较不同变量之间的趋势差异。
- 柱状图：适合展示数据的大小和同类别之间的数据对比，可以用于比较不同变量之间的差异。
- 饼图：适合展示不同类别数据之间的占比关系，可以用于展示不同类别之间数量的比例关系。
- 散点图：适合展示两个变量之间的关系，可以用于展示变量之间的相关性。
- 地图：适合展示不同地理区域之间的数据差异和地理位置信息，可以用于比较不同地理区域之间的数量差异。
- 热力图：适合展示数据在空间上的分布情况和密度分布，可以用于展示数据的空间分布或密度特征。
- 雷达图：适合展示多个变量之间的关系，可以用于展示不同变量之间的差异或相互影响。
- 桑基图：适合展示多个变量之间数据的流向和转化情况，可以用于展示数据的流程和转化率及多个变量之间的相互影响关系。
- K线图：适合展示股票等金融数据的变化情况，可以用于展示股票的价格趋势和波动情况。
- 箱型图：适合展示数据的分布情况，可以用于展示数据的中位数、四分位数等统计特征。
- 水球图：适合展示单一变量的状态，如进度、完成率等。
- 漏斗图：适合展示数据的流程、转化率等信息。
- 仪表盘：适合展示单一变量的状态，如温度、湿度、速度等。
- 树图：适合展示层级结构的数据，可以用于展示不同层级之间的关系。
- 矩形树图：适合展示层级结构的数据，可以用于展示不同层级之间的关系。
- 关系图：适合展示复杂的关系网络或网络结构的数据，可以用于展示不同节点之间的关系。
- 词云图：适合展示文本数据的关键词，可以用于展示文本数据的主题和关键词。
- 旭日图：适合展示层级结构的数据，可以用于展示不同层级之间的关系。
- 多图联动：可以将多个图表进行联动，可以用于展示不同变量之间的关系。
- 玫瑰图：用于显示数据在不同类别之间的比例关系。
- 3D图表：Echarts还支持各种3D图表，如3D柱状图、3D散点图等。
- 时间线图表：可以根据时间轴展示数据的变化情况，可以用于展示数据随时间的变化趋势。
安装和使用Echarts
安装Echarts
在项目文件夹下，使用终端输入下面的指令在Vue项目中安装Echarts
代码语言：javascript复制npm install echarts --save引入并使用Echarts
在Vue3中引入Echarts可以全局引入，也可以局部引入
全局引入
- 在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')- 在组件中使用 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(
