<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: 430px" />
        </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 spNum = 5,
        _max = 100
      var legendData = ['灭火消防车', '举高消防车', '后援消防车', '专勤消防车', '机场消防车']
      var y_data = ['两江支队', '鸳鸯支队', '大竹林站', '礼嘉站', '翠云站', '龙头寺站']
      var _datamax = [100, 100, 100, 100, 100, 100]
      var fomatter_fn = function (v) {
        return ((v.value / _max) * 100).toFixed(0)
      }
      var _label = {
        normal: {
          show: true,
          position: 'inside',
          formatter: fomatter_fn,
          textStyle: {
            color: '#fff',
            fontSize: 16,
          },
        },
      }
      const option = {
        //   backgroundColor: "#091034",
        legend: {
          data: legendData,
          textStyle: {
            color: '#ccc',
          },
        },
        grid: {
          containLabel: true,
          left: 20,
          right: 15,
          bottom: 30,
          top: 110,
        },
        // grid: {
        //   //   top: '15%',
        //   right: '15%',
        //   bottom: '10%',
        // },
        legend: {
          //图例说明，解释(图例设置)
          //   icon: 'none', //  控制图形样式
          itemWidth: 18, // 设置图例宽度
          itemHeight: 18, // 设置图例高度
          itemGap: 25, // 设置图例间距
          x: 10,
          y: 30,
          textStyle: {
            color: '#fff',
          },
        },
        tooltip: {
          show: true,
          backgroundColor: '#fff',
          borderColor: '#ddd',
          borderWidth: 1,
          textStyle: {
            color: '#3c3c3c',
            fontSize: 16,
          },
          formatter: function (p) {
            var _arr = p.seriesName.split('/'),
              idx = p.seriesIndex //1，2，3
            return (
              '名称：' +
              p.seriesName +
              '<br>' +
              '完成：' +
              p.value +
              '<br>' +
              '占比：' +
              ((p.value / _max) * 100).toFixed(0) +
              '%'
            )
          },
          extraCssText: 'box-shadow: 0 0 5px rgba(0, 0, 0, 0.1)',
        },
        xAxis: {
          splitNumber: spNum,
          interval: _max / spNum,
          max: _max,
          axisLabel: {
            show: false,
            formatter: function (v) {
              var _v = ((v / _max) * 100).toFixed(0)
              return _v == 0 ? _v : _v + '%'
            },
          },
        //   axisLine: {
        //     show: true,
        //     lineStyle: {
        //       color: '#0177d4',
        //     },
        //   },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: [
          {
            data: y_data,
            axisLabel: {
              fontSize: 14,
              color: '#fff',
            },
            axisLine: {
              show: false,
              lineStyle: {
              color: '#0177d4',
            },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
          {
            show: false,
            data: y_data,
            axisLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            type: 'bar',
            name: '灭火消防车',
            stack: '2',
            label: _label,
            legendHoverLink: false,
            barWidth: 25,
            itemStyle: {
              normal: {
                color: '#33FAE2',
              },
            //   emphasis: {
            //     color: '#33FAE2',
            //   },
            },
            data: this.data1,
          },
          {
            type: 'bar',
            name: '举高消防车',
            stack: '2',
            legendHoverLink: false,
            barWidth: 25,
            label: _label,
            itemStyle: {
              normal: {
                color: '#33FA8F',
              },
            //   emphasis: {
            //     color: '#33FA8F',
            //   },
            },
            data: this.data2,
          },
          {
            type: 'bar',
            stack: '2',
            name: '后援消防车',
            legendHoverLink: false,
            barWidth: 25,
            label: _label,
            itemStyle: {
              normal: {
                color: '#FAE633',
              },
            //   emphasis: {
            //     color: '#FAE633',
            //   },
            },
            data: this.data3,
          },
          {
            type: 'bar',
            stack: '2',
            name: '专勤消防车',
            legendHoverLink: false,
            barWidth: 25,
            label: _label,
            itemStyle: {
              normal: {
                color: '#FA9333',
              },
            //   emphasis: {
            //     color: '#FA9333',
            //   },
            },
            data: this.data4,
          },
          {
            type: 'bar',
            stack: '2',
            name: '机场消防车',
            legendHoverLink: false,
            barWidth: 25,
            label: _label,
            itemStyle: {
              normal: {
                color: '#00A3FF',
              },
            //   emphasis: {
            //     color: '#00A3FF',
            //   },
            },
            data: this.data5,
          },
        ],
      }

      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/clfb.png') no-repeat;
  //   margin-top: 15px;
}
.list {
  width: 443px;
  height: 437px;
  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>
