td_official/src/views/largeScreen/components/rightPage.vue

<template>
  <div class="rightPage">
    <div class="funds">
      <TitleComponent :title="'资金KPI'" />
      <div class="funds_echarts">
        <EchartBox :option="lineOption" />
      </div>
    </div>
    <div class="cashFlow">
      <TitleComponent :title="'现金流概述'" />
    </div>
  </div>
</template>

<script setup lang="ts">
import TitleComponent from './TitleComponent.vue';
import EchartBox from '@/components/EchartBox/index.vue';
import { getLineOption, getBarOptions } from './optionList';

const lineOption = ref();
const getCapitalData = (data?: any) => {
  // const xData = data.map((item) => item.time);
  // const yData = data.map((item) => item.content);
  const lineData = {
    xLabel: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    line1: [
      [100, 200, 150, 300, 250, 350, 400, 350, 450, 500, 400, 550],
      [220, 250, 230, 280, 270, 300, 350, 320, 380, 400, 450, 500],
      [300, 350, 320, 380, 400, 450, 500, 480, 520, 550, 600, 650]
    ]

    // line2: ['20', '50', '12', '65', '30', '60']
  };
  lineOption.value = getLineOption(lineData);
};
onMounted(() => {
  getCapitalData();
});

//资金KPI
</script>

<style scoped lang="scss">
.rightPage {
  width: 100%;
  height: 100%;
  background: #0c1e35;
  box-sizing: border-box;
  // padding: 5px;
}
.funds {
  width: 100%;
  // height: 40%;
  border: 1px solid rgba(29, 214, 255, 0.3);
  box-sizing: border-box;
  padding: 10px 5px;
}
.funds_echarts {
  width: 100%;
  height: 35vh;
  padding: 10px 0 0 0;
}
.cashFlow {
  width: 100%;
  // height: 50%;
  border: 1px solid rgba(29, 214, 255, 0.3);
  box-sizing: border-box;
  padding: 10px 5px;
  margin-top: 20px;
}
</style>