散点图的基本实现

<template>

  <div id="main1" style="width:600px;height: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"})

        const shuju = ret.data.data

        const m2 = ret.data.data.filter(x=>x.month == 2)

        // console.log(m2)

        const gj = [...new Set(ret.data.data.map(x=>x.nationName))]

        // console.log(gj)

        // console.log(m2)

        var list = []

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

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

        })

        // console.log(list)

        var end = []

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

          end.push({name:gj[i],value:list[i]})

        }

        console.log(end)

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

          return b.value - a.value

        })

        console.log(end)

        var v1 = []

        var v2 = []

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

          v1.push(end[i].name)

          v2.push(end[i].value)

        }

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

      myecharts.setOption({

        xAxis:{

          type:'category',

          data:v1

        },

        yAxis:{

          type:'value'

        },

        series:[

          {

            type:'scatter',

            data:v2

          }

        ]

      })

      }

    }

}

</script>

<style>

</style>