gold-vue/src/components/workspace/CashManagement.vue

<template>

  <div class="cash-management">
    <div class="cash-title">
      <div class="text1"> 现金管理
        <span class="text1-update-time">最后更新时间：{{
          workDataUpdateTime && workDataUpdateTime !== '1970-01-01 08:00:00' ? workDataUpdateTime : '该地区暂无数据'
          }}</span>
      </div>
    </div>

    <div class="text2"><span class="text2-income">总营收：{{ cashData.totalIncome }}</span></div>


    <div class="chart-container">
      <!-- 左侧数据列表 -->
      <div class="market-data">
        <div v-for="market in cashData.markets" :key="market.name" class="market-item">
          <span class="market-name">{{ market.name }}:</span>
          <span class="market-value">{{ market.value.toLocaleString() }}</span>
        </div>
      </div>
      
      <!-- 图表区域 -->
      <div ref="chartRef" class="chart"></div>
    </div>

  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'

// 模拟数据
const cashData = ref({
  updateTime: '2025-09-24 12:00:00',
  totalIncome: 1200000,
  markets: [
    { name: '北京', value: 450000 },
    { name: '上海', value: 300000 },
    { name: '广州', value: 200000 },
    { name: '深圳', value: 150000 },
    { name: '其他', value: 100000 }
  ]
})

const chartRef = ref(null)
let chartInstance = null

const renderChart = () => {
  if (!chartInstance && chartRef.value) {
    chartInstance = echarts.init(chartRef.value)
  }
  const option = {
    tooltip: { trigger: 'item' },
    legend: { 
      bottom: 5, // 增加底部距离的
      left: 'center' }, 
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        data: cashData.value.markets,
        center: [ '60%', '45%'] //图表靠右一点
      }
    ]
  }
  chartInstance.setOption(option)
}

onMounted(() => {
  renderChart()
})
</script>

<style scoped>
/* 背景卡片大小 */
.cash-management {
  margin: 10px 5px;
  width: 100%;
  height: 55vh;
  flex-shrink: 0;
  border-radius: 8px;
  background: #E7F4FD;
  box-shadow: 0 2px 2px 0 #00000040;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 
.cash-card {
  width: 100%;
}

.chart {
  width: 100%;
  height: 200px;
} */


.cash-title {
  width: 100%;
  height: 5vh;
  flex-shrink: 0;
  border-radius: 8px;
  background: linear-gradient(90deg, #E4F0FC 0%, #C6ADFF 50%, #E4F0FC 100%);
  box-shadow: 0 2px 2px 0 #00152940;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text1 {
  color: #040a2d;
  font-family: "PingFang SC";
  font-size: 28px;
  font-style: normal;
  font-weight: 900;
  line-height: 31.79px;
}

.text1-update-time {
  width: 100%;
  height: 26px;
  flex-shrink: 0;
  color: #040a2d;
  font-family: "PingFang SC";
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 31.79px;
}

/* 总收入的渐变框 */
.text2 {
 margin: 13px;
  width: 95%;
height: 48px;
flex-shrink: 0;
border-radius: 8px;
background: linear-gradient(90deg, #E4F0FC 0%, #C1DCF8 50%, #E4F0FC 100%);
box-shadow: 0 2px 2px 0 #00152940;
display: flex;
align-items: center;
justify-content: center;
}

/* 总收入字体 */
.text2-income {
 width: 215px;
 height: 26px;
 flex-shrink: 0;
 color: #040a2d;
 font-family: "PingFang SC";
 font-size: 20px;
 font-style: normal;
 font-weight: 900;
 line-height: 31.79px;
}

/* 图表容器 */
.chart-container {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 10px;
}

/* 左侧数据列表，使用您指定的样式 */
.market-data {
  display: flex;
  width: 179px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 10px;
  margin-left: 80px;
}

.market-item {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-family: "PingFang SC";
  font-size: 16px;
  color: #040a2d;
}

.market-name {
  font-weight: 700;
}

.market-value {
  font-weight: 500;
}

/* 图表样式 */
/* .chart {
  flex: 1;
  height: 300px;
  margin-top: 10px;
} */
</style>