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 ...
随机推荐
- [洛谷P4097] [HEOI2013] Segment
Description 要求在平面直角坐标系下维护两个操作: 1.在平面上加入一条线段.记第 \(i\) 条被插入的线段的标号为 \(i\) 2.给定一个数 \(k\) ,询问与直线 \(x = k\ ...
- git使用的常见命令汇总
git的简单介绍 git是分布式版本控制工具 git 的基本操作指令 git init 初始化git仓库 git add 文件名 git add . 把文件 添加到 git 暂存区中 git stat ...
- AVLtree（C++实现）有统一的旋转操作
在学习完AVLtree之后,我发现,左旋,右旋均可以采用统一的旋转方式来实现,所以把代码贴在下面 代码是完整的AVLTree实现 C++标准为C++11 在ubuntu 18.04下通过编译和调试 / ...
- apache和nginx那点事儿--阻塞和异步
先明白的事儿:当一个程序在执行的时候,一般会创建一个进程,也可以有多个进程.一个进程至少会创建一个线程,多个线程共享一个程序进程的内存.程序的运行最终是靠线程来完成操作的.线程的数量跟CPU核数有关, ...
- nginx白名单黑名单设置
nginx白名单黑名单设置 白名单设置,访问根目录 location / { allow 123.34.22.155; allow 33.56.32.1/100; deny all; } 黑名单设置, ...
- ios--->OC中Protocol理解及在代理模式中的使用
OC中Protocol理解及在代理模式中的使用 Protocol基本概念 Protocol翻译过来, 叫做"协议",其作用就是用来声明一些方法: Protocol(协议)的作用 定 ...
- linux--->阿里云centos6.9安装yii2报错
阿里云centos6.9安装yii2报错 错误显示:Warning: require(/vendor/autoload.php): failed to open stream: No such fil ...
- 终于知道为什么linux文件系统权限是124了
哈哈,恍然大悟,出自pythonweb开发实战这一本书135页,有兴趣的朋友可以去了解下!
- MySQL Router单点隐患通过Keepalived实现
目录 一.介绍 二.环境准备 三.安装步骤 3.1下载软件包,解压 3.2源码安装 3.3配置keepalived 3.4修改keepalived配置文件 3.5启动keepalived 3.6查看V ...
- python 不可变字典 inmutabledict的实现
python inmutabledict的实现 关于在python中如何实现不可变字典的方法.早在pep416中,就建议python官方实现inmutabledict,但是官方否认了.理由主要是 根据 ...