axios,vue-echarts, async, vue 图表数据处理; axios 跨域代理; 异步同步请求接口;生命周期函数
1.vue-echarts 安装和组件引用
插件官网 https://github.com/ecomfe/vue-echarts
安装 npm install eacharts vue-echarts
页面引入 import ECharts from 'vue-echarts'
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line' // 折线图
import "echarts/lib/component/title" // 标题展示
import "echarts/lib/component/legend" // 图例展示
import "echarts/lib/component/tooltip" // 鼠标悬浮提示
2.API 接口获取方法(axios)和options 赋值
插件官网 https://github.com/axios/axios
1⃣️安装 npm install axios
main.js
import axios from 'axios'
Vue.prototype.$http = axios // axios 请求接口数据配置
covid_19.vue
import axios from 'axios'
// 使用
axios.get('/fy/get').then((result) => { 数据处理 })
2⃣️options 赋值
options 在 return 中赋值异步和同步获取得到的折线图动画异常(非匀速过度或无动画);建议将对象 options 放到 axios 回调函数中赋值
let self = this
axios.get("/fy/get").then((result) => {
let res = result.data
let tempTitle = eval('(' + res + ')').component[0]
let tempData = tempTitle.trend
console.log("****test*****", tempData)
self.covid = {
title: {// 标题
// text: '新增确诊/疑似病例',
text: tempTitle.title,
textStyle: {
fontWeight: "normal",
color: "green", // 标题颜色
fontSize: 14
},
// left: '50px'
},
legend:{
}
...省略代码块...
}
})
3.异步同步方法生(命周期函数一般函数)
异步方法
test () {
let self = this
axios.get("/fy/get").then((result) => {
let res = result.data
let tempTitle = eval('(' + res + ')').component[0]
let tempData = tempTitle.trend
console.log("****test*****", tempData)
self.covid = {
title: {// 标题
// text: '新增确诊/疑似病例',
text: tempTitle.title,
textStyle: {
fontWeight: "normal",
color: "green", // 标题颜色
fontSize: 14
},
// left: '50px'
},
legend: {// 图例
textStyle: {
fontSize: 14
},
data: ['疑似病例','新增病例'],
right:'right'
},
tooltip: {// 工具提示
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: {
// type: 'category',
data: tempData.updateDate, // 在x轴显示时间
axisLabel: { //横坐标字体颜色
show: true,
textStyle: {
color: "red"
}
},
axisLine: {
lineStyle: {
color: "red"
}
}
},
yAxis: {
type: 'value',
axisLabel: { //纵坐标字体颜色
show: true,
textStyle: {
color: "green"
}
},
axisLine: {
lineStyle: {
color: "green"
}
}
},
series: [
{// 一系列
type: 'line',
name: '新增病例',
color: 'blue', // 折线颜色
smooth: true,
data: tempData.list[4].data
},{// 一系列
type: 'line',
name: '疑似病例',
color: 'yellow', // 折线颜色
smooth: true,
data: tempData.list[5].data
}
],
animationDuration: 3000
}
同步方法
生命周期函数
async created(){
// 性能好于 beforeCreate (用时短 0.5s 左右) mounted (用时短 0.3s 左右)
console.log("mounted",)
let promisD = await this.func()
// console.log(promisD)
let tempTitle = eval('(' + promisD.data + ')').component[0] // 为了取 title
let tempData = tempTitle.trend // 目标数据
console.log("mounted", tempData.updateDate)
this.covid = {
title: {// 标题
// text: '新增确诊/疑似病例',
text: tempTitle.title,
textStyle: {
fontWeight: "normal",
color: "green", // 标题颜色
fontSize: 14
},
// left: '50px'
},
legend: {// 图例
textStyle: {
fontSize: 14
},
data: ['疑似病例','新增病例'],
right:'right'
},
tooltip: {// 工具提示
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: {
// type: 'category',
data: tempData.updateDate, // 在x轴显示时间
axisLabel: { //横坐标字体颜色
show: true,
textStyle: {
color: "red"
}
},
axisLine: {
lineStyle: {
color: "red"
}
}
},
yAxis: {
type: 'value',
axisLabel: { //纵坐标字体颜色
show: true,
textStyle: {
color: "green"
}
},
axisLine: {
lineStyle: {
color: "green"
}
}
},
series: [
{// 一系列
type: 'line',
name: '新增病例',
color: 'blue', // 折线颜色
smooth: true,
data: tempData.list[4].data
},{// 一系列
type: 'line',
name: '疑似病例',
color: 'yellow', // 折线颜色
smooth: true,
data: tempData.list[5].data
}
],
animationDuration: 3000
}
},
methods: {
func () { // axios 数据在不同场景下做不同的处理时(在对应的方法中取处理)或相同处理(返回数据直接在 then 中处理)
return new Promise((resolve, reject) => {
axios.get("/fy/get").then((res) => {
resolve(res)
}).catch((error) => {
reject(error)
})
})
// this.covid.xAxis.data = tempData.updateDate
},
}
一般函数
async initCovid () {
// 同 create
console.log("代码同 create 方法")
重点:axios 跨域代理配置
main.js
axios.defaults.baseURL = '/api' //关键代码 实际请求localhost:8080/api/fy/get/
vue.config.js
module.exports = {
devServer: {
proxy: { // 注意不是 proxyTable
'/api':{ // 找到 API 并替换前面地址
target: 'https://www.maomin.club', // 代理后真正请求 https://www.maomin.club/fy/get
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
注意:在 beforeCreate 生命周期函数中 获取 data 中数据方式 this.$options.data().属性
调用methods 中方法 this.$options.methods.func()
完整代码:
<template>
<v-chart class="echarts" :options="covid" :auto-resize="true"/>
</template> <script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
import "echarts/lib/component/title"
import "echarts/lib/component/legend"
import "echarts/lib/component/tooltip"
import axios from 'axios'
var timerShaft = [], confirmedCase = [], suspectedCase = []
export default {
components: {
'v-chart': ECharts
},
data () { /**
* covid 在异步方法或同步方法中处理否则-后半折线动画异常(return 里赋值会失去动画效果)
* 1.axios 异步获取 created
* 2.axios 同步获取
*/
this.test() // 异步方法中处理数据
this.initCovid() // 同步方法中处理数据 (加载时间不稳定 2.5s - 1.5s 波动)
return {
covid:{}
}
},
beforeCreate(){
// 可以 修改 let promisD = await this.$options.methods.func()
// console.log("beforeCreate",)
},
/**
* 生命周期函数中处理
*/
// async created(){
// // 性能好于 beforeCreate (用时短 0.5s 左右) mounted (用时短 0.3s 左右)
// console.log("mounted",)
// let promisD = await this.func()
// // console.log(promisD)
// let tempTitle = eval('(' + promisD.data + ')').component[0] // 为了取 title
// let tempData = tempTitle.trend // 目标数据
// console.log("mounted", tempData.updateDate)
// this.covid = {
// title: {// 标题
// // text: '新增确诊/疑似病例',
// text: tempTitle.title,
// textStyle: {
// fontWeight: "normal",
// color: "green", // 标题颜色
// fontSize: 14
// },
// // left: '50px'
// },
// legend: {// 图例
// textStyle: {
// fontSize: 14
// },
// data: ['疑似病例','新增病例'],
// right:'right'
// },
// tooltip: {// 工具提示
// trigger: 'axis',
// axisPointer: {
// type: 'cross'
// }
// },
// xAxis: {
// // type: 'category',
// data: tempData.updateDate, // 在x轴显示时间
// axisLabel: { //横坐标字体颜色
// show: true,
// textStyle: {
// color: "red"
// }
// },
// axisLine: {
// lineStyle: {
// color: "red"
// }
// }
// },
// yAxis: {
// type: 'value',
// axisLabel: { //纵坐标字体颜色
// show: true,
// textStyle: {
// color: "green"
// }
// },
// axisLine: {
// lineStyle: {
// color: "green"
// }
// }
// },
// series: [
// {// 一系列
// type: 'line',
// name: '新增病例',
// color: 'blue', // 折线颜色
// smooth: true,
// data: tempData.list[4].data
// },{// 一系列
// type: 'line',
// name: '疑似病例',
// color: 'yellow', // 折线颜色
// smooth: true,
// data: tempData.list[5].data
// }
// ],
// animationDuration: 3000
// }
// }, methods: {
async initCovid () {
// 同 create
console.log("代码同 create 方法")
},
test () {
let self = this
axios.get("/fy/get").then((result) => {
let res = result.data
let tempTitle = eval('(' + res + ')').component[0]
let tempData = tempTitle.trend
console.log("****test*****", tempData)
self.covid = {
title: {// 标题
// text: '新增确诊/疑似病例',
text: tempTitle.title,
textStyle: {
fontWeight: "normal",
color: "green", // 标题颜色
fontSize: 14
},
// left: '50px'
},
legend: {// 图例
textStyle: {
fontSize: 14
},
data: ['疑似病例','新增病例'],
right:'right'
},
tooltip: {// 工具提示
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: {
// type: 'category',
data: tempData.updateDate, // 在x轴显示时间
axisLabel: { //横坐标字体颜色
show: true,
textStyle: {
color: "red"
}
},
axisLine: {
lineStyle: {
color: "red"
}
}
},
yAxis: {
type: 'value',
axisLabel: { //纵坐标字体颜色
show: true,
textStyle: {
color: "green"
}
},
axisLine: {
lineStyle: {
color: "green"
}
}
},
series: [
{// 一系列
type: 'line',
name: '新增病例',
color: 'blue', // 折线颜色
smooth: true,
data: tempData.list[4].data
},{// 一系列
type: 'line',
name: '疑似病例',
color: 'yellow', // 折线颜色
smooth: true,
data: tempData.list[5].data
}
],
animationDuration: 3000
}
}) },
func () { // axios 数据在不同场景下做不同的处理时(在对应的方法中取处理)或相同处理(返回数据直接在 then 中处理)
return new Promise((resolve, reject) => {
axios.get("/fy/get").then((res) => {
resolve(res)
}).catch((error) => {
reject(error)
})
})
// this.covid.xAxis.data = tempData.updateDate
},
monthDay () {
let currentDate = new Date();// 当天日期
let currentDay = currentDate.getDate();// 具体某一天
let month, date, confirmed=0, suspected=0// 定义变量 月和天
for (let i = 20; i >= 0; i-- ) {// 取14天包括当天
let accordDate = currentDate.setDate(currentDay - i);// 符合条件的日期
month = new Date(accordDate).getMonth() + 1
date = new Date(accordDate).getDate()
confirmed = confirmed + 100
suspected = suspected + 500
confirmedCase.push(confirmed)
suspectedCase.push(suspected)
timerShaft.push(month + '.' + date)
}
// console.log('eee', timerShaft)
// console.log('case', confirmedCase)
}
}
}
</script>
<style>
#container{
width: 100%;
height: 100%;
}
.echarts {
/* :auto-resize 自动大小默认是 false */
/* width: auto;
height: 50%; */
}
</style>
demo 地址: https://github.com/dopocheng/alone-part/tree/master/src/views/echarts/covid-19
axios,vue-echarts, async, vue 图表数据处理; axios 跨域代理; 异步同步请求接口;生命周期函数的更多相关文章
- vue学习过程总结（07） - vue的后台服务API封装及跨域问题的解决
以登录流程为例说明接口的封装. 1.登录调用后台的登录api 登录界面的代码 <template> <div class="login-page"> < ...
- 填个小坑，Vue不支持IE8及以下，跨域ajax不支持IE9
这特么就尴尬了,说好的Vue支持IE8及以下的呢,引入jquery,测试IE个浏览器,IE9仍然显示不正常, 然而命令行测试Vue仍然存在, 数据回不来!数据回不来!数据回不来! 好吧 肉包子打狗$ ...
- ASP.NET WebApi+Vue前后端分离之允许启用跨域请求
前言: 这段时间接手了一个新需求,将一个ASP.NET MVC项目改成前后端分离项目.前端使用Vue,后端则是使用ASP.NET WebApi.在搭建完成前后端框架后,进行接口测试时发现了一个前后端分 ...
- axios FastMock 跨域 代理
发送请求: 实现:发送请求,获取数据. 原本想自己写服务,后来无意间找到FastMock这个东东,于是就有了下文... 首先我安装了axios,在fastmock注册好了并创建了一个接口,怎么搞自行百 ...
- vue跨域代理配置
实际:http://a.com/b.php 代理:http://localhost/b.php 配置config/index.js proxyTable: { '/api': { target:'ht ...
- 解决vue+springboot前后端分离项目,前端跨域访问sessionID不一致导致的session为null问题
问题: 前端跨域访问后端接口, 在浏览器的安全策略下默认是不携带cookie的, 所以每次请求都开启了一次新的会话. 在后台打印sessionID我们会发现, 每次请求的sessionID都是不同的, ...
- vue+django分离开发的思想和跨域问题的解决
一.介绍 在前后端分离的开发过程中,会涉及到跨域的问题,比如本次个人使用的Django+vue的框架,在vue对Django进行响应,Django再将响应的数据返回给vue,vue在进行渲染,如果不设 ...
- Vue+SpringBoot前后端分离中的跨域问题
在前后端分离开发中,需要前端调用后端api并进行内容显示,如果前后端开发都在一台主机上,则会由于浏览器的同源策略限制,出现跨域问题(协议.域名.端口号不同等),导致不能正常调用api接口,给开发带来不 ...
- Vue.js——基于$.ajax实现数据的跨域增删查改
概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是local的.在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax ...
随机推荐
- Codeforces940掉分记
掉分经过 难得这次时间比较好,下午17:35开始. 本来还很高兴,心想这回肯定不会犯困,没准排名能再上升一些呢,,可惜事与愿违-- 上来a题,光看懂题就花了一些时间. 然后开始写,结果第一遍CE,第二 ...
- Redis 中的数据持久化策略（AOF）
上一篇文章,我们讲的是 Redis 的一种基于内存快照的持久化存储策略 RDB,本质上他就是让 redis fork 出一个子进程遍历我们所有数据库中的字典,进行磁盘文件的写入. 但其实这种方式是有缺 ...
- [C语言学习笔记一]基本构架和变量
基本构架 所有的C程序都有一个 main 函数.其后包含在大括号中的是 main 函数的内容. main函数是程序的入口,程序运行后,先进入 main 函数,然后一次执行 main 函数体中的语句. ...
- kali-2019.4中文乱码问题的解决
1.安装完kali-2019.4版出现乱码问题 2.更新源,用vi编辑器,在/etc/apt/resources.list中添加清华源 #清华大学 [更新源]deb https://mirrors.t ...
- Shell常用命令之sort
sort命令 sort命令是在Linux里非常有用,它将文件进行排序,并将排序结果标准输出.sort命令既可以从特定的文件,也可以从stdin中获取输入. 语法 sort (选项) (参数) 选项 - ...
- Docker基础内容之镜像构建
前言 Docker可以通过读取Dockerfile中的指令来自动构建图像.Dockerfile是一个文本文档,包含用户可以在命令行上调用的所有命令来组装一个图像.使用docker构建用户可以创建一个自 ...
- 使用IDEA构建Spring-boot多模块项目配置流程
使用IDEA构建Spring-boot多模块项目配置流程 1.创建项目 点击Create New Project 在左侧选中Spring Initializer,保持默认配置,点击下一步. 在Grou ...
- 机器学习-NLP之Word embedding 原理及应用
概述 自然语言是非常复杂多变的,计算机也不认识咱们的语言,那么咱们如何让咱们的计算机学习咱们的语言呢?首先肯定得对咱们的所有文字进行编码吧,那咱们很多小伙伴肯定立马就想出了这还不简单嘛,咱们的计算机不 ...
- ProxySQL 基础篇
1.ProxySQL 介绍 ProxySQL 是基于 MySQL 的一款开源的中间件的产品,是一个灵活的 MySQL 代理层,可以实现读写分离,支持 Query 路由功能,支持动态指定某个 SQL 进 ...
- LESS 用法入门
本文旨在加深对 LESS 的理解和记忆,供自己开发时参考.相信对没有接触过 LESS 的程序员还是有用的,大佬绕路. 一. 安装和使用 LESS 1.1 安装 使用命令行安装 LESS npm ins ...