vue+echarts生成图表步骤

⼀、开发环境

(⼀) 安装配置 Node.js

1、下载安装 Node.js

下载地址： 。

⽂件名：node-v16.13.1-x64.msi。

2、检测 PATH 环境变量

点击 开始 => 运⾏ => \"cmd\" 。

运⾏ \"path\" ，确认输出结果中包含：C:\\Program Files\\nodejs\\。

3、检查 Node.js 版本

运⾏ \"node --version\" ，确认输出结果：v16.13.0 。

(⼆) 安装配置 Visual Studio Code

1、下载 Visual Studio Code

下载地址： 。

⽂件名：VSCodeUserSetup-x64-1.63.0 。

2、安装 Visual Studio Code

在安装过程中，勾选 \"添加到PATH\" 。

3、配置语⾔

打开插件⾯板，搜索 Chinese ，安装 Chinese (Simplified) (简体中⽂) Language Pack for Visual Studio Code 。

4、安装插件

依次安装插件：HTML CSS Support 、ESLint 、Vetur 、vue-helper 。

⼆、新建项⽬

(⼀) 启动命令⾏⼯具

1、右键 开始 ，点击 windows powershell (管理员) ，打开命令⾏。2、执⾏ D: 命令，切换⾄D盘。

(⼆) 创建项⽬

依次执⾏以下命令：

1、执⾏ npm install -g @vue/cli 来安装 vue 客户端⼯具 。

2、执⾏ vue create dataview 来初始化项⽬，在选择列表中选择 Default (Vue 3 Preview) ，然后回车安装。

三、⼯作区

(⼀) 打开项⽬

1、启动 Visual Studio Code 。

2、点击 ⽂件 => 打开⽂件夹 ，选择D盘下的 dataview ⽂件夹。

(⼆) 打开终端

1、点击 查看 => 终端 。

(三) 运⾏项⽬

1、执⾏ npm run serve 来运⾏项⽬。

2、启动浏览器并访问：http://localhost:8080/ 。

四、组件

(⼀) 新建组件

1、在 src/components ⽬录下新增 Covid.vue ⽂件。

(⼆) 根标签

所有组件由 template 、script 、style 三个标签组成。template 标签内必须且只能有⼀个⼦标签。⽰例代码如下：

(三) 注册组件

1、在 App.vue 中注册组件：

五、添加数据

(⼀) 添加数据⽂件

以下操作⼆选⼀，视情况⽽定：

1、在 public ⽬录下新增 covid.json ⽂件，将数据拷贝并粘贴到⽂件中。2、将数据⽂件拷贝并粘贴到 public ⽬录下。

(⼆) 配置 axios

1、点击 终端 => 新建终端 ，运⾏ npm install axios 命令安装 axios 。（若项⽬中已提供，则跳过此步骤）2、打开 main.js ⽂件，全局注册 axios ： // 旧代码：

// import { createApp } from 'vue' // import App from './App.vue' // createApp(App).mount('#app') // 新代码：

import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) // 全局注册axios

import axios from 'axios'

app.config.globalProperties.$http = axios app.mount('#app')

(三) 读取数据

1、在 Covid.vue 中请求 covid.json 数据。

2、此时刷新 http://localhost:8080/ 页⾯，即可看到 Console 控制台输出的数据。

六、配置图表

(⼀) 配置 echarts

1、拷贝 echarts.min.js 到 public ⽬录下。2、在 Covid.vue 中导⼊ echarts ：

(⼆) 转换数据

1、⽣成 legend 、xAxis 、series 中所需求的数据，更新配置：