<template>
  <div>
    <charts id="bizchart" height="200px" width="930px" :option="option" />
  </div>
</template>

<script lang="js">
import charts from '../../../components/echarts/index.vue'

export default {
  components: {charts},
  data() {
    return {
      option: {
        xAxis: {
          type: 'category',
          data: ['昆明', '临沧', '11', '22', '33', '44', '55', '66', '77', '88', '99', '10', '11', '12', '13', '14'],
          axisLine: {
            lineStyle: {
              color: "#a4a2a2",
            }
          },
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: "#a4a2a2",
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(128,126,126,0.25)'
            },
          },
        },
        series: [
          {
            data: [1202, 2020, 1350, 380, 470, 1140, 1430, 33, 666, 44, 56, 2337, 34, 555, 23, 34],
            type: 'bar',
            showBackground: true,
            label: {
              show: true,
              position: 'top',
            },
            backgroundStyle: {
              color: 'rgba(236,234,234,0.13)'
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  return '#00A3E0'
                }
              }
            },
          }
        ]
      },
      type: 1
    }
  },
  created() {
    this.getUserCountByCity()
  },
  methods: {
    getUserCountByCity() {
      this.$api.biz.getUserCountByCity().then(res => {
        if (res.code === 200) {
          this.option.xAxis.data = []
          this.option.series[0].data = []
          res.data.map(item=>{
            this.option.xAxis.data.push(item.name.replace("市","").replace("州",""))
            this.option.series[0].data.push(item.number)
          })
        }
      })
    }
  }
}
</script>
