<template>
  <div style="display: flex; justify-content: center; width: 100%">
    <div ref="fireReason" style="width: 243px; height: 287px" v-show="list.length > 0"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      chart: null,
      data: [],
      type: ['灭火消防车', '举高消防车', '专勤消防车', '战勤保障消防车'],
    }
  },
  props: {
    list: Array,
  },
  watch: {
    list: {
      handler(val) {
        if (val.length > 0) {
          this.$nextTick(() => {
            // 获取dom容器
            const chartDom = this.$refs.fireReason
            //   // 初始化图表实例
            this.chart = echarts.init(chartDom)
            this.initChart(val)
          })
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    initChart(data) {
      const option = {
        // title: [
        //   {
        //     text: 0,
        //     top: "40%",
        //     textAlign: "center",
        //     left: "49%",
        //     textStyle: {
        //       color: "#fff",
        //       fontSize: 12,
        //     },
        //   },
        //   {
        //     text: "消防车统计",
        //     top: "49%",
        //     textAlign: "center",
        //     left: "49%",
        //     textStyle: {
        //       color: "#fff",
        //       fontSize: 10,
        //     },
        //   },
        // ],
        // tooltip: {
        //   trigger: "item",
        //   show: true,
        //   confine: true,
        //   extraCssText: "z-index: 1000;",
        //   backgroundColor: "#02809a",
        //   borderColor: "rgba(0,213,255, .6)",
        //   textStyle: {
        //     color: "#fff",
        //   },
        //   formatter: "{b} <br/>{c} {d}%",
        // },
        // series: [
        //   // 最外层圆
        //   {
        //     type: "pie",
        //     radius: ["40%", "80%"],
        //     center: ["50%", "50%"],
        //     hoverAnimation: false,
        //     data:[data[0],data[1],data[2],data[3]],
        //     label: {
        //       show: false,
        //     }
        //   }
        // ],
        // backgroundColor: '#fff',
        // '#e7bcf3', '#8378ea'
        color: ['#37a2da', '#32c5e9', '#9fe6b8', '#ffdb5c', '#8378ea', '#fb7293'],
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            return `${params.data.title}<br/>${params.data.percent}`
          },
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data: this.type,
        },
        series: [
          {
            name: '车辆统计',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center',
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold',
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: data.filter((item) => {
              return this.type.includes(item.title)
            }),
          },
        ],
      }

      this.chart.setOption(option)
      //自适应图表
      window.onresize = this.chart.resize
    },
  },
}
</script>

<style scoped lang="less"></style>
