Echarts是一个基于JavaScript的开源可视化图表库,由百度开发和维护。它提供了多种类型的图表,包括折线图、柱状图、散点图、饼图、地图等,可以用于展示各种类型的数据。Echarts具有良好的交互性和可扩展性,可以通过自定义主题和图表样式来满足不同的需求。同时,Echarts还支持移动端和桌面端的多种平台,可以在不同的设备上进行数据可视化展示。
Echarts中提供的图表类型及其适用场景如下:
在项目文件夹下,使用终端输入下面的指令在Vue项目中安装Echarts
npm install echarts --save
在Vue3中引入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')
<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(