因为我没有比赛库数据，所以用我自己的数据代替了，以各国家为省份，各大洲为地区为例子

任务一：用柱状图展示消费额最高的地区

编写Vue工程代码，根据接口，用柱状图展示2020年消费额最高的5个地区，同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴至对应报告中。

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 = truezhi = jbreak}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打印结果分别截图并粘贴至对应报告中。

var options = {title:{text:'饼状图展示2020年各地区的消费总额占比'},series:{data:dataAll,type:'pie',label:{formatter:'{b}{d}%'}}}myChart.setOption(options)

任务三：用折线图展示每年上架商品数量的变化

编写Vue工程代码，根据接口，用折线图展示每年上架商品数量的变化情况，同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴至对应报告中。

因为我自己的数据没有年份只有月份，所以我这里展示每月份的商品数量变化

var options = {title:{text:'折线图展示每月上架商品数量的变化情况'},xAxis:{data:citys,name:'月份'},yAxis:{name:'商品数量'},series:{data:buys,type:'line'}}myChart.setOption(options)

任务四：用条形图展示平均消费额最高的地区

编写Vue工程代码，根据接口，用条形图展示2020年平均消费额最高的5个地区，同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴至对应报告中。

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打印结果分别截图并粘贴至对应报告中。

var options = {title:{text:'基础散点图展示2020年最高10个省份平均消费额'},xAxis:{data:citys,name:'平均消费额'},yAxis:{name:'省份'},series:{data:buys,type:'scatter'}}myChart.setOption(options)

本人学习不深，如有错误请指正