Vue3中使用Echarts图表-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue3中使用Echarts图表。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Echarts简介

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

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

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

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

安装和使用Echarts

安装Echarts

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

npm install echarts --save

引入并使用Echarts

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

全局引入文章来源地址https://www.toymoban.com/news/detail-481505.html

在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