cyber-narrator-cn-ui/src/components/charts/EchartsFrame.vue

<template>
  <div class="cn-chart cn-chart__echarts" :class="{'cn-chart__echarts--statistics': isEchartsWithStatistics}">
    <div class="cn-chart__header" v-if="layout.indexOf(layoutConstant.HEADER) > -1">
      <div class="header__title">
        <slot name="title"></slot>
      </div>
      <div class="header__operations">
        <slot name="operations"></slot>
      </div>
    </div>
    <div class="cn-chart__body" :class="{'pie-with-table': isPieWithTable}" v-loading="loading">
      <slot></slot>
    </div>
    <div class="cn-chart__footer" v-if="layout.indexOf(layoutConstant.FOOTER) > -1" :class="{'pie-with-table': isPieWithTable}" v-loading="loading">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
import { layoutConstant, isEchartsWithTable, isEchartsWithStatistics } from '@/components/charts/chart-options'
export default {
  name: 'EchartsFrame',
  props: {
    layout: Array,
    chartInfo: Object,
    loading: Boolean
  },
  setup (props) {
    return {
      layoutConstant,
      isPieWithTable: isEchartsWithTable(props.chartInfo.type),
      isEchartsWithStatistics: isEchartsWithStatistics(props.chartInfo.type)
    }
  },
  mounted () {
  }
}
</script>

<style lang="scss" scoped>
.cn-panel .cn-chart__echarts {
  .cn-chart__body.pie-with-table {
    flex-basis: 40%;
  }
  .cn-chart__footer.pie-with-table {
    flex-basis: 60%;
    padding: 10px 30px 30px;
  }
}
</style>