大数据可视化vue,node,npm笔记

大数据可视化 vue3+echarts5

1、前端的跨域请求拿到数据，详见 第8篇

2、javascript或其他办法处理接口返回的json数据，计算所需要的结果并且格式化为echarts图表需要的数据结构

post请求后端接口地址返回的json数据，参考格式：

[{"id":"1","name":"大衣","price":"234","所在地区":"华北","省份":"广东"},{...},{...},{...}...]

3、细心理解题目题意、不要搞混题目要求，也不要想的过于复杂即可

4、学习途径可以查看vue和echarts官方文档

1、vue.js与node.js和npm的安装配置

1、前端框架vue.js系列教程(1)-安装配置node.js和npm

2022-03-31 11:41:53.0

什么是node.js？

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js使用JavaScript进行编程，运行在JavaScript引擎上（V8）。

简单的说 Node.js 就是运行在服务端的 JavaScript，利用JavaScript在服务端进行编程。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。

什么是npm？

npm (node package manager)是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理系统，也是世界上最大的软件注册表，使JavaScript/Node.js开发者能轻松跟踪依赖项和版本。大家可以这样理解：它相当于Java世界的Maven，Scala世界的SBT。

node.js和npm安装过程

1、首先下载node.js安装程序（Windows版本，其他操作系统请自行到官网选择下载）。

然后双击下载的安装文件，一路next即可。

安装之后，检查一下系统环境变量，查看是否将node.js的安装目录添加到了path环境变量下了，如下图所示：

如果没有，请手动配置。

2、修改镜像源地址

因为npm安装时自带的默认镜像地址在国外，因此安装库会比较慢，有时甚至不能访问。

设置npm的默认下载镜像地址配置为国内镜像源地址，来提高下载速度。

注册国内镜像-腾讯云镜像源，请在命令行执行：

$ npm config set registry http://mirrors.cloud.tencent.com/npm/

验证注册结果：

$ npm config get registry

还有其他国内镜像源地址。例如：

注册国内镜像-淘宝镜像源：

$ npm config set registry https://registry.npmmirror.com

注册国内镜像-华为云镜像源：

$ npm config set registry https://mirrors.huaweicloud.com/repository/npm/

1、注册国内镜像，并使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm：

$ npm install -g cnpm --registry=https://registry.npmmirror.com

2、验证npm安装结果：(w我npm用的腾讯镜像)

$ cnpm config get registry

3、修改npm仓库的位置

首先在node.js的安装目录下新建两个文件夹：

• node_global
• node_cache

更改本地仓库全局位置，在命令行执行：

$ npm config set prefix "D:\nodejs\node_global"

更改本地默认缓存位置，在命令行执行:

$ npm config set cache "D:\nodejs\node_cache"

验证修改结果：

$ npm list -global
$ npm list -g

结果：

4、测试node.js和npm安装

执行如下命令，查看node.js的版本和npm的版本。如果能正确打印出版本号，则说明配置成功。否则请重新检查配置。

$ node -v
$ npm -v

结果：

知识点：npm常用命令

要安装node.js的模块(库)的话，使用如下命令：

$ npm  install  [module_name] -g		#  全局安装
$ npm  install  [module_name]			#  本地安装，在npm运行目录下安装
$ npm  install  [module_name]@1.x		#  安装指定版本

要卸载指定的模块(库)的话，使用如下命令：

$ npm  uninstall  [module_name]

要查看安装了哪些模块(库)，使用如下命令：

$ npm  ls

使用cnpm安装模块，命令类似：

$ cnpm install [module_name]

2、vue.js工程项目创建

1、认识vue.js

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式前端框架。

Vue 只关注视图层， 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

2、安装Vue3

安装Vue有多种方式，比如：

• 在Vue.js官网上直接下载最新版本，并用

在用 Vue.js 构建工程项目时推荐使用 cnpm 安装，cnpm 能很好地和 Webpack 或 Browserify 模块打包器配合使用。

1、直接安装最新稳定版：

$ cnpm install vue@next

2、如果想安装指定的版本，则可以先输入下面这个命令查询vue所有的版本：（管理员权限下运行）

$ cnpm view @vue/cli versions

3、查询到包名之后就可以指定一个版本并安装了，比如安装vue3里面的最新版本3.12.1：

$ npm install -g @vue/cli@3.12.1			// 全局安装vue 指定安装版本为3.12.1

4、查询vue的安装版本：

$ vue -V

或

$ vue --version

5、如果无法执行vue命令：

3、创建Vue.js 项目

1、首先确定项目创建的位置（项目文件存放的路径）。

例如，在D:\vueprojects目录下创建，使用如下的命令切换到该目录下：

$ cd D:\vueprojects

执行下面的命令，创建一个名为“hellovue-app”的vue项目：

$ vue create hellovue-app

执行以上命令会出现安装选项界面，保持默认即可。如下图所示：

按下回车键后就会进入安装，等候片刻即可完成安装。如下图所示：

安装完成后

2、进入项目目录

$ cd hellovue-app

3、启动应用服务

$ npm run serve

# 或使用cnpm
# cnpm run serve

等出现如下信息，说明开发服务器已经启动(不要关闭了，否则后续查看效果还需要重新开启)：

4、浏览器访问http://localhost:8080地址，看到应用程序的首页

3、vue.js框架应用开发

1、安装开发工具VS Code

Visual Studio Code（简称“VS Code”）是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器，可在桌面上运行，并且可用于Windows、macOS和Linux。它具有对JavaScript、TypeScript和Node.js的内置支持，并具有丰富的其他语言（例如C++，C＃，Java，Python，PHP，Go）和运行时（例如.NET和Unity）扩展的生态系统。

VS Code 下载地址：VS Code官网下载。然后像其他Windows软件一样双击安装即可。

2、理解vue.js项目结构

1、启动VS Code，选择菜单【文件】->【打开文件夹…】如下图所示：

2、在打开文件夹面板中，选择上一节创建的hellovue-app项目的文件夹，如下图所示：

3、单击【选择文件夹】按钮，在VS Code中打开项目。项目的目录结构如下图所示：

4、hellovue-app的项目结构说明

1、node_modules：依赖包，通常执行npm i**会生成。

**2、index.html：**是项目的首页，入口页（打开网页后最先访问的页面）

3、src：这个目录下存放项目的源码，即开发者写的代码放在这里。

其中：

• assets：存放项目中需要用到的资源文件，css、js、images等。

• components：用来存放组件（一些可复用，非独立的页面），当然开发者也可以在 components 中直接创建完整页面。

• App.vue：App.vue 是一个Vue组件，也是项目的第一个Vue组件。

• main.js：项目入口文件。相当于Java中的main方法，是整个项目的入口js程序。

• package.json：本项目的配置信息，启动方式。

vue重点：理清楚项目中以下文件或目录的作用和相互之间的关系

(1) index.html

index.html是项目的主页，项目访问入口。一般是定义一个空的根节点，在运行时由main.js把App.vue根组件的实例挂载到该根节点下，其内容都通过vue组件进行填充。

(2) App.vue

App.vue是项目的根组件，在运行时main.js会把它的实例挂载到index.html的根节点上。

(3) main.js

main.js相当于Java中的main方法，是整个项目的入口js程序。它负责：

• 导入vue框架、根组件及其他组件、模块；
• 设置路由；
• 创建App.vue的实例（可以理解为内容），并将该实例挂载（填充）到index.html的根节点下。

这三者之间的关系，可以用下图来理解：

理解vue.js数据绑定

vue.js自动绑定视图和数据。

在vue.js中，数据绑定最常见的形式就是使用 {{…}}的文本插值。例如，将项目中App.vue内容修改如下：

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <h2>{{msg}}</h2>
</template>

<script>
// 这个函数的作用是：可以使组件在外部文件引用
export default {
  name: 'App',
  data(){return{msg: "欢迎来到小白学苑！"}},
}
</script>

保存文件修改，网页会自动刷新。新的页面内容如下图所示：

理解vue.js中的组件

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。通过组件系统可以用独立可复用的小组件来构建大型应用。

例如，在项目的src/components/目录下，新创建两个vue文件MyHello.vue和YourHello.vue。(注意，.vue文件名称必须使用首字母大写的多单词组成。)

MyHello.vue：

<template>
  <div class="hello">
     <h1>My Hello!</h1>  
  </div>
</template>

<script>
export default {
  name: 'MyHello',
}
</script>

<!-- "scoped"属性限制这里的CSS只作用于此组件 -->
<style scoped>

</style>

YourHello.vue：

<template>
  <div class="hello">
     <h1>Your Hello!</h1>  
  </div>
</template>

<script>
export default {
  name: 'YourHello',
}
</script>

<!-- "scoped"属性限制这里的CSS只作用于此组件 -->
<style scoped>

</style>

然后修改App.vue文件内容如下：

<template>
   <img alt="Vue logo" src="./assets/logo.png">
   <h2><MyHello/></h2>
   <p><YourHello/></p>
</template>

<script>
// 引入子组件
import MyHello from './components/MyHello.vue'
import YourHello from './components/YourHello.vue'

// 这个函数的作用是：可以使组件在外部文件引用
export default {
  // 声明程序名称 
  name: 'App',
  // 声明组件库
  components: {
  
     MyHello,
     YourHello
  }
}
</script>

它们之间的关系可以从下图中理解：

理解.vue文件构成

我们在Vue中要经常建立后缀名为.vue的文件，.vue的文件通常由三部分构成，如下图所示：

这三个组成部分分别为：

• template标签：通常创建我们要用的网页界面。
• script标签：通常与数据打交道，包含js代码逻辑，如事件响应、Ajax调用等。
• style标签：主要负责template标签中的样式。

可以将上述三个部分与前端的html、javascript与css三个部分对应起来理解。上面三者的结合，就构成了我们所见到的网页。

4、vue.js单页面应用开发

1、单页面应用程序概述

单页面应用（SPA，Single Page Application），就是只有一张Web页面的应用，是加载单个HTML页面并在用户与应用程序交互时动态更新该页面的web应用程序。

简单来说就是：整个Web程序只有单个HTML文件，所有操作都在这张页面上完成，由 js 按需加载子页面内容到这张页面中，不发生网页跳转。

单页面应用程序的业务逻辑全部都在本地操作，数据都需要通过 ajax 同步提交。在URL链接中采用 # 号来作为当前视图地址（例如，http://www.xueai8.com/#），通过改变 # 号后的地址参数载入不同的页面片段。

2、vue.js由路由实现单页面程序

前端路由的概念来源于服务端，在服务端中路由描述的是 URL 与处理函数之间的映射关系。

在 Web 前端单页应用 SPA(Single Page Application)中，路由描述的是 URL 与 UI 之间的映射关系，这种映射是单向的，即 URL 变化引起 UI 更新（无需刷新页面）。

Vue 路由允许我们通过不同的 URL 访问不同的内容。通过Vue.js + vue-router（Vue的路由模块）可以很简单的实现多视图的单页Web 应用。

如果还没有安装vue-router，那么首先需要使用npm包管理器安装它，命令如下：

# 首先进入到项目根目录
$ cd E:\vueprojects\hellovue-app

# 然后执行下面的安装命令
$ npm install vue-router

执行完毕，可以在项目根目录，继续执行下面的命令查看，可以看到安装的vue-router依赖包：

$ npm list

结果：

3、实现一个简单的vue.js单页面程序

接下来，我们继续在上一节的hellovue-app项目中实现一个简单的vue.js单页面Web应用程序。

在VS Code中打开项目文件夹，然后按以下步骤操作。

(1) 在项目的src目录下，创建一个子目录views：

(2) 在项目的src/views/目录下，分别创建三个.vue文件，分别进行编辑：

PageOne.vue：

<template>
   <div class="page">
      <h1>我是Page One!</h1>  
   </div>
</template>

<script>
export default {
    name: 'PageOne',
}
</script>

<style scoped>
.page{
    width:500px;
    height: 300px;
    background-color: brown; 
    margin: 0 auto; 
    line-height: 300px;
    color:white;
}
</style>

PageTwo.vue：

<template>
   <div class="page">
       <h1>我是Page Two!</h1>  
   </div>
</template>

<script>
export default {
     name: 'PageTwo',
}
</script>

<style scoped>
.page{
    width:500px;
    height: 300px;
    background-color: rgb(77, 78, 129); 
    margin: 0 auto; 
    line-height: 300px;
    color:white;
}
</style>

PageThree.vue：

<template>
    <div class="page">
       <h1>我是Page Three!</h1>  
    </div>
</template>

<script>
export default {
    name: 'PageThree',
}
</script>

<style scoped>
.page{
    width:500px;
    height: 300px;
    background-color: rgb(11, 82, 26); 
    margin: 0 auto; 
    line-height: 300px;
    color:white;
}
</style>

(3) 修改App.vue如下：

<template>  
   <div class="navigate">
      <ul>
           <li><router-link to="/">首页</router-link></li>
           <li><router-link to="/page/one">to page one</router-link></li>
           <li><router-link to="/page/two">to page two</router-link><</li>
           <li><router-link to="/page/three">to page three</router-link></li> 
      </ul>
   </div>
   <div class="pages">
         <img alt="Vue logo" src="./assets/logo.png">
         <router-view></router-view>
   </div> 
</template>

<script>
    export default {
         name: 'App',
    }
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.navigate{
  width:200px;
  float:left;
  background-color: aliceblue;
}
.pages{
  margin-left: 210px;
}
</style>

以下实例中我们将 vue-router 加进来，然后配置组件和路由映射，再告诉 vue-router 在哪里渲染它们。 注意，在上面的代码中，我们使用了两个路由相关的标签组件：

• ：该组件用于设置一个导航链接，通过传递 to属性来指定目标地址链接，即要显示的内容。router-link被解析后将呈现一个带有正确href属性的**标签**。
• ：是路由出口，将显示 url 对应组件。也就是说，与roter-link标签中to属性值匹配到的组件将渲染在这里。

请注意，这里没有使用常规的 a 标签，而是使用一个vue的组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。

(4) 修改入口程序main.js，如下：

import { createApp } from 'vue'
import App from './App.vue'

// 导入 vue router
import { createRouter, createWebHashHistory } from 'vue-router'

// 1. 定义路由组件（组件名称与组件路径映射）  
import PageOne from "./views/PageOne.vue"
import PageTwo from "./views/PageTwo.vue"
import PageThree from "./views/PageThree.vue"

// 2. 定义一些路由映射（路由路径与组件名称映射）
const routes = [
    { path: '/', component: PageOne },
    { path: '/page/one', component: PageOne },
    { path: '/page/two', component: PageTwo },
    { path: '/page/three', component: PageThree },
]

// 3. 创建路由实例并传递 `routes` 配置
const router = createRouter({
    // 4. 内部提供了 history 模式的实现
    history: createWebHashHistory(),
    routes: routes,     // 指定使用的路由
})

// 5. 创建并挂载根实例
// createApp(App).mount('#app')     // 不用这个   
const app = createApp(App)

// 确保 _use_ 路由实例使整个应用支持路由。
app.use(router)

 // 把App挂载到#app节点上
app.mount('#app')

(5) 至此，我们的代码实现已经完成，接下来启动服务器。在VS Code编辑器下方的“终端”窗口中，执行如下命令：

$ npm run serve

然后打开浏览器，访问http://localhost:8080，可以看到如下的界面，这是默认首页，我们配置它和/page/one链接都指向PageOne.vue组件。

单击"to page two"链接，页面显示如下：

单击"to page three"链接，页面显示如下：

可以发现，在单击不同的导航链接切换时，并没有发生页面的跳转，一切都在是单个页面中进行的-这就是单页面应用！

5、vue.js中实现echarts绘图

ECharts概述

商业级数据图表，它是一个纯JavaScript的图标库，兼容绝大部分的浏览器，底层依赖轻量级的canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

Echarts支持的图表有折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表。

很容易在vue.js中使用ECharts绘制各种可视化图表。

在vue.js中使用ECharts绘图

1、安装echarts包

首先需要在**项目中安装（先切换路径）**echarts依赖包。这可以使用npm来安装：

$ npm install echarts

2、在vue项目的js文件中使用import导入

import * as echarts from 'echarts';

接下来我们在上一节所创建的hellovue-app项目基础上，实现几个常见ECharts图表的绘制。

1、绘制柱状图

请按以下步骤实现一个ECharts柱状图的绘制。

(1) 在项目的src/views/文件夹下，新创建一个名为Bar.vue的文件，并编辑代码如下：

<template>
  <h2>柱状图</h2>
  <div class="right">
      <p><pre>{{ items }}</pre></p> 
  </div>

  <div class="left"> 
    <!-- echarts图表绘制在这里 -->
    <div id="canvas" style="width: 600px;height:400px;"></div>    
  </div> 
</template>

<script>
    import * as echarts from 'echarts'     

    export default {
      name: 'BarGraph',
      data () {
        return {
          items: ''
        }
      },
      mounted () {
          // 根据准备好的dom初始化echarts实例
          var myChart = echarts.init(document.getElementById('canvas'));

          // 使用刚才指定的配置项和数据显示图表
          myChart.setOption({
            title: {
              text: '2016年11月平均销售额最高的5个品牌 (万元)（品牌, 平均销售额(万元)'
            },
            tooltip: {},
            legend: {
              data: ['平均销售额(万元)'],    // 要和series.name一致
              x:'right',
              y:'80px'              
            },
            xAxis: {
              type: 'category',
              data: ['SKII', 'DIOR', '美宝莲', '倩碧', '丝芙兰', '兰蔻']
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '平均销售额(万元)',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
              }
            ]
          });
      }
    }
</script>

<!-- 添加"scoped"属性来限制CSS仅作用于这个组件 -->
<style scoped>
.left{
  width:50%;
}
.right{
  float:right;
  padding-right: 30px;
}
</style>

(2) 打开App.vue文件，设置一个对柱状图绘制的导航链接和渲染组件，代码如下：

<template>  
  <div class="navigate">
    <ul>
        <!--使用 router-link 组件进行导航 -->
        <li><router-link to="/">首页</router-link></li> 
	<li><router-link to="/bar">柱状图</router-link></li>
    </ul>
  </div>
  <div class="pages">
      <!-- 渲染在这里 -->
      <router-view></router-view>
  </div> 
</template>

<script>
  export default {
    name: 'App',
  }
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.navigate{
  width:200px;
  float:left;
  background-color: aliceblue;
}
.pages{
  margin-left: 210px;
}
</style>

(3) 在main.js主文件中，导入路由组件(Bar.vue)并配置路由映射，实现代码如下：

import { createApp } from 'vue'
import App from './App.vue'

// 导入 vue router
import { createRouter, createWebHashHistory } from 'vue-router'

// 1. 定义路由组件.  
import BarPage from "./views/Bar.vue"

// 2. 定义一些路由映射
const routes = [
    { path: '/', component: BarPage },
    { path: '/bar', component: BarPage },
]

// 3. 创建路由实例并传递 `routes` 配置
const router = createRouter({
    // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history: createWebHashHistory(),
    routes: routes, // `routes: routes` 的缩写
})

// 5. 创建并挂载根实例
// createApp(App).mount('#app')     
const app = createApp(App)

// 确保 _use_ 路由实例使整个应用支持路由。
app.use(router)

 // 把App挂载到#app节点上
app.mount('#app')

(4) 测试结果。首先启动服务器：

$ npm run serve

然后打开浏览器，访问http://http://localhost:8080/，点击柱状图链接，可以看到如下的绘图界面：

2、绘制饼状图

同样地，在src/views/文件夹下，创建一个Pie.vue文件，编辑内容如下：

<template>
  <h2>饼状图</h2>
  <div class="right">
      <p><pre>{{ items }}</pre></p>   
  </div>

  <div class="left"> 
    <!-- echarts图表绘制在这里 -->
    <div id="canvas" style="width: 600px;height:400px;"></div>    
  </div> 
</template>

<script>
    import * as echarts from 'echarts'     

    export default {
      name: 'PieGraph',
      data () {
        return {
          items: ''
        }
      },
      mounted () {
          // 根据准备好的dom初始化echarts实例
          var myChart = echarts.init(document.getElementById('canvas'));

          // 使用刚才指定的配置项和数据显示图表
          myChart.setOption({
            title: {
              text: '销售额最高的5个品类，返回(品类，销售额)',
              subtext: '2016年11月',
              left: 'center'
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              data: ['销售额'],    // 要和series.name一致
              x:'left',
              y:'center'
            },
            series: [{
                name: '销售额',
                type: 'pie',
                radius: '50%',
                data: [
                  { value: 1048, name: '服装' },
                  { value: 735, name: '玩具' },
                  { value: 580, name: '家用电器' },
                  { value: 484, name: '图书' },
                  { value: 300, name: '化妆品' }
                ],         
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]           
          });
      }
    }
</script>

<!-- 添加"scoped"属性来限制CSS仅作用于这个组件 -->
<style scoped>
.left{
  width:50%;
}
.right{
  float:right;
  padding-right: 30px;
}
</style>

修改App.vue，增加导航链接如下：

<li><router-link to="/pie">饼状图</router-link></li> 

修改main.js，导入Pie.vue并增加路由映射，如下：

......
// 1. 定义路由组件.  
import BarPage from "./views/Bar.vue"
import PiePage from "./views/Pie.vue"

// 2. 定义一些路由映射
const routes = [
    { path: '/', component: BarPage },
    { path: '/bar', component: BarPage },
    { path: '/pie', component: PiePage },
]
......

测试结果。首先启动服务器，然后打开浏览器，访问http://http://localhost:8080/，点击饼状图链接，可以看到如下的绘图界面：

3、绘制折线图

1、在src/views/文件夹下，创建一个Line.vue文件，编辑内容

<template>
  <h2>折线图</h2>
  <div class="right">
      <p><pre>{{ items }}</pre></p> 
  </div>

  <div class="left"> 
    <!-- echarts图表绘制在这里 -->
    <div id="canvas" style="width: 600px;height:400px;"></div>    
  </div> 
</template>

<script>
    import * as echarts from 'echarts'     

    export default {
      name: 'LineGraph',
      data () {
        return {
          items: ''
        }
      },
      mounted () {
          // 根据准备好的dom初始化echarts实例
          var myChart = echarts.init(document.getElementById('canvas'));

          // 使用刚才指定的配置项和数据显示图表
          myChart.setOption({
              title: {
                text: '2016年11月总销售额的变化情况，返回(日期, 销售额(千万元))'
              },
              tooltip: { },
              legend: {
                data: ['销售额(千万元)'],    // 要和series.name一致
                x:'right',
                y:'30px'              
              },
              xAxis: {
                type: 'category',
                data: ['周一','周二','周三','周四','周五','周六','周日']  
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  name: '销售额(千万元)',
                  data: [820, 532, 901, 334, 1290, 730, 1320],    
                  type: 'line',
                  smooth: true
                }
              ]
            });
      }
    }
</script>

<!-- 添加"scoped"属性来限制CSS仅作用于这个组件 -->
<style scoped>
.left{
  width:50%;
}
.right{
  float:right;
  padding-right: 30px;
}
</style>

2、修改App.vue，增加导航链接

<li><router-link to="/line">折线图</router-link></li> 

3、修改main.js，导入Pie.vue并增加路由映射

......
// 1. 定义路由组件.  
import BarPage from "./views/Bar.vue"
import PiePage from "./views/Pie.vue"
import LinePage from "./views/Line.vue"

// 2. 定义一些路由映射
const routes = [
    { path: '/', component: BarPage },
    { path: '/bar', component: BarPage },
    { path: '/pie', component: PiePage },
    { path: '/line', component: LinePage },
]
......

测试结果。首先启动服务器，然后打开浏览器，访问http://http://localhost:8080/，点击折线图链接，可以看到如下的绘图界面：

4、绘制折混图

1、在src/views/文件夹下，创建一个LineBar.vue文件，编辑内容

<template>
  <h2>折混图</h2>
  <div class="right">
      <p><pre>{{ items }}</pre>   
  </div>

  <div class="left"> 
    <!-- echarts图表绘制在这里 -->
    <div id="canvas" style="width: 600px;height:400px;"></div>    
  </div> 


<script>
    import * as echarts from 'echarts'     

    // 指定图表的配置项和数据
    var option = {
            title: {
              text: '每天的总销售量和总评论数'
            },
            tooltip: {
              trigger:'axis',
              formatter: '{b0}({a0}): {c0}<br />{b1}({a1}): {c1}%'
            },
            legend: {
                data:['销量','占比'],
                x:'right'
            },
            xAxis: {
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] 
            },
            yAxis: [ 
              {
                type: 'value',
                name: '销量',
                show:true,
                interval: 10,
                axisLine: {
                    lineStyle: {
                        color: '#5e859e',
                        width: 2
                    }
                }
              },
              {
                type: 'value',
                name: '占比',
                min: 0,
                max: 100,
                interval: 10,
                axisLabel: {
                    formatter: '{value} %'
                },
                axisLine: {
                    lineStyle: {
                        color: '#5e859e',//纵坐标轴和字体颜色
                        width: 2
                    }
                }
            }],
            series: [{
                name: '销量',
                type: 'bar',
                barWidth : '50%',
                data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3] 
            },{
                name: '占比',
                type: 'line',
                smooth:true,
                data: [20.0, 22.0, 33.0, 45.5, 48.3, 78.2, 90.3, 103.4, 43.0, 26.5, 22.0, 16.2] 
            }]
        };

     export default {
          name: 'MixGraph',
          data () {
            return {
              items: ''
            }
          },
          mounted () {
              // 根据准备好的dom初始化echarts实例
              var myChart = echarts.init(document.getElementById('canvas'));
              // 使用指定的配置项和数据显示图表。
              myChart.setOption(option);
          }
        }
</script>

<!-- 添加"scoped"属性来限制CSS仅作用于这个组件 -->
<style scoped>
.left{
  width:50%;
}
.right{
  float:right;
  padding-right: 30px;
}
</style>

2、修改App.vue，增加导航链接

<li><router-link to="/mix">折混图</router-link></li> 

3、修改main.js，导入Mix.vue并增加路由映射

......
// 1. 定义路由组件.  
import BarPage from "./views/Bar.vue"
import PiePage from "./views/Pie.vue"
import LinePage from "./views/Line.vue"
import MixPage from "./views/Mix.vue"

// 2. 定义一些路由映射
const routes = [
    { path: '/', component: BarPage },
    { path: '/bar', component: BarPage },
    { path: '/pie', component: PiePage },
    { path: '/line', component: LinePage },
    { path: '/mix', component: MixPage },
]
......

4、测试结果。

启动服务器：

npm run serve

打开浏览器，访问http://http://localhost:8080/，点击折混图链接，可以看到如下的绘图界面：

6、vue.js远程访问RESTful API接口示例

什么是RESTful API接口？

RESTful API也称为REST API ，是遵循 REST 架构规范的应用编程接口（API 或 Web API），支持与 RESTful Web 服务进行交互。REST 是表述性状态传递的英文缩写，由计算机科学家 Roy Fielding 创建。

学术化的说明

REST 是一组架构规范，并非协议或标准。API 开发人员可以采用各种方式实施 REST。

当客户端通过 RESTful API 提出请求时，它会将资源状态表述传递给请求者或终端。该信息或表述通过 HTTP 以下列某种格式传输：JSON（Javascript 对象表示法）、HTML、XLT、Python、PHP 或纯文本。JSON 是最常用的编程语言，尽管它的名字英文原意为“JavaScript 对象表示法”，但它适用于各种语言，并且人和机器都能读。

通俗的理解

RESTful API 要求前端以一种预定义的语法格式发送请求，那么服务端就只需要定义一个统一的响应接口，不必像之前那样解析各色各式的请求。

简单来说，就是用URI表示资源，资源在URI中用名词说明；用HTTP方法(GET, POST, PUT, DELETE)表征对这些资源的操作。

对于资源的具体操作类型，由HTTP动词表示。常用的HTTP动词有下面五个（括号里是对应的SQL命令）。

• GET（SELECT）：从服务器取出资源（一项或多项）。
• POST（CREATE）：在服务器新建一个资源。
• PUT（UPDATE）：在服务器更新资源（客户端提供改变后的完整资源）。
• PATCH（UPDATE）：在服务器更新资源（客户端提供改变的属性）。
• DELETE（DELETE）：从服务器删除资源。

对于暴露给外部用户使用的RESTful API，一般只提供GET操作接口。

PBCP（个人大数据竞赛平台）的RESTful API接口说明

小白学苑开发的PBCP（个人大数据竞赛平台）内置了Web Service并提供了几个常用的RESTful API接口，以满足用户测试需求。

要测试这些RESTful API接口:

首先启动PBCP平台虚拟机，

然后打开浏览器，访问http://yourNetWorkID:9527，我的是http://192.168.10.131:9527/

如下图所示：(注意，请将IP地址替换为你自己的IP)

可以点开任意一个链接测试。比如，点开第一个链接"某年某月（比如2016年11月）销售额最高的5个品牌，返回(品牌，销售额)"，它会请求RESTful API接口，并接收返回的JSON数据，如下图所示：

重点：vue.js项目中请求RESTful API接口

接下来实现这样的一示例：在vue.js项目中请求RESTful API接口，并显示请求回来的JSON数据。

继续在前面几节所创建上hellovue-app项目中开发，请按以下步骤操作：

(1) 安装axios依赖库。

在vue.js中是通过Ajax请求RESTful API接口的。Vue 版本推荐使用 axios 来完成 ajax 请求，Axios 是一个基于 Promise（保证） 的 HTTP 库，可以用在浏览器和 node.js 中。为此，我们首先在项目中安装Vue的Ajax依赖库axios，使得NPM包管理器安装：（如果出现错误则使用管理员权限运行cmd命令）

$ npm install axios

(2) 创建.vue页面文件。

在项目的src/views/文件夹下，创建一个名为Ajax.vue的文件，并编辑内容如下：

<template>
  <h2>Vue.js请求RESTful API并显示返回的数据</h2>
  <div class="right">
      <!-- 在这里显示数据 -->
      <p><pre>{{ items }}</pre></p>   
  </div>
</template>

<script>
    // 导入执行ajax的包
    import axios from 'axios'

    // 请求的RESTful API 接口(请将IP地址替换为自己PBCP的IP)
    var url = "http://192.168.10.131:9527/jingsai/bar/2016"

    export default {
      name: 'AjaxPage',
      data () {
        return {
          items: ''
        }
      },
      mounted () {  // 当这个页面挂载到DOM上时执行的方法
          // ajax的get请求
          axios.get(url)
              .then(response => {   // 请求成功处理
                    // 将返回的json数据赋值给items数据模型并显示在绑定的组件上		    
                    // 为了方便查看，对json数据进行了格式化转换
                    this.items = JSON.stringify(response.data,null,"\t\t\t");

                    // 控制台输出请求回来的json数据
                    console.log(response.data)
                })
              .catch(error => {    // 请求失败处理
                    console.log(error);
                });
      }
    }
</script>

<!-- 添加"scoped"属性来限制CSS仅作用于这个组件 -->
<style scoped>
.left{
  width:50%;
}
.right{
  width: 100%;
  float:right;
}

</style>

在上面的代码中，特别注意以下几点：

• 使用“import axios from ‘axios’”语句导入了axios包用于执行Ajax请求；
• 指定请求的RESTful API 接口为"/jingsai/bar/2016"，这是一个GET请求，其中**/jingsai/bar/是嵌套的资源路径**，2016是传递的参数，表示请求查询2016年的数据；
• mounted ()方法，这是当这个页面挂载到DOM上时执行的方法，Ajax请求应该在这个方法里执行；
• Ajax请求方法为axios.get(url)，说明这是一个GET请求（告诉RESTful API是要执行查询请求），参数url就是前面定义的RESTful API接口地址。

(3) 修改主组件App.vue，添加导航链接和渲染组件，代码如下：

<template>  
  <div class="navigate">
    <ul>
        <!--使用 router-link 组件进行导航 -->
        <li><router-link to="/">首页</router-link></li>
        <li><router-link to="/ajax">请求RESTful API接口</router-link></li>
    </ul>
  </div>
  <div class="pages">
      <!-- 渲染在这里 -->
      <router-view></router-view>
  </div> 
<</template>

<script>
  export default {
    name: 'App',
  }
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.navigate{
  width:200px;
  float:left;
  background-color: aliceblue;
}
</style>

(4) 修改入口文件main.js，导入路由组件文件并指定路由映射，主要修改部分如下：

......
// 1. 定义路由组件.  
import AjaxPage from "./views/Ajax.vue"

// 2. 定义一些路由映射
const routes = [
    { path: '/ajax', component: AjaxPage },
]
......

(5) 执行Vue应用程序。

在VS Code编辑器下方的“终端”窗口中，执行如下命令，启动开发服务器：

$ npm run serve

(6)打开浏览器查看结果

访问http://localhost:8080/ajax，可以看到如下的界面：

这说明我们的Vue程序已经正确地请求了RESTful API接口，并接收到了返回的JSON数据。

axios的两种请求方式

1、axios.post()方法发起POST请求

可以附加请求头和请求配置参数，例如：

// 在组件的script标签中
axios.post('/api/users', 
           {name: 'cavendish',age: 30},
           {headers: {'Content-Type': 'application/json'},
           {params: {token: '123abc'}}
          ).then(response => {
  console.log(response.data);
}).catch(error => {
  console.log(error);
});

上述代码中，我们为请求添加了Content-Type请求头，指定请求的数据类型为JSON格式，同时通过params参数

2、axios.get()方法发起get请求

7、vue3程序中使用js处理JSON数据的基本方法

1、JSON.stringify(obj,映射函数或者null,占位符)

作用：将JS对象转换回JSON基本数据格式

2、JSON.paser(data)

作用：把json字符串数据data转化为js语言的内置javascript obj类型

3、Object.assign(js_data, new_data);

作用：把new_data对象数据合并到js_data对象数据中

4、js数组.push(data)

作用：把数据data追加推到js数组中，类似于python中的append方法。

实例

let json_data = '[{"city": "New York", "temperature": 15, "humidity": 50},
                  {"city": "Los Angeles", "temperature": 25, "humidity": 30},
                  {"city": "Chicago", "temperature": -5, "humidity": 80},
                  {"city": "Miami", "temperature": 30, "humidity": 70},
                  {"city": "Houston", "temperature": 20, "humidity": 65}]';

let js_data = JSON.parse(json_data);

// 处理数据生成图表所需的格式
let xAxisData = [];
let temperatureData = [];
let humidityData = [];

for (let i = 0; i < js_data.length; i++) {
    let itemData = js_data[i];
    xAxisData.push(itemData.city);
    // 数据追加
    temperatureData.push(itemData.temperature);
    humidityData.push(itemData.humidity);
}

// 使用Echarts将数据可视化成图表
let chart = echarts.init(document.getElementById('chart-container'));

let option = {
    title: {
        text: '城市温度和湿度'
    },
    tooltip: {},
    legend: {
        data:['温度','湿度']
    },
    xAxis: {
        data: xAxisData
    },
    yAxis: {},
    series: [{
        name: '温度',
        type: 'bar',
        data: temperatureData
    }, {
        name: '湿度',
        type: 'bar',
        data: humidityData
    }]
};

chart.setOption(option);

5、js中String对象的使用和方法

// 创建字符串对象
const str1 = new String('2 + 2');

6、js中合并对象数据，assign(分配合并)

Object.assign(目标对象,要合并的原对象)：返回目标对象

const obj1 = { a: 1, b: 2 }
const obj2 = { b: 4, c: 5 }
// 目标对象 合并 的相同属性值 并不会被更改 会舍弃要合并对象的相同属性值
const obj3 = Object.assign(obj1, obj2)
console.log(obj3)

7、Object.values(obj)：返回obj中所有可枚举的属性值的数组

8、Object.keys(obj)：返回obj中所有可枚举的属性的数组

9、Object.fromEntries(Array)， 可以将Array转换为Object,Entries(条目 )

const arr = [ [‘0’, ‘a’], [‘1’, ‘b’], [‘2’, ‘c’] ]
const obj = Object.fromEntries(arr)
console.log(obj)
// { 0: “a”, 1: “b”, 2: “c” }

10、Object.entries(Obj)：把对象转换为数组

8、vue中配置vue.config.js

1、解决跨域请求实例

原理1：是利用 webpack devserver（开发服务） 的proxy代理功能，将前端的请求转发到目标(target)服务器进行处理，再将响应结果返回给浏览器。

原理2：本质和原理是利用了 Node.js 的 http 模块或者第三方的 http 请求库代理请求，将前端发送的请求转发到目标服务器上，再将响应结果返回给前端，从而绕过了浏览器的跨域安全机制。同时也可以通过硬编码实现对数据的加工、处理、拦截等一系列操作，以更好的适配目标服务器的接口规范。

1、在.vue组件中发送网络跨域请求

<script>
// 1、导入执行ajax的包
import axios from 'axios'
// 2、定义请求资源路径
var url = '/api/articles/393082843'
axios.get(url)
    .then(
    // 相当于.then( function (response) {...} )
    			(response) => {
                // 请求成功将返回的json数据赋值给items数据模型并显示在绑定的组件上,对json数据进行了格式化转换	    
                this.items = JSON.stringify(response.data, null, "\t\t\t");     
    			// 1、response 返回响应对象  2、然后观察这个对象中的数据在哪个属性中进行进一步提炼
                console.log(response.data)
                })
            // 请求失败处理
     .catch(error => {console.log(error)});
</script>

2、在vue.config.js文件中配置代理

// 此示例与示例一类似，但是在 configureWebpack 中配置了 Echarts 的别名路径，并且指向了压缩版本。这样便可以避免扫描所有的离线 Echarts 文件，提高项目运行效率，同时又不会出现路径无法匹配的情况。

// 模块.输出
module.exports = {
  // 开发环境
  devServer: {
    // 代理
    proxy: {
       // 需要替换的地址
      '/api': {
        // 将所有以 /api 开头的请求代理到 http://www.zhihu.com 这个域名接口
        target: 'http://www.zhihu.com',	// 目标服务器，让这个服务器帮我们获取数据(可以写请求地址的域名地址)
        // 改变起源，允许：相当于允许代理发送请求
        changeOrigin: true,
        // 路径重写，慎重！！！！
        pathRewrite: {
          // 修改请求地址中的 /api 为 ''，以保持正确的请求路径
          '^/api': ''
        }
      }
    }
  },
    
  // 配置网络包
  configureWebpack: {
    // 解析、解决、下决心
    resolve: {
      // 使失效、别名
      alias: {
        'echarts$': path.resolve(__dirname, 'node_modules/echarts/dist/echarts.min.js'),
        'zrender$': path.resolve(__dirname, 'node_modules/zrender/dist/zrender.min.js')
      }
    }
  }
}

3、在后端index.js文件中解决跨域

2、解决不扫描离线echarts文件

目的：在离线环境下Echarts图表也可以正常显示

禁用eslint检查，并将Echarts库排除在eslint之外

tip：exclude的参数可以是一个字符串或者一个正则表达式，这里我们使用正则表达式来排除由Echarts库导入的JS文件

1、在vue.config.js中添加代码

module.exports = {
    // 关闭eslint语法检查
    lintOnSave: false,
    // 
    chainWebpack: config => {
        // 在eslint语法检查规则中增加排除路径/echarts/
        config.module.rule("eslint").exclude.add(/echarts/);
    }
};

2、参考官网说明

https://eslint.org/docs/latest/use/command-line-interface#ignore-files

GPT步骤：

1、在组件中引入离线echarts文件

<!-- 在组件模板中引入echarts的dom容器 -->
<div ref="echartsContainer" style="height: 500px"></div>
// 在组件逻辑中引入离线echarts文件，在vue中@表示src资源路径
import echarts from '@/assets/js/echarts.min.js'; // 等价于src/assets/js/echarts.js
export default {
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    // 调用 initChart 函数绘制图表
    this.initChart();
  },
  methods: {
    initChart() {
      // 实例化一个echarts图表
      const element = this.$refs.echartsContainer;
      this.chart = echarts.init(element);
      // 设置图表配置项，以option对象的形式传入
      const option = {
        // ... 具体的图表配置项
      };
      // 使用setOption()方法将图表配置项作为参数传入
      this.chart.setOption(option);
    },
  },
};

2、在 vue.config.js 配置 eslint

使用 vue-cli 创建的vue项目默认已经安装了eslint插件。当我们引入第三方的js文件时，例如离线的echarts.min.js，如果没有进行特殊配置，eslint会扫描这个文件并报错。

我们可以在 vue.config.js 中配置 eslint，让它跳过扫描这个文件。具体配置如下：

 // 导出一个 JavaScript 对象
module.exports = {  
    // lintOnSave配置是否将 eslint-loader 作为一个可选项在每次保存时进行检查
    // 只在生产环境中使用 lintOnSave: true，因为开发模式下会减慢代码编译速度
    lintOnSave: process.env.NODE_ENV !== 'production',
  	// 配置eslint对象，eslint-loader配置
  	eslint: {
        // 加载器选项
    	loaderOptions: {
        // 排除不扫描：.js .html .vue .json结尾的文件，和 /src/assets/js/echarts.min.js文件
     	 exclude: [/\.js$/, /\.html$/, /\.vue$/, /\.json$/, '/src/assets/js/echarts.min.js'],
    },
  },
};

这样，我们就配置好在组件中引入离线echarts文件，并且让eslint跳过扫描这个文件了。

3、在组件里通过注释的方式，让 eslint 不检查一些代码，示例如下：

/* eslint-disable */
import echarts from '@/assets/js/echarts.min.js';
/* eslint-enable */

这段代码中，eslint-disable 表示从这一行开始，让 eslint 忽略检查，eslint-enable 表示从这一行开始，让 eslint 继续检查。在这段代码之间的代码，eslint 就不会再去检查了。

3、在vue.config.js中添加代码

// 方法2：在Webpack打包时，将所有名字包含“echarts”的文件都包含到打包文件中
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('js')
      .include.add(/echarts/)
      .end()
  }
}

9、解决JavaScript数据处理

1、sort()

排序，默认按照字母排序，内部可以传递 方法作为排序的回调函数规则

2、reserve()

反转数组方法

3、splice(start,end)

指定数组取索引范围内的值

例如：

let arr = [1,2,3,4,5,6,7]
// 取出指定数组前五个值
let newArr = arr.splice(0,5)

等等方法…
.chart = echarts.init(element);
// 设置图表配置项，以option对象的形式传入
const option = {
// … 具体的图表配置项
};
// 使用setOption()方法将图表配置项作为参数传入
this.chart.setOption(option);
},
},
};

#### 2、在 vue.config.js 配置 eslint

使用 vue-cli 创建的vue项目默认已经安装了eslint插件。当我们引入第三方的js文件时，例如离线的echarts.min.js，如果没有**进行特殊配置**，eslint会扫描这个文件并报错。

我们可以在 vue.config.js 中配置 eslint，让它跳过扫描这个文件。具体配置如下：

```js
 // 导出一个 JavaScript 对象
module.exports = {  
    // lintOnSave配置是否将 eslint-loader 作为一个可选项在每次保存时进行检查
    // 只在生产环境中使用 lintOnSave: true，因为开发模式下会减慢代码编译速度
    lintOnSave: process.env.NODE_ENV !== 'production',
  	// 配置eslint对象，eslint-loader配置
  	eslint: {
        // 加载器选项
    	loaderOptions: {
        // 排除不扫描：.js .html .vue .json结尾的文件，和 /src/assets/js/echarts.min.js文件
     	 exclude: [/\.js$/, /\.html$/, /\.vue$/, /\.json$/, '/src/assets/js/echarts.min.js'],
    },
  },
};

这样，我们就配置好在组件中引入离线echarts文件，并且让eslint跳过扫描这个文件了。

3、在组件里通过注释的方式，让 eslint 不检查一些代码，示例如下：

/* eslint-disable */
import echarts from '@/assets/js/echarts.min.js';
/* eslint-enable */

这段代码中，eslint-disable 表示从这一行开始，让 eslint 忽略检查，eslint-enable 表示从这一行开始，让 eslint 继续检查。在这段代码之间的代码，eslint 就不会再去检查了。

3、在vue.config.js中添加代码

// 方法2：在Webpack打包时，将所有名字包含“echarts”的文件都包含到打包文件中
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('js')
      .include.add(/echarts/)
      .end()
  }
}

9、解决JavaScript数据处理

[外链图片转存中…(img-pXshBfYC-1712248898533)]

1、sort()

排序，默认按照字母排序，内部可以传递 方法作为排序的回调函数规则

2、reserve()

反转数组方法

3、splice(start,end)

指定数组取索引范围内的值

例如：

let arr = [1,2,3,4,5,6,7]
// 取出指定数组前五个值
let newArr = arr.splice(0,5)

等等方法…