template

<template>
  <div class="ring_box">
    <div class="title_chart">各地区订单数</div>
    <ve-map 
      :data="chartData" 
      :settings="chartSettings"  
      :visual-map="visualMap"
      height='45rem' 
    ></ve-map>
  </div>
</template>

script

export default {
    props:['AreaData'],
    data () {
      this.chartSettings = {
        metrics: ['订单数量'],
        roam:true,
        itemStyle: {
          normal: {
            borderColor: '#eb5a6d',
          }
        },
      }
      this.visualMap = [
        {
          type: 'piecewise',
          pieces: [
            {min: 2000000,label: '200W 以上'},
            {min: 1000000, max: 2000000,label: '100W ~ 200W'},
            {min: 500000, max: 1000000,label: '50W ~ 100W'},
            {min: 100000, max: 500000,label: '10W ~ 50W'},
            {min: 30000, max: 100000,label: '3W ~ 10W'},
            {max: 30000,label: '3W 以下'}    
          ],
          right: 0,
          top: '40%'
        }
      ]
      return {
        chartData: {
          columns: ['地区', '订单数量'],
          rows: []
        },
      }
    },
    methods:{
      
    },
    watch:{
      AreaData(val){
        let arr = []
        let numArr =[]
        if(val.length > 0){
          for(let i in val){
            numArr.push(val[i].num)
            let obj ={}
            obj['地区'] = val[i].name 
            obj['订单数量'] = val[i].num
            obj['地区'] = obj['地区'] == '四川省'? '四川':obj['地区']   //后台返回的四川省，改成四川。
            arr.push(obj)
          }
        }
        let maxNum = Math.max(...numArr)
        console.log(numArr,'0000')
        console.log(maxNum,'0000')
        // this.visualMap[0].max = maxNum
        this.chartData.rows=arr
      }
    }
  }