<template>
  <div class="app-container" style="background:black;margin:0 padding:0">
    <div class="main-container-box">
      <div class="nav-header">安防综合管理平台</div>
      <div class="panel-box">
        <div class="panel sbgk">
          <div class="panel-tit">设备工况</div>
          <div class="pie-box">
            <div class="pie-item">饼状图1</div>

            <div class="pie-item">饼状图2</div>
          </div>

          <div class="num-analysis">
            <div>
              <ul>
                <li>
                  <p class="num-tit">设备总数</p>
                  <p class="num-no">260</p>
                </li>
                <li>
                  <p class="num-tit">异常数量</p>
                  <p class="num-no" style="color: #f84803">260</p>
                </li>
              </ul>
            </div>
            <div>
              <ul>
                <li>
                  <p class="num-tit">设备总数</p>
                  <p class="num-no" style="color: #00acff">260</p>
                </li>
                <li>
                  <p class="num-tit">异常数量</p>
                  <p class="num-no" style="color: #fec400">260</p>
                </li>
              </ul>
            </div>
          </div>

          <div class="panel-footer"></div>
        </div>
        <!-- <div class="panel monitor"></div> -->
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {};
  },
  mounted() {
  this.initCharts();
},
methods: {
  initCharts() {
    this.chart = echarts.init(this.$el);
    this.setOptions();
  },
  setOptions() {
    this.chart.setOption({
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    })
  }
},

watch: {
  options: {
    handler(options) {
      this.chart.setOption(this.options)
    },
    deep: true
  },
}
};
</script>
<style scoped>
.app-container {
  margin: 0;
  padding: 0;
  height: 100vh;
}
</style>