最新提醒本文演示案例主要看第三次更新第二次更新的“安装echarts所和写相关代码”目录博主简介一、 vue3项目初始化二、安装echarts和配置三、echarts所需的相关代码四、调试和运行第二次更新-24/11/131、创建项目2、安装echarts和写相关代码3、效果演示第三次更新-25/07/041、更新说明2、解决方案3、相关代码(最新创建vue3项目)4、演示效果一、 vue3项目初始化vue3项目初始化我自己用的是pnpm进行创建 用npm也可以的 pnpm create vuelatest跟着步骤进行​二、安装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 dataref([ {value:11,name:A}, {value:31,name:B}, {value:75,name:C}, {value:25,name:D}, {value:16,name:E}, ]) const optioncomputed((){ return{ xAxis:{ type:category, data:data.value.map(vv.name) }, yAxis:{ type:value, }, series:[ { type:line, data:data.value.map(vv.value) } ] } }) // 定时更新数据 每一秒更新一次数据 setInterval((){ data.valuedata.value.map(item({ ...item, value:Math.random()*100, //Math()随机函数这里是随机生成100以内的数字 })) },1000) //单位ms1000ms即是1秒 /script template e-charts classchart :optionoption / /template style .chart{ height: 400px; } /style四、调试和运行进行调试先在集成终端pnpm dev一下​打开运行地址​​​大功告成~第二次更新-24/11/13有网友反馈使用不了这次我用npm重新进行演示一下。第二次更新演示案例使用node版本18.16.01、创建项目npm create vuelatest按需进行配置​按步骤依次输入指令根据绿色提示指令来如果你按我上述的配置那么我们的显示结果就是一样的​​​​​打开运行地址​2、安装echarts和写相关代码2.1、在项目目录下打开终端输入以下指令安装echarts所需要的包npm install echarts vue-echarts2.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 dataref([ {value:11,name:A}, {value:31,name:B}, {value:75,name:C}, {value:25,name:D}, {value:16,name:E}, ]) const optioncomputed((){ return{ xAxis:{ type:category, data:data.value.map(vv.name) }, yAxis:{ type:value, }, series:[ { type:line, data:data.value.map(vv.value) } ] } }) // 定时更新数据 每一秒更新一次数据 setInterval((){ data.valuedata.value.map(item({ ...item, value:Math.random()*100, //Math()随机函数这里是随机生成100以内的数字 })) },1000) //单位ms1000ms即是1秒 /script template e-charts classchart :optionoption / /template style .chart{ height: 400px; width:600px; } /style2.4、关于为什么要写在HomeView中程序运行默认加载的页面使用了HomeView组件直接修改HomeView组件加载页面就可以看到echarts效果。如果你想把echarts图表写在其他页面/组件自行写入代码和配置相关router即可本文为了方便演示就把代码写在views/HomeView.vue。​2.5、重启项目npm run dev3、效果演示打开运行网址​就可以看到echarts图表本次案例的echarts是设置了图表数据动态变化每个人实际演示的图表折线可能会不一样​本次案例的node版本是18.16.0​本篇文章只是演示如何快速且简单地在vue3中实现echarts图表。一些图表的样式图表的参数等设置需要大家自行进行查询学习。官网地址Apache ECharts第三次更新-25/07/041、更新说明今天250704发现用node18是无法完成创建项目npm create vuelatest后的初始化。也就是用node18在npm install有问题警告。导致后面的npm run dev会有报错,无法正常启动项目。​​2、解决方案使用版本较高的node版本node22并重新项目初始化即可解决问题。nvm下载npm install nvm -g使用nvm安装node22版本nvm install 22查看当前已安装的node版本nvm ls​使用node22版本nvm use 22​然后重新跑一遍创建项目到启动项目的流程,即可完成本篇的演示案例。看上述“第二次更新”的内容第二次更新-24/11/133、相关代码(最新创建vue3项目)创建项目npm create vuelatest按需完成vue3项目的基础配置​按提示逐条执行npm install,注意当前是node22版本​再走安装echarts包和撰写相关代码。看上面的内容第二次更新的第2点安装echarts和写相关代码2、安装echarts和写相关代码4、演示效果​​​​