<template>
  <div class="chart-box">
    <h3>城市分布</h3>
    <v-chart class="chart" :options="options" />
  </div>
</template>

<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/tooltip'

import { createNamespacedHelpers } from "vuex"
const { mapActions } = createNamespacedHelpers("indexEcharts")

export default {
  name: 'UserCity',
  components: {
    'v-chart': ECharts,
  },
  props: [
    'value',
  ],
  data() {
    return {
      defaultOpt: {
        legend: {},
        color: ['#8954BA', '#175DFB', '#0BB963', '#27DEFF', '#E713D2', '#E71313'],
        tooltip: {},
        series: {
          type: 'pie',
          name: '城市分布',
        }
      },
      currentData: this.value || [] // 数据
    }
  },
  computed: {
    options() {
      return {
        ...this.defaultOpt,
        series: {
          ...this.defaultOpt.series,
          data: this.currentData || [],
        },
      }
    }
  },
  methods: {
    ...mapActions(['getUserCity']),
    getData() {
      this.getUserCity().then((res) => {
        console.log('getUserCity: ', res)
        this.currentData = res.map((item, index) => {
          const obj = { name: item.city, value: item.cityCount }
          return obj
        })

        console.log('getUserCity 转换后：', this.currentData)
      })
    }
  },
  mounted() {
    this.getData()
  }
}
</script>

<style lang="scss" src="./style.scss"></style>
