TS写Echarts，自适应图表大小

 

<template>
  <div class="tableCss">
    <div class="title">
      <div class="title_top">
        <div class="title_content">提货单总数:50个</div>
        <div class="title_content">提货单总量:102T</div>
      </div>
      <div class="title_bottom">
        <div class="title_content">已提货单数:30个</div>
        <div class="title_content">已提货量:50T</div>
        <div class="title_content">进场车次:30车次</div>
      </div>
    </div>
    <div class="content">
      <div style="width: 100%; height: 100%" ref="chartArea"></div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Emit, Watch } from 'vue-property-decorator'
import PageBase from '@src/views/PageBase'
import { Route } from 'vue-router'
import {} from '../../../../deliverPetroleum_apis/index_api'
import moment from 'moment'
import * as echarts from 'echarts'
@Component({
  components: {},
  name: 'sendOutGoodsMonitoring'
})
export default class Index extends PageBase {
  mounted() {
    this.drawEcharts()
  }
  activated() {}
  deactivated() {}
  // 构建echarts
  private myChart: any = null

  private drawEcharts() {
    // 如果没有charts
    // if (!this.myChart) {
    this.myChart = echarts.init(this.$refs.chartArea as any)
    // }

    this.myChart.setOption({
      // legend: {},
      tooltip: {},
      dataset: {
        dimensions: ['product', 'save', 'out'],
        source: [
          {
            product: '95#',
            save: 44,
            out: 24
          },
          { product: '92#', save: 80, out: 60 },
          { product: '98#', save: 90, out: 70 },
          { product: '0#', save: 60, out: 50 },
          { product: '甲烷', save: 70, out: 40 }
        ]
      },
      xAxis: { type: 'category' },

      yAxis: [
        {
          type: 'value',
          name: '各油品提货量(T)',
          nameTextStyle: {
            fontWeight: 'bold',
            fontSize: 18, // 设置字体大小为18
            align: 'center',
            color: '#000'
          }
        }
      ],

      series: [{ type: 'bar' }, { type: 'bar' }]
    })
    window.addEventListener('resize', this.myChart.resize)
  }
}
</script>

<style lang="less" scoped>
.tableCss {
  font-size: 14px;
  background-color: #fff;
  height: 100%;
  width: 100%;
  .title {
    width: 100%;
    height: 25%;
    font-size: 16px;
    .title_top {
      display: flex;
      flex-wrap: nowrap;
      height: 50%;
      align-items: center;
    }
    .title_bottom {
      display: flex;
      flex-wrap: nowrap;
      height: 50%;
      align-items: center;
    }
  }
  .content {
    width: 100%;
    height: 73%;
  }
  .title_content {
    margin-left: 5%;
  }
}
</style>