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 ...
随机推荐
- python 进程Queue
1.作用:进程之间的数据交互 2.常用方法 """ 对象.put() 作用:放入队列一个数据 对象.get() 作用:取队列一个数据,若队列没有值,则阻塞 对象.empt ...
- 网站 cache control 最佳实践
推荐阅读: 2020年软件开发趋势 高并发案例 - 库存超发问题 负载均衡的分类及算法 异地多活架构 Postman 的替代品来了 有时,当第二次访问网站时,看起来比较怪,样式不正常. 通常,是因为 ...
- 异数OS 织梦师-云（五）-- 容器服务化，绿色拯救未来。
. 异数OS 织梦师-云(五)– 容器服务化,绿色拯救未来. 本文来自异数OS社区 github: https://github.com/yds086/HereticOS 异数OS社区QQ群: 652 ...
- 一行代码去掉Devexpress弹窗
使用的是.net hook方法: 使用代码: using System; using System.Windows.Forms; namespace AlexDevexpressToolTest { ...
- [洛谷P2962] [USACO09NOV] 灯Lights
Description Bessie and the cows were playing games in the barn, but the power was reset and the ligh ...
- 靶机-droopyCTF Walkthrough
droopyCTF https://www.vulnhub.com/?q=droopy&sort=date-des&type=vm CTF镜像合集:https://www.vulnhu ...
- 第一章001-003课程介绍、计算机网络概述、Internet概述
计算机网络概述 课程安排: 第一章:概述 第二章:物理层 第三章:数据链路层 第四章:网络层 第五章:运输层 第六章:应用层 第七章:网络安全 第八章:因特网上的音频/视频服务 第九章:无线网络 第十 ...
- Python学习，第四课 - 字符串相关操作
这次主要说说Python中字符串的使用方法详解 capitalize 首字母大写 print('chengshou'.capitalize()) #输出结果:Chengshou title 修改成标题 ...
- ThreeJS 物理材质shader源码分析(像素着色器)
再此之前推荐一款GLTF物理材质在线编辑器https://tinygltf.xyz/ 像素着色器(meshphysical_frag.glsl) #define PHYSICAL uniform ve ...
- ios---scrollview用法总结
一.使用步骤: 1.添加子组件到scrollview //必要步骤 2.设置clipsToBounds来确定超出范围是否被剪裁 (默认yes) self.scrolltest.clipsToBound ...