地图

<template>
  <div class="DT_box">
    <div class="item">
        <vab-chart
          ref="barg01"
          :autoresize="true"
          theme="vab-echarts-theme"
          :options="zgdt"
        />
    </div>
    <div class="item">
      <div id="box01" ref="barg02" style="width: 100%; height: 400px"></div>
    </div>
  </div>
</template>

<script>
import VabChart from '@/plugins/echarts'
import echarts from 'echarts'
export default {
  created() {
    this.orderAreaAnalysis()
  },
  data() {
    return {
      option01: {
        title: {
          text: '占比金额',
          subtext: '',
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          // data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
        },
        series: [
          {
            name: '金额',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' },
              { value: 135, name: '视频广告' },
              { value: 1548, name: '搜索引擎' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      },

      //中国地图
      zgdt: {
        title: {
          text: '地区分布占比',
          subtext: '',
        },
        tooltip: {
          trigger: 'item',
        },
        dataRange: {
          orient: 'horizontal',
          min: 0,
          max: 55000,
          text: ['高', '低'],
          splitNumber: 0,
        },
        series: [
          {
            name: '金额',
            type: 'map',
            roam: false,
            zoom: 1.25,
            mapType: 'china',
            mapLocation: {
              x: 'center',
            },
            selectedMode: 'multiple',
            itemStyle: {
              normal: {
                label: {
                  show: true,
                },
              },
              emphasis: {
                label: {
                  show: true,
                },
              },
            },
            data: [
              { name: '西藏', value: 0 },
            ],
          },
        ],
      },
      page_size: 5,
      page_index: 1,
      start_date: '',
      end_date: '',
      province: '',
      city: '',
    }
  },
  methods: {
    customized() {
      var myChart = echarts.init(document.getElementById('box01'))
      myChart.setOption(this.option01)
    },
    //地区分布
    orderAreaAnalysis() {
      this.$axios
        .post('/brandapi/Statistics/orderAreaAnalysis', {
          page_size: this.page_size,
          page_index: this.page_index,
          start_date: this.start_date,
          end_date: this.end_date,
          province: this.province,
          city: this.city,
        })
        .then(({ data }) => {
          if (data.code == 1) {
            console.log(data, '订单汇总分析(地区分布)-1')
            let zgdtData = []
            let zgdtMax = 1
            data.data.data.forEach(item => {
              if(zgdtMax < parseFloat(item.purchase_money)){
                zgdtMax = parseFloat(item.purchase_money)
              }
              item.area = item.area.replace('省','')
              item.area = item.area.replace('市','')
              item.area = item.area.replace('自治区','')
              let zgdtObj = {
                name:item.area,
                value:parseFloat(item.purchase_money)
              }
              zgdtData.push(zgdtObj)
            })
            this.zgdt.series[0].data = zgdtData
            this.zgdt.dataRange.max = zgdtMax * 0.8
            console.log(this.zgdt.series[0].data,'zgdt')
            this.option01.series[0].data = zgdtData
            this.customized()
          }
        })
    },
  },
  mounted() {
    let _this = this
    _this.customized()
    _this.$nextTick(() => {
      let bargraph = echarts.init(_this.$refs.barg01)
      bargraph.setOption(_this.option01)
      window.addEventListener('resize', bargraph.resize)
    })
  },
  components: {
    VabChart,
  },
}
</script>

<style scoped>
.DT_box {
  display: flex;
  background-color: #fff;
  padding: 20px;
  margin-bottom: 20px;
}
.item {
  flex: 1;
}
</style>