大数据可视化 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)
等等方法…