<template>
  <div>
    <div>
      <div class="fuel"></div>
      <div class="list">
        <!-- <div style="text-align: right; color: #8abfdc; font-size: 14px; margin: 10px 20px 10px 0">
            <span>年份</span>
            <span style="margin: 0 15px">月份</span>
            <span>每周</span>
          </div> -->
        <!-- 表格 -->
        <div>
          <!-- <fuelEchart/> -->
          <div ref="chart" class="item" style="height: 357px" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      chart: null,
      timer: '',
      dataList: [],
      data1: [10, 15, 10, 13, 15, 11],
      data2: [19, 35, 40, 33, 15, 51],
      data3: [21, 55, 10, 13, 35, 11],
      data4: [21, 55, 10, 13, 35, 11],
      data5: [21, 55, 10, 13, 35, 11],
    }
  },
  // props: {
  //   list: {
  //     type: Array,
  //     default: [],
  //   },
  // },
  // watch: {
  //   list: {
  //     handler(val) {
  //       this.$nextTick(() => {
  //         const chartDom = this.$refs.chart;
  //         // 初始化图表实例
  //         this.chart = echarts.init(chartDom);
  //         this.initChart(val);
  //       });
  //     },
  //     immediate: true,
  //     deep: true,
  //   },
  // },

  methods: {
    initChart() {
      var colorList = ['#afa3f5', '#00d488', '#3feed4', '#3bafff', '#f1bb4c', ]
      const option = {
        // title: {
        //   // subtext: "报警占比",
        //   x: 'center',
        //   y: '37%',
        //   textStyle: {
        //     fontSize: 18,
        //     fontWeight: 'normal',
        //     color: ['#333'],
        //   },
        //   subtextStyle: {
        //     color: '#f1bb4c',
        //     fontSize: 16,
        //   },
        // },

        grid: {
          left: '1%',
          top: '14%',
          right: '5%',
        //   bottom: '15%',
        },
        legend: {
          orient: 'horizontal',
          show: true,
          itemWidth: 18, // 设置图例宽度
          itemHeight: 18, // 设置图例高度
          itemGap: 25, // 设置图例间距
          left: 50,
          bottom: 0,
          //   orient: 'vertical',
          // top: "middle",
          right: '0%',
          textStyle: {
            color: '#f2f2f2',
            fontSize: 14,
          },
        //   icon: 'circle',
        },
        series: [
          // 主要展示层的
          {
            radius: ['19%', '42%'],
            center: ['50%', '35%'],
            type: 'pie',
            itemStyle: {
              normal: {
                color: function (params) {
                  return colorList[params.dataIndex]
                },
              },
            },
            labelLine: {
              normal: {
                show: true,
                length: 35,
               
                // length2: 20,
                lineStyle: {
                  color: '#fff',
                  textBorderColor:'none',
                  
                },
                align: 'left',
              },
            //   color: '#000',
            //   emphasis: {
            //     show: true,
            //   },
            },
            label: {
              normal: {
                formatter: function (params) {
                  var str = ''
                  switch (params.name) {
                    case '灭火消防车':
                      str = '灭火消防车' + params.value + '%'
                      break
                    case '教援消防车':
                      str = '教援消防车' + params.value + '%'
                      break
                    case '举高消防车':
                      str = '举高消防车' + params.value + '%'
                      break
                    case '专勤消防车':
                      str = '专勤消防车' + params.value + '%'
                      break
                  }
                  return str
                },
                padding: [0, -20],
                height: 35,
                rich: {
                  //   a: {
                  //     width: 28,
                  //     height: 48,
                  //     lineHeight: 50,

                  //     align: 'center',
                  //   },
                  //   b: {
                  //     width: 59,
                  //     height: 45,
                  //     lineHeight: 50,
                  //     align: 'center',
                  //   },
                  //   c: {
                  //     width: 34,
                  //     height: 33,
                  //     lineHeight: 50,

                  //     align: 'left',
                  //   },
                  //   d: {
                  //     width: 34,
                  //     height: 44,
                  //     lineHeight: 50,
                  //     align: 'left',
                  //   },
                  //   e: {
                  //     width: 38,
                  //     height: 30,
                  //     lineHeight: 50,
                  //     align: 'left',
                  //   },
                  nameStyle: {
                    fontSize: 16,
                    color: '#00A3FF',
                    align: 'left',
                  },
                  rate: {
                    fontSize: 20,
                    color: '#1ab4b8',
                    align: 'left',
                  },
                },
              },
            },
            data: [
              {
                value: 17,
                name: '灭火消防车',
              },
              { value: 23, name: '教援消防车' },
              { value: 27, name: '举高消防车' },
              { value: 33, name: '专勤消防车' },
            ],
          },
          // 边框的设置
        //   {
        //     radius: ['24%', '29%'],
        //     center: ['50%', '50%'],
        //     type: 'pie',
        //     label: {
        //       normal: {
        //         show: false,
        //       },
        //       emphasis: {
        //         show: false,
        //       },
        //     },
        //     labelLine: {
        //       normal: {
        //         show: false,
        //       },
        //       emphasis: {
        //         show: false,
        //       },
        //     },
        //     animation: false,
        //     tooltip: {
        //       show: false,
        //     },
        //     itemStyle: {
        //       normal: {
        //         color: '#00A3FF',
        //         fontSize: 14,
        //       },
        //     },
        //     data: [
        //       {
        //         value: 1,
        //       },
        //     ],
        //   },
        ],
      }

      this.chart.setOption(option)
      //自适应图表
      window.onresize = this.chart.resize
    },
  },
  mounted() {
    const chartDom = this.$refs.chart
    console.log('------', chartDom)
    //   // 初始化图表实例
    this.chart = echarts.init(chartDom)
    this.initChart()
  },
}
</script>

<style lang="less" scoped>
.fuel {
  width: 443px;
  height: 50px;
  background: url('../../../assets/vehicle/cllx.png') no-repeat;
  margin-top: 15px;
}
.list {
  width: 443px;
  height: 387px;
  border: 1px solid #00aaff;
  margin-top: 10px;
  .header {
    color: #61dbff !important;
    height: 38px !important;
    background-color: rgba(66, 92, 108, 0.3) !important;
    margin-top: 2px;
    letter-spacing: 1px;
    line-height: 38px;
    display: flex;
    justify-content: space-around;
    padding: 0 !important;
    .is_notice {
      line-height: 19px;
      font-size: 10px;
    }
  }
}
</style>
