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.异步同步方法生(命周期函数一般函数)
异步方法
1 test () {
2 let self = this
3 axios.get("/fy/get").then((result) => {
4 let res = result.data
5 let tempTitle = eval(‘(‘ + res + ‘)‘).component[0]
6 let tempData = tempTitle.trend
7 console.log("****test*****", tempData)
8 self.covid = {
9 title: {// 标题
10 // text: ‘新增确诊/疑似病例‘,
11 text: tempTitle.title,
12 textStyle: {
13 fontWeight: "normal",
14 color: "green", // 标题颜色
15 fontSize: 14
16 },
17 // left: ‘50px‘
18 },
19 legend: {// 图例
20 textStyle: {
21 fontSize: 14
22 },
23 data: [‘疑似病例‘,‘新增病例‘],
24 right:‘right‘
25 },
26 tooltip: {// 工具提示
27 trigger: ‘axis‘,
28 axisPointer: {
29 type: ‘cross‘
30 }
31 },
32 xAxis: {
33 // type: ‘category‘,
34 data: tempData.updateDate, // 在x轴显示时间
35 axisLabel: { //横坐标字体颜色
36 show: true,
37 textStyle: {
38 color: "red"
39 }
40 },
41 axisLine: {
42 lineStyle: {
43 color: "red"
44 }
45 }
46 },
47 yAxis: {
48 type: ‘value‘,
49 axisLabel: { //纵坐标字体颜色
50 show: true,
51 textStyle: {
52 color: "green"
53 }
54 },
55 axisLine: {
56 lineStyle: {
57 color: "green"
58 }
59 }
60 },
61 series: [
62 {// 一系列
63 type: ‘line‘,
64 name: ‘新增病例‘,
65 color: ‘blue‘, // 折线颜色
66 smooth: true,
67 data: tempData.list[4].data
68 },{// 一系列
69 type: ‘line‘,
70 name: ‘疑似病例‘,
71 color: ‘yellow‘, // 折线颜色
72 smooth: true,
73 data: tempData.list[5].data
74 }
75 ],
76 animationDuration: 3000
77 }
同步方法
生命周期函数
1 async created(){
2 // 性能好于 beforeCreate (用时短 0.5s 左右) mounted (用时短 0.3s 左右)
3 console.log("mounted",)
4 let promisD = await this.func()
5 // console.log(promisD)
6 let tempTitle = eval(‘(‘ + promisD.data + ‘)‘).component[0] // 为了取 title
7 let tempData = tempTitle.trend // 目标数据
8 console.log("mounted", tempData.updateDate)
9 this.covid = {
10 title: {// 标题
11 // text: ‘新增确诊/疑似病例‘,
12 text: tempTitle.title,
13 textStyle: {
14 fontWeight: "normal",
15 color: "green", // 标题颜色
16 fontSize: 14
17 },
18 // left: ‘50px‘
19 },
20 legend: {// 图例
21 textStyle: {
22 fontSize: 14
23 },
24 data: [‘疑似病例‘,‘新增病例‘],
25 right:‘right‘
26 },
27 tooltip: {// 工具提示
28 trigger: ‘axis‘,
29 axisPointer: {
30 type: ‘cross‘
31 }
32 },
33 xAxis: {
34 // type: ‘category‘,
35 data: tempData.updateDate, // 在x轴显示时间
36 axisLabel: { //横坐标字体颜色
37 show: true,
38 textStyle: {
39 color: "red"
40 }
41 },
42 axisLine: {
43 lineStyle: {
44 color: "red"
45 }
46 }
47 },
48 yAxis: {
49 type: ‘value‘,
50 axisLabel: { //纵坐标字体颜色
51 show: true,
52 textStyle: {
53 color: "green"
54 }
55 },
56 axisLine: {
57 lineStyle: {
58 color: "green"
59 }
60 }
61 },
62 series: [
63 {// 一系列
64 type: ‘line‘,
65 name: ‘新增病例‘,
66 color: ‘blue‘, // 折线颜色
67 smooth: true,
68 data: tempData.list[4].data
69 },{// 一系列
70 type: ‘line‘,
71 name: ‘疑似病例‘,
72 color: ‘yellow‘, // 折线颜色
73 smooth: true,
74 data: tempData.list[5].data
75 }
76 ],
77 animationDuration: 3000
78 }
79 },
80 methods: {
81 func () { // axios 数据在不同场景下做不同的处理时(在对应的方法中取处理)或相同处理(返回数据直接在 then 中处理)
82 return new Promise((resolve, reject) => {
83 axios.get("/fy/get").then((res) => {
84 resolve(res)
85 }).catch((error) => {
86 reject(error)
87 })
88 })
89 // this.covid.xAxis.data = tempData.updateDate
90 },
91 }
一般函数
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()
完整代码:
1 <template>
2 <v-chart class="echarts" :options="covid" :auto-resize="true"/>
3 </template>
4
5 <script>
6 import ECharts from ‘vue-echarts‘
7 import ‘echarts/lib/chart/line‘
8 import "echarts/lib/component/title"
9 import "echarts/lib/component/legend"
10 import "echarts/lib/component/tooltip"
11 import axios from ‘axios‘
12 var timerShaft = [], confirmedCase = [], suspectedCase = []
13 export default {
14 components: {
15 ‘v-chart‘: ECharts
16 },
17 data () {
18
19 /**
20 * covid 在异步方法或同步方法中处理否则-后半折线动画异常(return 里赋值会失去动画效果)
21 * 1.axios 异步获取 created
22 * 2.axios 同步获取
23 */
24 this.test() // 异步方法中处理数据
25 this.initCovid() // 同步方法中处理数据 (加载时间不稳定 2.5s - 1.5s 波动)
26 return {
27 covid:{}
28 }
29 },
30 beforeCreate(){
31 // 可以 修改 let promisD = await this.$options.methods.func()
32 // console.log("beforeCreate",)
33 },
34 /**
35 * 生命周期函数中处理
36 */
37 // async created(){
38 // // 性能好于 beforeCreate (用时短 0.5s 左右) mounted (用时短 0.3s 左右)
39 // console.log("mounted",)
40 // let promisD = await this.func()
41 // // console.log(promisD)
42 // let tempTitle = eval(‘(‘ + promisD.data + ‘)‘).component[0] // 为了取 title
43 // let tempData = tempTitle.trend // 目标数据
44 // console.log("mounted", tempData.updateDate)
45 // this.covid = {
46 // title: {// 标题
47 // // text: ‘新增确诊/疑似病例‘,
48 // text: tempTitle.title,
49 // textStyle: {
50 // fontWeight: "normal",
51 // color: "green", // 标题颜色
52 // fontSize: 14
53 // },
54 // // left: ‘50px‘
55 // },
56 // legend: {// 图例
57 // textStyle: {
58 // fontSize: 14
59 // },
60 // data: [‘疑似病例‘,‘新增病例‘],
61 // right:‘right‘
62 // },
63 // tooltip: {// 工具提示
64 // trigger: ‘axis‘,
65 // axisPointer: {
66 // type: ‘cross‘
67 // }
68 // },
69 // xAxis: {
70 // // type: ‘category‘,
71 // data: tempData.updateDate, // 在x轴显示时间
72 // axisLabel: { //横坐标字体颜色
73 // show: true,
74 // textStyle: {
75 // color: "red"
76 // }
77 // },
78 // axisLine: {
79 // lineStyle: {
80 // color: "red"
81 // }
82 // }
83 // },
84 // yAxis: {
85 // type: ‘value‘,
86 // axisLabel: { //纵坐标字体颜色
87 // show: true,
88 // textStyle: {
89 // color: "green"
90 // }
91 // },
92 // axisLine: {
93 // lineStyle: {
94 // color: "green"
95 // }
96 // }
97 // },
98 // series: [
99 // {// 一系列
100 // type: ‘line‘,
101 // name: ‘新增病例‘,
102 // color: ‘blue‘, // 折线颜色
103 // smooth: true,
104 // data: tempData.list[4].data
105 // },{// 一系列
106 // type: ‘line‘,
107 // name: ‘疑似病例‘,
108 // color: ‘yellow‘, // 折线颜色
109 // smooth: true,
110 // data: tempData.list[5].data
111 // }
112 // ],
113 // animationDuration: 3000
114 // }
115 // },
116
117 methods: {
118 async initCovid () {
119 // 同 create
120 console.log("代码同 create 方法")
121 },
122 test () {
123 let self = this
124 axios.get("/fy/get").then((result) => {
125 let res = result.data
126 let tempTitle = eval(‘(‘ + res + ‘)‘).component[0]
127 let tempData = tempTitle.trend
128 console.log("****test*****", tempData)
129 self.covid = {
130 title: {// 标题
131 // text: ‘新增确诊/疑似病例‘,
132 text: tempTitle.title,
133 textStyle: {
134 fontWeight: "normal",
135 color: "green", // 标题颜色
136 fontSize: 14
137 },
138 // left: ‘50px‘
139 },
140 legend: {// 图例
141 textStyle: {
142 fontSize: 14
143 },
144 data: [‘疑似病例‘,‘新增病例‘],
145 right:‘right‘
146 },
147 tooltip: {// 工具提示
148 trigger: ‘axis‘,
149 axisPointer: {
150 type: ‘cross‘
151 }
152 },
153 xAxis: {
154 // type: ‘category‘,
155 data: tempData.updateDate, // 在x轴显示时间
156 axisLabel: { //横坐标字体颜色
157 show: true,
158 textStyle: {
159 color: "red"
160 }
161 },
162 axisLine: {
163 lineStyle: {
164 color: "red"
165 }
166 }
167 },
168 yAxis: {
169 type: ‘value‘,
170 axisLabel: { //纵坐标字体颜色
171 show: true,
172 textStyle: {
173 color: "green"
174 }
175 },
176 axisLine: {
177 lineStyle: {
178 color: "green"
179 }
180 }
181 },
182 series: [
183 {// 一系列
184 type: ‘line‘,
185 name: ‘新增病例‘,
186 color: ‘blue‘, // 折线颜色
187 smooth: true,
188 data: tempData.list[4].data
189 },{// 一系列
190 type: ‘line‘,
191 name: ‘疑似病例‘,
192 color: ‘yellow‘, // 折线颜色
193 smooth: true,
194 data: tempData.list[5].data
195 }
196 ],
197 animationDuration: 3000
198 }
199 })
200
201 },
202 func () { // axios 数据在不同场景下做不同的处理时(在对应的方法中取处理)或相同处理(返回数据直接在 then 中处理)
203 return new Promise((resolve, reject) => {
204 axios.get("/fy/get").then((res) => {
205 resolve(res)
206 }).catch((error) => {
207 reject(error)
208 })
209 })
210 // this.covid.xAxis.data = tempData.updateDate
211 },
212 monthDay () {
213 let currentDate = new Date();// 当天日期
214 let currentDay = currentDate.getDate();// 具体某一天
215 let month, date, confirmed=0, suspected=0// 定义变量 月和天
216 for (let i = 20; i >= 0; i-- ) {// 取14天包括当天
217 let accordDate = currentDate.setDate(currentDay - i);// 符合条件的日期
218 month = new Date(accordDate).getMonth() + 1
219 date = new Date(accordDate).getDate()
220 confirmed = confirmed + 100
221 suspected = suspected + 500
222 confirmedCase.push(confirmed)
223 suspectedCase.push(suspected)
224 timerShaft.push(month + ‘.‘ + date)
225 }
226 // console.log(‘eee‘, timerShaft)
227 // console.log(‘case‘, confirmedCase)
228 }
229 }
230 }
231 </script>
232 <style>
233 #container{
234 width: 100%;
235 height: 100%;
236 }
237 .echarts {
238 /* :auto-resize 自动大小默认是 false */
239 /* width: auto;
240 height: 50%; */
241 }
242 </style>
demo 地址: https://github.com/dopocheng/alone-part/tree/master/src/views/echarts/covid-19
原文地址：https://www.cnblogs.com/dopocheng/p/12372786.html
时间： 2024-10-10 20:05:39