前言
大数据应用开发------实时数据处理
Flink完成Kafka中的数据消费，将数据分发至Kafka的dwd层中
目录
题目
按照任务书要求编写前端代码，调用后台数据接口，使用Vue.js、ECharts完成数据可视化
创建Vue项目
# 以下是一个使用Vue.js 3.0和ECharts 5.1编写的简单示例。这个示例展示了如何在Vue组件中集成ECharts并绘制一个简单的折线图。
# 首先，确保你已经安装了Vue CLI和必要的依赖。你可以使用以下命令来创建一个新的Vue项目（如果还没有的话）：
npm install -g @vue/cli
vue create 项目名 (管理员运行)
cd 项目名
# 然后，安装ECharts：
npm install echarts --save
# 运行：
npm run serve将模板的HelloWorld.vue删减
<template>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return{
msg:HelloWorld
}
},
mounted(){
},
methods:{
}
}
</script>
<style scoped>
</style>请求数据，并打印在控制台上
<template>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return{
}
},
mounted(){
this.fetchData();
},
methods:{
fetchData(){
return fetch('https://mock.mengxuegu.com/mock/63bbc9160743af0df9523683/GZOld720/DSY',{
method: "POST",
body:JSON.stringify({
"startTime":"2021-01-01 00:00:00",
"endTime":"2021-12-31 00:00:00"
}),
headers:{ //请求头信息
'Content-Type':'application/json'
}
})
.then(response=>response.json())
.then(data=>{
const renData = data.list.data;
console.log(renData);
})
.catch(err=>{
console.log(err)
})
}
}
}
</script>
<style scoped>
</style>引用echarts，并展示柱状图
<template>
<div id="mychart" class="chart"></div>
</template>
<script>
import * as echart from 'echarts'
export default {
name: 'HelloWorld',
data(){
return{
}
},
mounted(){
this.fetchData();
},
methods:{
fetchData(){
return fetch('https://mock.mengxuegu.com/mock/63bbc9160743af0df9523683/GZOld720/DSY',{
method: "POST",
body:JSON.stringify({
"startTime":"2021-01-01 00:00:00",
"endTime":"2021-12-31 00:00:00"
}),
headers:{ //请求头信息
'Content-Type':'application/json'
}
})
.then(response=>response.json())
.then(data=>{
const renData = data.list.data;
console.log(renData);
renData.slice(0,5);
const option = {
title:{
text:"标题"
},
xAxis:{
data:renData.map(i=>i.nationName)
},
legend:{
},
yAxis:{},
series:[
{
type:"bar",
data:renData.map(i=>i.totalConsumption),
name:"消费额"
}
]
};
const mychart = echart.init(document.getElementById("mychart"));
mychart.setOption(option);
})
.catch(err=>{
console.log(err)
})
}
}
}
</script>
<style scoped>
.chart{
float: left;
width: 1000px;
height: 400px;
}
</style>展示折线图
<template>
<div id="mychart" class="chart"></div>
</template>
<script>
import * as echart from 'echarts'
export default {
name: 'HelloWorld',
data(){
return{
}
},
mounted(){
this.fetchData();
},
methods:{
fetchData(){
return fetch('https://mock.mengxuegu.com/mock/63bbc9160743af0df9523683/GZOld720/DSY',{
method: "POST",
body:JSON.stringify({
"startTime":"2021-01-01 00:00:00",
"endTime":"2021-12-31 00:00:00"
}),
headers:{ //请求头信息
'Content-Type':'application/json'
}
})
.then(response=>response.json())
.then(data=>{
const renData = data.list.data;
console.log(renData);
renData.slice(0,5);
const option = {
title:{
text:"标题"
},
xAxis:{
data:renData.map(i=>i.nationName)
},
legend:{
},
yAxis:{},
series:[
{
type:"line",
data:renData.map(i=>i.totalConsumption),
name:"消费额"
}
]
};
const mychart = echart.init(document.getElementById("mychart"));
mychart.setOption(option);
})
.catch(err=>{
console.log(err)
})
}
}
}
</script>
<style scoped>
.chart{
float: left;
width: 1000px;
height: 400px;
}
</style>展示饼图
<template>
<div id="mychart" class="chart"></div>
</template>
<script>
import * as echart from 'echarts'
export default {
name: 'HelloWorld',
data(){
return{
}
},
mounted(){
this.fetchData();
},
methods:{
fetchData(){
return fetch('https://mock.mengxuegu.com/mock/63bbc9160743af0df9523683/GZOld720/DSY',{
method: "POST",
body:JSON.stringify({
"startTime":"2021-01-01 00:00:00",
"endTime":"2021-12-31 00:00:00"
}),
headers:{ //请求头信息
'Content-Type':'application/json'
}
})
.then(response=>response.json())
.then(data=>{
const renData = data.list.data;
console.log(renData);
renData.slice(0,5);
const option = {
title:{
text:"标题"
},
legend:{},
series:[
{
type:"pie",
data:renData.map(i=>({
name: i.nationName,
value: i.totalConsumption
}))
}
]
};
const mychart = echart.init(document.getElementById("mychart"));
mychart.setOption(option);
})
.catch(err=>{
console.log(err)
})
}
}
}
</script>
<style scoped>
.chart{
float: left;
width: 1000px;
height: 400px;
}
</style>展示玫瑰图
<template>
<div id="mychart" class="chart"></div>
</template>
<script>
import * as echart from 'echarts'
export default {
name: 'HelloWorld',
data(){
return{
}
},
mounted(){
this.fetchData();
},
methods:{
fetchData(){
return fetch('https://mock.mengxuegu.com/mock/63bbc9160743af0df9523683/GZOld720/DSY',{
method: "POST",
body:JSON.stringify({
"startTime":"2021-01-01 00:00:00",
"endTime":"2021-12-31 00:00:00"
}),
headers:{ //请求头信息
'Content-Type':'application/json'
}
})
.then(response=>response.json())
.then(data=>{
const renData = data.list.data;
console.log(renData);
renData.slice(0,5);
const option = {
title:{
text:"标题"
},
legend:{},
series:[
{
type:"pie",
radius: [60, 110],
center: ["40%", 200],
roseType: "radius",
data:renData.map(i=>({
name: i.nationName,
value: i.totalConsumption
}))
}
]
};
const mychart = echart.init(document.getElementById("mychart"));
mychart.setOption(option);
})
.catch(err=>{
console.log(err)
})
}
}
}
</script>
<style scoped>
.chart{
float: left;
width: 1000px;
height: 400px;
}
</style>