大数据应用开发——数据可视化

前言

大数据应用开发——实时数据采集

大数据应用开发——实时数据处理

        Flink完成Kafka中的数据消费，将数据分发至Kafka的dwd层中

        并在HBase中进行备份

目录

        题目

        创建Vue项目

        引用echarts，并展示柱状图

        展示折线图

        展示饼图

        展示玫瑰图

---

题目

按照任务书要求编写前端代码，调用后台数据接口，使用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>