在vue3项目中，使用echarts

本篇文章主要讲解如何在我们的vue3项目中，使用echarts来展示数据。

目录

1、查看自己vue项目的版本

2、下载echarts的依赖

3、在main.js文件中，配置echarts

4、简单使用

5、使用axios请求后端数据，渲染到echarts图标中

结语

---

1、查看自己vue项目的版本

在package.json中，可以查看vue项目版本。

如下图，可确定我们的项目是vue3。

2、下载echarts的依赖

npm install echarts vue-echarts

3、在main.js文件中，配置echarts

4、简单使用

<template>
  <!-- 使用echarts（具体是哪种图形，取决于option的内容） -->
  <e-charts class="chart" :option="option"/>
</template>

<script setup>
import {ref} from 'vue';
/* 去官网粘一个option即可 */
const option = ref({
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
});

</script>

<style scoped>
/* 我们必须给一个高度/宽度，不然echarts图表无法显示出来 */
.chart {
  height: 500px;
  width:500px;
  background-color: pink;
}
</style>

查看运行效果：

注意：我们可以自己去echarts官网找到自己喜欢的图形，并把其option粘过来，即可。

5、使用axios请求后端数据，渲染到echarts图标中

 展示效果：

结语

以上就是在vue3项目中，使用eharts的全部步骤。

如果想使用echarts的其他图表，可以去echarts官网逛一逛。

喜欢本篇文章的话，可以留个免费的关注~~