【Echarts】vue3实战演示，亲测可用，手把手教程！

置顶十八朵郁金香

已于 2025-04-01 22:30:37 修改

阅读量1.7w

点赞数 34

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

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

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

版权

Vue 专栏收录该内容

2 篇文章

订阅专栏

博主简介

PS:这个部分的内容是后续补充的，各位看官按需阅读，感谢支持！

目前状态：互联网IT前端实习生。专注IVX低代码H5和微信小程序开发、知识社群（个人成长、实用干货）。
在校成就：计算机软件著作权、创新创业大赛校级铜奖、职业规划校赛一等奖等等。
商务合作：开发、知识社群、广告等，联系方式请看主页简介。
限时福利：关注公众号（看主页简介），获取精心整理的100G+学习资料。

一、 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、运行结果：

大功告成~

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

第二次更新-11.13

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

（第二更新演示的案例：使用node 18.16.0）

1、创建项目

1.1、新建一个文件夹，打开终端输入以下指令：

npm create vue@latest

1.2、按需进行配置：

1.3、按步骤依次输入指令：

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

1.4、打开给的运行地址，不出意外的话，就会显示以下页面：

2、安装echarts所需要的包

在项目目录下打开终端，输入以下指令：

npm install echarts vue-echarts

接着进行以下配置。（打开你项目目录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')

直接对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;
}
</style>

重启项目