柱状图的基本实现

<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 dq = [...new Set(ret.data.data.map(x=>x.region))]

        var sr = []

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

          sr[index]=ret.data.data.filter(x=>x.region==item).filter(x=>x.month<=3).map(x=>x.totalConsumption).reduce((x,y)=>x+y)

        })

        var list=[]

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

          list.push({name:dq[i],value:sr[i]})

        }

        console.log(list)

        var l1 = []

        var l2 = []

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

          l1.push(list[i].name)

          l2.push(list[i].value)

        }

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

      myecharts.setOption({

        xAxis:{

          type:'category',

          data:l1

        },

        yAxis:{

          type:'value'

        },

        series:[

          {

            type:'bar',

            data:l2

          }

        ]

      })

      }

    }

}

</script>

<style>

</style>