<template>
  <div style="width: 100%;height: 100%;">
    <div style="width: 100%;height: 100%;" ref="myEcharts"></div>
  </div>
</template>

<script>
import { selectZdryList } from '@/api/statis.js'
export default {
  components: {},
  data () {
    return {}
  },
  computed: {},
  watch: {},
  mounted () {
    this.init()
  },
  methods: {
    init () {
      selectZdryList().then(res => {
        if (res.data.errcode === 0) {
          let xData = []
          let yData = []
          let color = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
          res.data.data.forEach((item, index) => {
            xData.push(item.name)
            yData.push({
              value: item.num,
              itemStyle: {
                color: color[index]
              }
            })
          })
          this.myChart = this.$echarts.init(this.$refs.myEcharts)
          this.myChart.setOption({
            title: {
              show: false
            },
            grid: {
              top: 10,
              bottom: 60,
              left: 30,
              right: 34
            },
            tooltip: {},
            xAxis: {
              data: xData,
              hideOverlap: false,
              axisLabel: {
                rotate: -45,
                interval: 0
              }
            },
            yAxis: {},
            series: [
              {
                type: 'bar',
                barWidth: 20,
                label: {
                  show: true

                },
                data: yData
              }
            ]
          })
        } else {
          this.$toast(res.data.errmsg)
        }
      })
    }
  }
}
</script>

<style>
</style>
