在vue3中使用echarts，亲测可用，手把手教程！

目录

        一、 vue3项目初始化

        二、安装echarts所需要的包

        三、进行导入和配置

        四、模拟数据和调试

一、vue3项目初始化

        vue3项目初始化（我自己用的是pnpm进行创建 ，用npm也可以的 ）

pnpm create vue@latest

       跟着步骤进行

二、安装echarts所需要的包

pnpm install echarts vue-echarts

三、进行导入和配置

在src/main.js中写入以下代码：

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

// 引入echarts
import Echarts from 'vue-echarts'
import * as echarts from 'echarts'


const app = createApp(App)
app.use(createPinia())

// 使用组件
app.component('e-charts',Echarts)
// 全局挂载 echarts
app.config.globalProperties.$echarts = echarts
app.use(router)
app.mount('#app')

  四、模拟数据和调试

1、vue3项目调试运行的页面默认是这里，所以我们直接在HomeView组件中进行书写代码。

2、src/views/HomeView.vue:

（在代码中会简单进行解释。建议手敲代码增加熟练度，如果嫌麻烦，也可以直接将代码复制拷贝到HomeView.vue中）

//HomeView.vue
<script setup>
  import { ref,computed } from 'vue';

//模拟数据value的字段对应Y轴，name字段对应X轴
  const data=ref([
    {value:11,name:'A'},
    {value:31,name:'B'},
    {value:75,name:'C'},
    {value:25,name:'D'},
    {value:16,name:'E'},
  ])

const option=computed(()=>{
  return{
    xAxis:{
      type:'category',
      data:data.value.map(v=>v.name)
    },
    yAxis:{
      type:'value',
    },
    series:[
      {
        type:'line',
        data:data.value.map(v=>v.value)
      }
    ]
  }
})

// 定时更新数据 每一秒更新一次数据
setInterval(()=>{
  data.value=data.value.map(item=>({
    ...item,
    value:Math.random()*100,  //Math()随机函数，这里是随机生成100以内的数字
  }))
},1000)  //单位ms，1000ms即是1秒
</script>

<template>
  <e-charts class="chart" :option="option" />
</template>

<style>
.chart{
  height: 400px;
}
</style>

3、进行调试，先在集成终端pnpm dev一下

4、运行结果：

大功告成~

如果大家喜欢这篇文章，可以点个赞关注一下喔，我会更新实用的前端知识~