vue3从0到1创建echarts案例示范，保姆级教程【图文+代码】

置顶十八朵郁金香

已于 2025-07-10 14:34:50 修改

阅读量2w

点赞数 42

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： echarts vue.js javascript

于 2024-09-17 16:11:14 首次发布

本文链接：https://blog.csdn.net/orbit4/article/details/142315231

Vue 专栏收录该内容

4 篇文章

订阅专栏

最新提醒：

本文演示案例：主要看第三次更新+第二次更新的“安装echarts所和写相关代码”

博主简介

IP：互联网IT前端开发|《Kaimana学习室》知识星球主理人。专注思维干货、个人成长、知识社群。
合作：前端开发(web/h5/小程序)等，联系方式请看主页简介。
福利：关注公众号（主页简介和底部信息卡片），回复：“学习礼包”，有我精心整理的100G+的IT学习资料~

一、 vue3项目初始化

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

pnpm create vue@latest

跟着步骤进行

二、安装echarts和配置

pnpm install echarts vue-echarts

三、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')

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

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>

四、调试和运行

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

打开运行地址

大功告成~

第二次更新-24/11/13

有网友反馈使用不了，这次我用npm重新进行演示一下。

第二次更新，演示案例使用node版本18.16.0）

1、创建项目

npm create vue@latest

按需进行配置：

按步骤依次输入指令：

（根据绿色提示指令来，如果你按我上述的配置，那么我们的显示结果就是一样的）

打开运行地址：

2、安装echarts和写相关代码

2.1、在项目目录下打开终端，输入以下指令，安装echarts所需要的包

npm install echarts vue-echarts

2.2、完成以下配置（src/main.js）。

如果你正常跟着我做的步骤来，直接复制以下代码到main.js即可。

import './assets/main.css'

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.component('e-charts', Echarts)
// 全局挂载 echarts
app.config.globalProperties.$echarts = echarts
app.use(createPinia())
app.use(router)

app.mount('#app')

2.3、对src/views/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;
  width:600px;
}
</style>

2.4、关于为什么要写在HomeView中？