全国职业院校技能大赛-大数据应用赛项-数据可视化-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】中对应的任务序号下。

<template>
  <div id="echarts2exam1">

  </div>
</template>

<script>


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

export default {
  name: 'MyEcharts2',
  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) => a.value - b.value).slice(0,5)

      console.log(a)

      this.myEcharts = echarts.init(document.getElementById('echarts2exam1'), '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工程代码，根据接口，用折线图展示每年上架商品数量的变化情况，同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴至客户端桌面【Release\任务E提交结果.docx】中对应的任务序号下。

<template>
  <div id="echarts3exam1">

  </div>
</template>

<script>


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

export default {
  name: 'MyEcharts2',
  data() {
    return {
      myEcharts: {}
    }
  },
  mounted() {
    axios({
      url: "/api/dataVisualization/selectGoodsInfo",
      method: 'post',

    }).then(({data}) => {

      let a = data.data.reduce((acc,curr) =>{
        let flag = acc.find(item => item.year === curr.year)
        if (!flag){
          acc.push({year: curr.year, value: 1})
        }else{
          flag.value += 1
        }
        return acc;
      },[]).sort((a,b) => a.year - b.year)


      console.log(a)

      this.myEcharts = echarts.init(document.getElementById('echarts3exam1'), 'dark', {
        height: 800,
        width: 1400
      })
      this.myEcharts.setOption({
        title: {
          text: '每年上架商品数量的变化情况'
        },
        legend: {},
        xAxis: {
          type: 'category',
          data: a.map(r => r.year)
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: a.map(r => ({
              value:[
                r.year,
                r.value
              ]
            })),
            type: 'line'
          }

        ]
      });
    })

  }

}
</script>

<style scoped>

</style>

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

<template>
  <div id="echarts4exam1">

  </div>
</template>

<script>


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

export default {
  name: 'MyEcharts2',
  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,count:1})
        }else{
          flag.value += r.finalTotalAmount
          flag.count += 1
        }
        return acc;
      }, []).map(r =>{
        r.avg = r.value/r.count
        return r
      } ).sort((a,b) => b.avg - a.avg).slice(0,5)


      console.log(a)

      this.myEcharts = echarts.init(document.getElementById('echarts4exam1'), 'dark', {
        height: 800,
        width: 1400
      })
      this.myEcharts.setOption({
        title: {
          text: '2020年平均消费额（四舍五入保留两位小数）最高的5个省份'
        },
        legend: {},
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: a.map(r => r.provinceName)
        },
        series: [
          {
            data: a.map(r => (r.avg).toFixed(2)),
            type: 'bar'
          }

        ]
      });
    })

  }

}
</script>

<style scoped>

</style>

子任务五：用折柱混合图展示省份平均消费额和地区平均消费额
编写Vue工程代码，根据接口，用折柱混合图展示2020年各省份平均消费额（四舍五入保留两位小数）和地区平均消费额（四舍五入保留两位小数）的对比情况，柱状图展示平均消费额最高的5个省份，折线图展示这5个省所在的地区的平均消费额变化，同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴至客户端桌面【Release\任务E提交结果.docx】中对应的任务序号下。

<template>
    <div id="echarts5exam1">

    </div>
</template>

<script>


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

    export default {
        name: 'MyEcharts2',
        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({ regionName:r.regionName,provinceName: r.provinceName, value: r.finalTotalAmount,count:1})
                    }else{
                        flag.value += r.finalTotalAmount
                        flag.count += 1
                    }
                    return acc;
                }, []).map(r =>{
                    r.avg = (r.value/r.count).toFixed(2)
                    return r
                } ).sort((a,b) => b.avg - a.avg).slice(0,5)

                let b = data.data.reduce((acc,r) => {
                    let flag = acc.find(item => item.regionName === r.regionName)
                    if (!flag){
                        acc.push({ regionName:r.regionName, value: r.finalTotalAmount,count:1})
                    }else{
                        flag.value += r.finalTotalAmount
                        flag.count += 1
                    }
                    return acc;
                }, []).map(r =>{
                    r.avg = (r.value/r.count).toFixed(2)
                    return r
                } )

                a.forEach(r =>{
                    let flag = b.find(item => item.regionName === r.regionName)
                    if (flag){
                        r.regionAvg = flag.avg
                    }
                })

                console.log(a)

                this.myEcharts = echarts.init(document.getElementById('echarts5exam1'), 'dark', {
                    height: 800,
                    width: 1400
                })
                this.myEcharts.setOption({
                    title: {
                        text: '2020年各省份平均消费额（四舍五入保留两位小数）和地区平均消费额（四舍五入保留两位小数）的对比情况'
                    },
                    legend: {},
                    xAxis: [{
                        type: 'category',
                        data: a.map(r => r.provinceName)

                    },{
                        type: 'category',
                        data: a.map(r => r.regionName)
                    }],
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: a.map(r => (r.avg)),
                            type: 'bar'
                        },
                        {
                            data: a.map(r => (r.regionAvg)),
                            type: 'line'
                        }

                    ]
                });
            })

        }

    }
</script>

<style scoped>

</style>