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

目录

  • Echarts简介
  • Echarts提供的图表类型及其适用场景
  • 安装和使用Echarts
    • 安装Echarts
    • 引入并使用Echarts
  • 自定义图表
  • 将数据传递给Echarts
  • 处理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  

你可能感兴趣的:(Echarts,echarts,前端,javascript,vue.js,html5)