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

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

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

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

var options = {
        title:{
          text:'柱状图展示2020年消费额最高的5个省份'
        },
        xAxis:{
          data:citys,
          name:'省份',
          axisLabel:{
            interval:0
          }
        },
        yAxis:{
          name:'消费额'
        },
        series:{
          data:buys,
          type:'bar'
        }
      }

      myChart.setOption(options)

任务二：用饼状图展示各地区消费能力

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

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

      myChart.setOption(options)

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

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

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

var options = {
        title:{
          text:'散点图展示每月上架商品数量的变化情况'
        },
        xAxis:{
          data:citys,
          name:'月份'
        },
        yAxis:{
          name:'消费额'
        },
        series:{
          data:buys,
          type:'scatter'
        }
      }

      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年各省份平均消费额和地区平均消费额的对比情况，柱状图展示平均消费额最高的5个省份，折线图展示这5个省所在的地区的平均消费额变化，同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴至对应报告中。

var options ={
        title:{
          text:'折柱混合图展示2020年各省平均消费额和所对应地区平均消费额对比情况'
        },
        xAxis:[
          {
            data:citys,
            name:'省份',
            axisLabel:{
              interval:0
            }
          },
          {
            data:dq,
            name:'地区'
          }
        ],
        yAxis:{
          name:'平均消费额'
        },
        series:[
          {
            data:buys,
            type:'bar'
          },
          {
            data:dqpj,
            type:'line'
          }
        ]
      }

      myChart.setOption(options)

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