双图表实现

<template>

  <div id="main4" style="height:600px;width:600px"></div>

</template>

<script>

import axios from 'axios'

import echarts from '../public/static/lib/echarts.min.js'

export default {

    data(){

      return{}

    },

    mounted(){

      this.getData()

    },

    methods:{

      async getData(){

        const ret = await axios.post("/api/data",{"start":"202101","end":"202106"})

        // 获取ret数据

        const shuju = ret.data.data

        console.log(shuju)

        // 获取总数据

        const country = [...new Set(ret.data.data.map(x=>x.nationName))] // 获取国家

        console.log(country)

        const diqu = [...new Set(ret.data.data.map(x=>x.region))] // 获取地区

        const crykey = [...new Set(ret.data.data.map(x=>x.nationKey))] // 获取对应标签

        var list = []

        var list1 = []

        var list2 = []

        var list3 = []

        crykey.forEach((item,index,temp)=>{

          list[index] = shuju.filter(x=>x.nationKey==item).map(result=>result.totalConsumption).reduce((x,y)=>x+y)

        }) // 返回7国各自总金额

        console.log(list)

        diqu.forEach((item,index,temp)=>{

          list2[index] = shuju.filter(x=>x.region==item).map(result=>result.totalConsumption).reduce((x,y)=>x+y)

        }) // 返回三大洲各自总金额

        // console.log(list2)

        crykey.forEach((item,index,temp)=>{

          list1[index] = shuju.filter(x=>x.nationKey==item).map(result=>result.peopleName)

        }) // 返回7国人名 方便后续统计人数

        // console.log(list1)

        var pingjun = []

        for(var i=0;i < country.length;i++){

          pingjun.push(list[i] / list1[i].length)

        } // 计算平均数 用7国总金额除去人名的length值得

        console.log(pingjun)

        var end = []

        for(var i = 0;i<country.length;i++){

          end.push({name:country[i],value:pingjun[i]})

        } // 将得到的数据变成字典

        console.log(end)

        end.sort((a,b)=>{

          return b.value - a.value

        }) // 对字典进行排序

        var listendname = []

        var listendvalue = []

        for(var i=0;i<5;i++){

          listendname.push(end[i].name) // 将字典中的name放到listendname

          listendvalue.push(end[i].value) // 将字典中的value放到listendvalue

        }

      const myecharts = echarts.init(document.getElementById("main4"))

      myecharts.setOption({

        xAxis:{

          type:'category',

          data:listendname

        },

        yAxis:{

          type:'value',

        },

        series:[

          {

            type:'line',

            data:listendvalue

          },

          {

            type:'bar',

            data:listendvalue

          }

        ]

      })

      }

    }

}

</script>

<style>

</style>