因为我没有比赛库数据,所以用我自己的数据代替了,以各国家为省份,各大洲为地区为例子
任务一:用柱状图展示消费额最高的地区
编写Vue工程代码,根据接口,用柱状图展示2020年消费额最高的5个地区,同时将用于图表展示的数据结构在浏览器的console中进行打印输出,将图表可视化结果和浏览器console打印结果分别截图并粘贴至对应报告中。
![](https://img-blog.csdnimg.cn/img_convert/e9d8bf150ce972cfddd219e132bc385a.png)
![](https://img-blog.csdnimg.cn/img_convert/6ae233f591c1ac00b06b46550114bf7a.png)
axios.get(url).then(res =>{
for(let i in res.data){
for(let j in dataAll){
if(res.data[i].region == dataAll[j].name){
bool = true
zhi = j
break
}else{
bool = false
}
}
if(bool){
dataAll[zhi].priceSale += res.data[i].priceSale
}else{
dataAll.push({name:res.data[i].region,value:res.data[i].priceSale})
}
}
var options = {
title:{
text:'柱状图展示2020年消费额最高的5个地区'
},
xAxis:{
data:citys,
name:'地区'
},
yAxis:{
name:'消费额'
},
series:{
data:buys,
type:'bar'
}
}
myChart.setOption(options)
任务二:用饼状图展示各地区消费能力
编写Vue工程代码,根据接口,用饼状图展示2020年各地区的消费总额占比,同时将用于图表展示的数据结构在浏览器的console中进行打印输出,将图表可视化结果和浏览器console打印结果分别截图并粘贴至对应报告中。
![](https://img-blog.csdnimg.cn/img_convert/112ce14d21d2ed28082c3a0549496089.png)
![](https://img-blog.csdnimg.cn/img_convert/aa1128d94f3aab1bbf2c7ebd02768e58.png)
var options = {
title:{
text:'饼状图展示2020年各地区的消费总额占比'
},
series:{
data:dataAll,
type:'pie',
label:{
formatter:'{b}{d}%'
}
}
}
myChart.setOption(options)
任务三:用折线图展示每年上架商品数量的变化
编写Vue工程代码,根据接口,用折线图展示每年上架商品数量的变化情况,同时将用于图表展示的数据结构在浏览器的console中进行打印输出,将图表可视化结果和浏览器console打印结果分别截图并粘贴至对应报告中。
因为我自己的数据没有年份只有月份,所以我这里展示每月份的商品数量变化
![](https://img-blog.csdnimg.cn/img_convert/681ff6356278a3f0a3926815ce0dfcbc.png)
![](https://img-blog.csdnimg.cn/img_convert/b72b072cdde61f6bc2baa21949a71984.png)
var options = {
title:{
text:'折线图展示每月上架商品数量的变化情况'
},
xAxis:{
data:citys,
name:'月份'
},
yAxis:{
name:'商品数量'
},
series:{
data:buys,
type:'line'
}
}
myChart.setOption(options)
任务四:用条形图展示平均消费额最高的地区
编写Vue工程代码,根据接口,用条形图展示2020年平均消费额最高的5个地区,同时将用于图表展示的数据结构在浏览器的console中进行打印输出,将图表可视化结果和浏览器console打印结果分别截图并粘贴至对应报告中。
![](https://img-blog.csdnimg.cn/img_convert/6e9811617f6762a44348feb0ad6f6bc5.png)
![](https://img-blog.csdnimg.cn/img_convert/f19433d0052a92acb4542e87841b854c.png)
var options = {
title:{
text:'条形图展示2020年平均消费额最高的5个地区'
},
xAxis:{
name:'平均消费额'
},
yAxis:{
data:citys,
name:'地区'
},
series:{
data:buys,
type:'bar'
}
}
myChart.setOption(options)
任务五:用散点图展示省份平均消费额
编写Vue工程代码,根据接口,用基础散点图展示2020年最高10个省份平均消费额,同时将用于图表展示的数据结构在浏览器的console中进行打印输出,将图表可视化结果和浏览器console打印结果分别截图并粘贴至对应报告中。
![](https://img-blog.csdnimg.cn/img_convert/531ca8665689821b5c0edf4c7b3f72f8.png)
![](https://img-blog.csdnimg.cn/img_convert/5a79199b5d1a37c6a0dacf60359ed580.png)
var options = {
title:{
text:'基础散点图展示2020年最高10个省份平均消费额'
},
xAxis:{
data:citys,
name:'平均消费额'
},
yAxis:{
name:'省份'
},
series:{
data:buys,
type:'scatter'
}
}
myChart.setOption(options)
本人学习不深,如有错误请指正