2022高职国家技能大赛（大数据竞赛）-模块E：数据可视化-任务书5

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

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

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

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)

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