文章目录

• 1、简介
• 2、安装
• • 2.1 安装node
  • 2.2 安装echarts
  • 2.3 安装vue
  • • 2.3.1 npm方式（Vite）
    • 2.3.2 npm方式（Vue CLI）
    • 2.3.3 CDN方式
    • 2.3.3 生命周期
• 3、测试（vue）
• • 3.1 修改App.vue（hello world）
  • 3.2 修改App.vue（计数器）
  • 3.3 修改App.vue（按钮button）
  • 3.4 修改App.vue（列表li）
  • 3.5 修改App.vue（事件@click）
  • 3.6 修改App.vue（侦听器watch）
  • 3.7 修改App.vue（路由route，多组件）
  • 3.8 修改App.vue（状态管理，多组件）
• 4、测试（vue+echarts）
• • 4.1 修改App.vue（折线图）
  • 4.2 修改App.vue（柱状图）
  • 4.3 修改App.vue（面积图，provide / inject）
  • 4.4 修改App.vue / main.js（饼状图，getCurrentInstance）
• 结语

1、简介

官网地址：
https://echarts.apache.org/zh/index.html

Apache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。

ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。

ECharts 遵循 Apache-2.0 开源协议，免费商用。

ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。

2、安装

2.1 安装node

https://nodejs.org/en/

2.2 安装echarts

https://echarts.apache.org/zh/download.html

从哪里获取 ECharts ？
获取 ECharts 的路径有以下几种，请根据您的情况进行选择：

• 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载，不同的打包下载应用于不同的开发者功能与体积的需求，或者您也可以直接下载完整版本；开发环境建议下载源代码版本，包含了常见的错误提示和警告。
• 也可以在 ECharts 的 GitHub 上下载最新的 release 版本，解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库。
• 或者通过 npm 获取 echarts，npm install echarts --save，详见“在 webpack 中使用 echarts”
• 由 cdn 引入，你可以在 cdnjs，npmcdn 或者国内的 bootcdn 上找到 ECharts 的最新版本。
  
  

npm install echarts
# or
npm install echarts --save
# or
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts --save

2.3 安装vue

https://cn.vuejs.org/

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

2.3.1 npm方式（Vite）

开发的前提条件:

• 熟悉命令行
• 已安装 16.0 或更高版本的 Node.js

新建vue工程，命令如下：

mkdir test_vue
cd test_vue# 要使用 Vite 来创建一个 Vue 项目，非常简单：
# 这个命令会安装和执行 create-vue，它是 Vue 提供的官方脚手架工具。
npm init vue@latest

在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

# cd 
cd vue-project
npm install
npm run dev

命令行执行情况如下：

vue工程的文件夹情况如下：

浏览器访问上面命令行中的测试网址：

http://127.0.0.1:5173/

你现在应该已经运行起来了你的第一个 Vue 项目！请注意，生成的项目中的示例组件使用的是组合式 API 和

Vite（法语单词，“快” 的意思）是一种新型的前端构建工具
最初是配合 Vue3.0 一起使用的，后来适配了各种前端项目，目前提供了 Vue、React、Preact 框架模板。目前来说，Vue 使用的是 vue-cli 脚手架，React 一般使用 create-react-app 脚手架。
虽然脚手架工具不一样，但是内部的打包工具都是 Webpack。为什么要开发一个全新的构建工具，是 Webpack 不香了吗？

当你准备将应用发布到生产环境时，请运行：

npm run build

此命令会在 ./dist 文件夹中为你的应用创建一个生产环境的构建版本。

2.3.2 npm方式（Vue CLI）

https://cli.vuejs.org/zh/
Vue CLI 是官方提供的基于 Webpack 的 Vue 工具链，它现在处于维护模式。我们建议使用 Vite 开始新的项目，除非你依赖特定的 Webpack 的特性。在大多数情况下，Vite 将提供更优秀的开发体验。

• 安装vue：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

• 创建一个项目：

vue create my-project
# OR
vue ui

CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。它可以通过 vue create 快速搭建一个新项目，或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。

2.3.3 CDN方式

你可以借助 script 标签直接通过 CDN 来使用 Vue：

这里我们使用了 unpkg，但你也可以使用任何提供 npm 包服务的 CDN，例如 jsdelivr 或 cdnjs。当然，你也可以下载此文件并自行提供服务。

通过 CDN 使用 Vue 时，不涉及“构建步骤”。这使得设置更加简单，并且可以用于增强静态的 HTML 或与后端框架集成。但是，你将无法使用单文件组件 (SFC) 语法。

• 使用全局构建版本
  该版本的所有顶层 API 都以属性的形式暴露在了全局的 Vue 对象上。这里有一个使用全局构建版本的例子：

{{ message }}

• 使用 ES 模块构建版本
  在本文档的其余部分我们使用的主要是 ES 模块语法。现代浏览器大多都已原生支持 ES 模块。因此我们可以像这样通过 CDN 以及原生 ES 模块使用 Vue：

{{ message }}

• 启用 Import maps
  我们可以使用导入映射表 (Import Maps) 来告诉浏览器如何定位到导入的 vue：

{{ message }}

• 拆分模块
  随着对这份指南的逐步深入，我们可能需要将代码分割成单独的 JavaScript 文件，以便更容易管理。例如：

// my-component.js
export default {data() {return { count: 0 }},template: `
爱看书的小沐今天看了几本书： {{ count }}
`
}

如果直接在浏览器中打开了上面的 index.html，你会发现它抛出了一个错误，因为 ES 模块不能通过 file:// 协议工作。为了使其工作，你需要使用本地 HTTP 服务器通过 http:// 协议提供 index.html。

要启动一个本地的 HTTP 服务器，请先安装 Node.js，然后通过命令行在 HTML 文件所在文件夹下运行 npx serve。你也可以使用其他任何可以基于正确的 MIME 类型服务静态文件的 HTTP 服务器。

简单来说，npm 是一个 node 包管理器，npx 是一个 Node 包执行器。NPM 是 Node 包管理器。NPM 内置在 Node.js 中，通过命令行工具 CLI 来和线上 NPM 数据库进行交互，这个数据库被称为 NPM Register，
NPX 是一个 Node 包执行器，该 Node 包可以是本地也可以是远程的。允许开发者在无需安装的情况下执行任意 Node 包。执行本地 Node 包时，NPX 会到node_modules/.bin路径和环境变量 $PATH 里面，检查命令是否存在。
执行远程 Node 包时，NPX 会将 Node 包下载到一个临时目录中，使用以后再删除。

修改上面的index.html如下：

命令行执行如下：

浏览器访问如下：

2.3.3 生命周期

3、测试（vue）

3.1 修改App.vue（hello world）

App.vue:

执行命令如下：

npm run dev

浏览器访问如下：

另一个例子：

3.2 修改App.vue（计数器）

App.vue:

浏览器访问如下：

3.3 修改App.vue（按钮button）

App.vue:

浏览器访问如下：

3.4 修改App.vue（列表li）

App.vue:

浏览器访问如下：

3.5 修改App.vue（事件@click）

App.vue:

浏览器访问如下：

3.6 修改App.vue（侦听器watch）

App.vue:

浏览器访问如下：

3.7 修改App.vue（路由route，多组件）

App.vue:

Home.vue:

About.vue:

NotFound.vue:

浏览器访问如下：

工程文件组织如下：

3.8 修改App.vue（状态管理，多组件）

理论上来说，每一个 Vue 组件实例都已经在“管理”它自己的响应式状态了。
它是一个独立的单元，由以下几个部分组成：

• 状态：驱动整个应用的数据源；
• 视图：对状态的一种声明式映射；
• 交互：状态根据用户在视图中的输入而作出相应变更的可能方式。
  
  然而，当我们有多个组件共享一个共同的状态时，就没有这么简单了：
  多个视图可能都依赖于同一份状态。
  来自不同视图的交互也可能需要更改同一份状态。

App.vue:

ComponentA.vue:

ComponentB.vue:

store.js:

import { reactive } from 'vue'export const store = reactive({count: 0,increment() {this.count++}
})

4、测试（vue+echarts）

4.1 修改App.vue（折线图）

安装echarts库：

npm install echarts --save

不通过main.js，直接在App.vue中使用echarts的页面直接引入。
App.vue修改如下：

浏览器访问如下：

4.2 修改App.vue（柱状图）

安装echarts库：

npm install echarts --save

App.vue修改如下：

浏览器访问如下：

4.3 修改App.vue（面积图，provide / inject）

安装echarts库：

npm install echarts --save
npm install node-sass 
npm install sass --save-dev

App.vue修改如下：

InjectCom.vue:

浏览器访问如下：

4.4 修改App.vue / main.js（饼状图，getCurrentInstance）

vue3.0的写法，在组件中使用。
安装echarts库：

npm install echarts --save
# npm i -s echarts

main.js修改如下：

// import { createApp } from 'vue'
// import App from './App.vue'
// import './assets/main.css'
// createApp(App).mount('#app')import { createApp } from 'vue'
import App from './App.vue'// 引入 echarts
import * as echarts from 'echarts'
const app = createApp(App)// 全局挂载 echarts
app.config.globalProperties.$echarts = echartsapp.mount('#app')

App.vue修改如下：

浏览器访问如下：

全局挂载后，在组件中以 vue2 的写法。
App.vue修改如下：

直接在组件中引入echarts。
App.vue修改如下：

结语

如果您觉得该方法或代码有一点点用处，可以给作者点个赞，或打赏杯咖啡；╮(￣▽￣)╭
如果您感觉方法或代码不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果您需要相关功能的代码定制化开发，可以留言私信作者；(✿◡‿◡)
感谢各位大佬童鞋们的支持！( ´ ▽´ )ﾉ ( ´ ▽´)っ！！！