全国职业院校技能大赛-大数据应用赛项-数据可视化-01

子任务一：用柱状图展示消费额最高的省份
编写Vue工程代码，根据接口，用柱状图展示2020年消费额最高的5个省份，同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴至客户端桌面【Release\任务E提交结果.docx】中对应的任务序号下。

<template>
  <div id="echarts1">

  </div>
</template>

<script>


import * as echarts from '@/assets/echarts.min';
import axios from 'axios'

export default {
  name: 'MyEcharts1',
  data() {
    return {
      myEcharts: {}
    }
  },
  mounted() {
    axios({
      url: "/api/dataVisualization/selectOrderInfo",
      method: 'post',
      data:{
        "startTime":"2020-01-01 00:00:00",
        "endTime":"2020-12-31 23:59:59"
      }
    }).then(({data}) => {

      let a = data.data.reduce((acc,r) => {
        let flag = acc.find(item => item.provinceName === r.provinceName )
        if (!flag){
          acc.push({ provinceName: r.provinceName, value: r.finalTotalAmount})
        }else{
          flag.value += r.finalTotalAmount
        }
        return acc;
      }, []).sort((a,b) => b.value - a.value).slice(0,5)

      console.log(a)

      this.myEcharts = echarts.init(document.getElementById('echarts1'), 'dark', {
        height: 800,
        width: 1400
      })
      this.myEcharts.setOption({
        title: {
          text: '2020年消费额最高的5个省份'
        },
        legend: {},
        xAxis: {
          type: 'category',
          data: a.map(r => r.provinceName)
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: a.map(r => ({
              value:[
                r.provinceName,
                r.value
              ]
            })),
            type: 'bar'
          }

        ]
      });
    })

  }

}
</script>

<style scoped>

</style>

子任务二：用柱状图展示消费额最低的省份
编写Vue工程代码，根据接口，用柱状图展示2020年消费额最低的5个省份，同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴至客户端桌面【Release\任务E提交结果.docx】中对应的任务序号下。

<t