<template>
  <div id="barChart"></div>
</template>

<script>
export default {
  data () {
    return {
    };
  },
  mounted () {
    this.drawProvinceMap();
  },
  methods: {
    drawProvinceMap () {
      var chartDom = document.getElementById('barChart');
      var myChart = this.$echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['网络断开', '网络正常']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'value'
          }
        ],
        yAxis: [
          {
            type: 'category',
            axisTick: {
              show: false
            },
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          }
        ],
        series: [
          {
            name: '网络正常',
            type: 'bar',
            itemStyle: {
              color: '#67C23A'
            },
            label: {
              show: true,
              position: 'inside'
            },
            emphasis: {
              focus: 'series'
            },
            data: [200, 170, 240, 244, 200, 220, 210]
          },

          {
            name: '网络断开',
            type: 'bar',
            itemStyle: {
              color: '#F56C6C'
            },
            label: {
              show: true,
              position: 'inside'
            },
            emphasis: {
              focus: 'series'
            },
            data: [-120, -132, -101, -134, -190, -230, -210]
          }
        ],

      }
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    }
  }
}
</script>
<style scoped lang="scss">
#barChart {
  width: 100%;
  height: 500px;
}
</style>