<template>
    <div id="bar-chart">
      <div class="rose-chart-title" :style="'font-size:'+$fontSize(0.25)+'px'">ECharts 全局字体自适应</div>
      <!-- <dv-charts :option="option" /> -->
      <div id="bar-chart-container" ></div>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  export default {
    name: 'barChart',
    data () {
      return {
        option: {}
      }
    },
    methods: {
      
      createData () {
        var myChart = echarts.init(document.getElementById('bar-chart-container'));
        this.option = {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [120, 200, 150, 80, 70, 110, 130],
              type: 'bar'
            }
          ],
          color: ['#da2f00', '#fa3600', '#ff4411', '#ff724c', '#541200', '#801b00', '#a02200', '#5d1400', '#b72700']
        }
        myChart.setOption(this.option);
      },
    },
    mounted () {
      const { createData } = this
  
      createData()
  
      setInterval(createData, 30000)
    }
  }
  </script>
  
  <style lang="less">
  #bar-chart {
    width: 100%;
    height: 50%;
    background-color: rgba(6, 30, 93, 0.5);
    border-top: 2px solid rgba(1, 153, 209, .5);
    box-sizing: border-box;
  
    .rose-chart-title {
      height: 50px;
      padding-top: 10px;
      font-weight: bold;
      text-indent: 20px;
      // font-size: 20px;
      justify-content: center;
      display: flex;
      align-items: center;
    }
  
    #bar-chart-container {
      height: calc(~"100% - 50px");
    }
  }
  </style>
  