<template>
  <!-- 督办反馈 -->
  <div class="SupervisionFeedback">
    <div class="listbx">
      <!-- <span :class="listIndex == 0 ? 'listadd' : ''" @click="listIndex = 0">
        查看图表
      </span>
      <span :class="listIndex == 1 ? 'listadd' : ''" @click="listIndex = 1">
        查看数据
      </span> -->
    </div>
    <div id="dom" style="height: 400px"></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  export default {
    name: 'SupervisionFeedback',
    data() {
      return {
        listIndex: 0,
      }
    },
    mounted() {
      this.getEcharts()
    },

    methods: {
      getEcharts() {
        var chartDom = document.getElementById('dom')
        var myChart = echarts.init(chartDom)
        var option
        option = {
          color: ['#0080fe', '#5023e6'],
          dataset: {
            source: [
              ['type', '周一', '周二', '周三', '周四', '周五', '周六', '周日'],
              ['Forest', 40, 50, 80, 30, 20, 30, 20],
              ['Steppe', 20, 30, 40, 60, 70, 30, 20],
            ],
          },
          legend: {
            right: '0%',
            icon: 'circle',
          },
          xAxis: {
            type: 'category',
            axisTick: {
              show: true,
            },

            splitLine: {
              show: false,
            },
          },
          yAxis: {
            splitLine: {
              show: false,
            },
            max: 100,
            nameLocation: 'middle',
          },
          series: [
            {
              name: '计划完成数',
              type: 'bar',
              seriesLayoutBy: 'row',
            },
            {
              name: '实际完成数',
              type: 'bar',
              seriesLayoutBy: 'row',
            },
          ],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            }, //鼠标移上的阴影，默认是线
            formatter: function (params) {
              return `${params[0].data[0]}<br/> ${params[0].marker} ${params[0].seriesName}: ${params[0].data[1]}个 <br/>  ${params[1].marker} ${params[1].seriesName}: ${params[0].data[2]}个`
            },
          },
        }
        option && myChart.setOption(option)
        window.addEventListener('resize', function () {
          myChart.resize()
        })
        // window.onresize = function () {
        //   // myChart.resize()
        // }
      },
    },
  }
</script>
<style lang="scss" scoped>
  .SupervisionFeedback {
    position: relative;
    .listbx {
      position: absolute;
      top: 15px;
      left: 15px;
      z-index: 10000;
      background-color: rgb(222, 221, 221);
    }
    .listadd {
      background-color: #9999;
      padding: 6px 8px;
    }
  }
</style>
