<template>
  <div class="mian">
    <div class="title">
      <div class="left">
        <div class="left-first" id="time">--:--:--</div>
        <div class="left-second" id="date">----</div>
      </div>
      <div class="center">南川区综合服务中心数智管理平台能耗大屏</div>
      <div class="right">
        <div>{{ weekDay }}</div>
        <div>晴</div>
        <div>40℃</div>
        <div class="logout" @click="logout">
          <img
            src="../../../assets/return.png"
            style="width: 1.5rem; height: 1.5rem"
          />
          <div>退出</div>
        </div>
      </div>
    </div>
    <div class="header">
      <div class="header-item">
        <span class="header-label">今年用电量</span>
        <span class="header-value orange">180</span>
        <span class="header-unit">亿kwh</span>
      </div>
      <div class="header-item">
        <span class="header-label">本月用电总量</span>
        <span class="header-value green">1.8</span>
        <span class="header-unit">亿kwh</span>
      </div>
      <div class="header-item">
        <span class="header-label">今年用水总量</span>
        <span class="header-value blue">2600</span>
        <span class="header-unit">万吨</span>
      </div>
      <div class="header-item">
        <span class="header-label">本月用水总量</span>
        <span class="header-value purple">30</span>
        <span class="header-unit">万吨</span>
      </div>
      <div class="header-item">
        <span class="header-label">设备总数</span>
        <span class="header-value green">500</span>
        <span class="header-unit">台</span>
      </div>
    </div>
    <div class="contents">
      <div class="content">
        <div class="content-left">
          <div class="first">
            <div class="first-total">
              <div class="first-total-title">今日用电量</div>
              <div class="first-total-value">
                <div class="first-total-value-number">1</div>
                <div class="first-total-value-number">2</div>
                <div class="first-total-value-number">3</div>
              </div>
              <div class="first-total-unit">kwh</div>
            </div>
            <div
              ref="barChart"
              class="bar-chart"
              style="width: 100%; height: 100%"
            ></div>
          </div>
          <div class="second">
            <div ref="powerChart" class="power-chart"></div>
          </div>
          <div class="third">
            <div class="env-cards">
              <div class="env-card">
                <div class="env-card-content">
                  <div class="env-title">PM2.5(μg/m³)</div>
                  <div class="env-value">5</div>
                </div>
              </div>
              <div class="env-card">
                <div class="env-card-content">
                  <div class="env-title">PM10(μg/m³)</div>
                  <div class="env-value">120</div>
                </div>
              </div>
              <div class="env-card">
                <div class="env-card-content">
                  <div class="env-title">噪声(dB(A))</div>
                  <div class="env-value">50</div>
                </div>
              </div>
              <div class="env-card">
                <div class="env-card-content">
                  <div class="env-title">一氧化碳(ppm)</div>
                  <div class="env-value">10</div>
                </div>
              </div>
            </div>
            <div ref="envChart" class="env-chart"></div>
          </div>
        </div>
        <div class="content-center">
          <div class="content-center-first">
            <div class="first-item">
              <div class="item"></div>
            </div>
          </div>
          <div class="content-center-second">
            <div class="second-item">
              <div class="second-item-text">645</div>
              <div class="second-item-text">729</div>
              <div class="second-item-text">648</div>
              <div class="second-item-text">786</div>
            </div>
          </div>
        </div>
        <div class="content-right">
          <div class="first">
            <div class="first-total">
              <div class="first-total-title">今日用水量</div>
              <div class="first-total-value">
                <div class="first-total-value-number">1</div>
                <div class="first-total-value-number">2</div>
                <div class="first-total-value-number">3</div>
              </div>
              <div class="first-total-unit">吨</div>
            </div>
            <div ref="pie3dChart" class="pie3d-chart"></div>
          </div>
          <div class="second">
            <div ref="waterChart" class="water-chart"></div>
          </div>
          <div class="third">
            <div class="device-cards">
              <div class="device-card1">
                <div>
                  <img
                    src="../../../assets/energyConsumptionAnalysis/devices-number-icon.png"
                    style="width: 1.75rem; height: 1.75rem"
                    alt=""
                  />
                </div>
                <div class="device-card-text-box">
                  <div class="device-card-text">设备总数</div>
                  <div class="device-card1-value">650</div>
                </div>
              </div>
              <div class="device-card2">
                <div>
                  <img
                    src="../../../assets/energyConsumptionAnalysis/devices-online-icon.png"
                    style="width: 1.75rem; height: 1.75rem"
                    alt=""
                  />
                </div>
                <div>
                  <div class="device-card-text">设备在线数</div>
                  <div class="device-card2-value">632</div>
                </div>
              </div>
              <div class="device-card3">
                <div>
                  <img
                    src="../../../assets/energyConsumptionAnalysis/devices-offline-icon.png"
                    style="width: 1.75rem; height: 1.75rem"
                    alt=""
                  />
                </div>
                <div>
                  <div class="device-card-text">设备离线数</div>
                  <div class="device-card3-value">18</div>
                </div>
              </div>
            </div>
            <div ref="deviceChart" class="device-chart"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { useRouter } from 'vue-router';
import * as echarts from 'echarts';
import 'echarts-gl';
import { getThreeDBarOption } from '#/utils/threeDBarOption';
import { renderPie3DChart } from '#/utils/pie3d';
import {
  addChartToResizeManager,
  removeChartFromResizeManager,
} from '#/utils/echartsResize';
import { useFlexibleRem } from '#/utils/useFlexibleRem';
useFlexibleRem();
// 路由
const router = useRouter();

// 图表实例
const barChart = ref<HTMLElement>();
const powerChart = ref<HTMLElement>();
const envChart = ref<HTMLElement>();
const waterChart = ref<HTMLElement>();
const deviceChart = ref<HTMLElement>();
const pie3dChart = ref<HTMLElement>();

// 定时器
let timer: number | null = null;

// 星期几
const weekDay = ref('');

// 图表实例
let barChartInstance: echarts.ECharts | null = null;
let powerChartInstance: echarts.ECharts | null = null;
let envChartInstance: echarts.ECharts | null = null;
let waterChartInstance: echarts.ECharts | null = null;
let deviceChartInstance: echarts.ECharts | null = null;
let pie3dChartInstance: any = null;

// 退出方法
const logout = () => {
  router.push('/navigation');
};

// 更新时间
const updateTime = () => {
  const now = new Date();
  const time = now.toLocaleTimeString('zh-CN', { hour12: false });
  const date =
    now.getFullYear() +
    '.' +
    String(now.getMonth() + 1).padStart(2, '0') +
    '.' +
    String(now.getDate()).padStart(2, '0');

  // 获取星期几
  const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
  weekDay.value = '星期' + weekDays[now.getDay()];

  const timeElement = document.getElementById('time');
  const dateElement = document.getElementById('date');

  if (timeElement) timeElement.innerText = time;
  if (dateElement) dateElement.innerText = date;
};

// 初始化柱状图
const initBarChart = () => {
  if (!barChart.value) return;

  const myChart = echarts.init(barChart.value);
  myChart.setOption({
    tooltip: {},
    grid: { left: 40, right: 20, top: 40, bottom: 45 },
    xAxis: { data: ['A', 'B', 'C', 'D'] },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20],
      },
    ],
  });
};

// 初始化电力图表
const initPowerChart = () => {
  if (!powerChart.value) return;

  const chart = echarts.init(powerChart.value);
  const option = {
    tooltip: { trigger: 'axis' },
    grid: { left: 40, right: 20, top: 40, bottom: 30 },
    xAxis: {
      type: 'category',
      data: Array.from({ length: 19 }, (_, i) => i + 6),
      axisLine: { lineStyle: { color: '#3ec6ff' } },
      axisLabel: { color: '#fff' },
    },
    yAxis: {
      type: 'value',
      name: '',
      axisLine: { lineStyle: { color: '#3ec6ff' } },
      axisLabel: { color: '#fff' },
      splitLine: { lineStyle: { color: '#1e90ff22' } },
    },
    series: [
      {
        data: [
          80, 120, 100, 130, 150, 180, 200, 220, 250, 285, 230, 200, 180, 150,
          120, 100, 80, 60, 40,
        ],
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 0,
        itemStyle: { color: '#3ec6ff' },
        lineStyle: { width: 1 },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1, // 上→下
            [
              { offset: 0, color: '#32B7E9' },
              { offset: 1, color: 'rgba(50,183,233,0)' },
            ],
          ),
        },
      },
    ],
  };
  chart.setOption(option);
  powerChartInstance = chart;
  addChartToResizeManager(chart);
};

// 初始化环境图表
const initEnvChart = () => {
  if (!envChart.value) return;

  const chart = echarts.init(envChart.value);
  const option = {
    tooltip: { trigger: 'axis' },
    grid: { left: 40, right: 20, top: 10, bottom: 20 },
    xAxis: {
      type: 'category',
      data: Array.from({ length: 8 }, (_, i) => (i + 1) * 3),
      axisLine: { lineStyle: { color: '#3ec6ff' } },
      axisLabel: { color: '#fff' },
    },
    yAxis: {
      type: 'value',
      axisLine: { lineStyle: { color: '#3ec6ff' } },
      axisLabel: { color: '#fff' },
      splitLine: { lineStyle: { color: '#1e90ff22' } },
    },
    series: [
      {
        name: '今年',
        data: [100, 200, 150, 300, 250, 200, 100, 80],
        type: 'line',
        smooth: true,
        itemStyle: { color: '#b388ff' },
        lineStyle: { width: 3 },
        areaStyle: { color: 'rgba(179,136,255,0.2)' },
        symbol: 'circle',
        symbolSize: 0,
      },
      {
        name: '去年',
        data: [80, 120, 100, 180, 150, 120, 60, 40],
        type: 'line',
        smooth: true,
        itemStyle: { color: '#ffb300' },
        lineStyle: { width: 3 },
        areaStyle: { color: 'rgba(255,179,0,0.15)' },
        symbol: 'circle',
        symbolSize: 0,
      },
    ],
  };
  chart.setOption(option);
  envChartInstance = chart;
  addChartToResizeManager(chart);
};

// 初始化水表图表
const initWaterChart = () => {
  if (!waterChart.value) return;

  const chart = echarts.init(waterChart.value);
  const option = {
    tooltip: { trigger: 'axis' },
    legend: {
      data: ['今日', '平均'],
      textStyle: { color: '#fff' },
      right: 20,
      top: 10,
      bottom: 10,
    },
    grid: { left: 40, right: 20, top: 40, bottom: 30 },
    xAxis: {
      type: 'category',
      data: Array.from({ length: 19 }, (_, i) => i + 6),
      axisLine: { lineStyle: { color: '#3ec6ff' } },
      axisLabel: { color: '#fff' },
    },
    yAxis: {
      type: 'value',
      axisLine: { lineStyle: { color: '#3ec6ff' } },
      axisLabel: { color: '#fff' },
      splitLine: { lineStyle: { color: '#1e90ff22' } },
    },
    series: [
      {
        name: '今日',
        data: [
          1.2, 2.1, 1.8, 2.5, 3.0, 3.8, 4.2, 4.5, 4.8, 4.8, 4.0, 3.2, 2.5, 2.0,
          1.5, 1.0, 0.8, 0.5, 0.2,
        ],
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 0,
        itemStyle: { color: '#3ec6ff' },
        lineStyle: { width: 1 },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1, // 上→下
            [
              { offset: 0, color: '#32B7E9' },
              { offset: 1, color: 'rgba(50,183,233,0)' },
            ],
          ),
        },
      },
      {
        name: '平均',
        data: Array(19).fill(2.5),
        type: 'line',
        smooth: true,
        symbol: 'none',
        itemStyle: { color: '#ff6b00' },
        lineStyle: { width: 1, type: 'solid', color: '#ff6b00' },
      },
    ],
  };
  chart.setOption(option);
  waterChartInstance = chart;
  addChartToResizeManager(chart);
};

// 初始化设备图表
const initDeviceChart = () => {
  if (!deviceChart.value) return;

  const chart = echarts.init(deviceChart.value);
  const option = {
    grid: { left: 60, right: 40, top: 10, bottom: 30 },
    xAxis: {
      type: 'value',
      axisLine: { lineStyle: { color: '#8697BA' } },
      axisLabel: { color: '#fff' },
      splitLine: { show: false },
    },
    yAxis: {
      type: 'category',
      data: ['门禁', '监控', '水表'],
      axisLine: { lineStyle: { color: '#8697BA' } },
      axisLabel: { color: '#A1B2C2' },
    },
    series: [
      {
        name: '设备数',
        type: 'bar',
        data: [650, 120, 40],
        barWidth: 12,
        itemStyle: {
          color: function (params: any) {
            const colors = [
              new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1, // 上→下
                [
                  { offset: 0, color: '#2986B1' },
                  { offset: 1, color: '#6941FF' },
                ],
              ),
              new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1, // 上→下
                [
                  { offset: 0, color: '#33FF99' },
                  { offset: 1, color: '#00908E' },
                ],
              ),
              new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1, // 上→下
                [
                  { offset: 0, color: '#01B4FF' },
                  { offset: 1, color: '#0336FF' },
                ],
              ),
            ];
            return colors[params.dataIndex];
          },
        },
        label: {
          show: true,
          position: 'right',
          color: '#fff',
        },
      },
    ],
  };
  chart.setOption(option);
  deviceChartInstance = chart;
  addChartToResizeManager(chart);
};

// 初始化3D饼图
const initPie3DChart = () => {
  if (!pie3dChart.value) return;

  pie3dChartInstance = renderPie3DChart(pie3dChart.value, {
    data: [
      { name: 'A区域', value: 20, itemStyle: { color: '#3ffbff' } },
      { name: 'D区域', value: 20, itemStyle: { color: '#b388ff' } },
      { name: 'C区域', value: 45, itemStyle: { color: '#ff9900' } },
      { name: 'B区域', value: 15, itemStyle: { color: '#3f6bff' } },
    ],
    hoverHeightScale: 2,
    selectOffset: 0.1,
    distance: 220,
    boxHeight: 5,
  });
  if (pie3dChartInstance) {
    addChartToResizeManager(pie3dChartInstance);
  }
};

// 组件挂载时初始化
onMounted(() => {
  updateTime();
  timer = setInterval(updateTime, 1000);
  initBarChart();
  initPowerChart();
  initEnvChart();
  initWaterChart();
  initDeviceChart();
  initPie3DChart();
});

// 组件卸载时清理
onBeforeUnmount(() => {
  if (timer) {
    clearInterval(timer);
  }

  // 从管理器中移除图表
  if (barChartInstance) {
    removeChartFromResizeManager(barChartInstance);
    barChartInstance.dispose();
  }
  if (powerChartInstance) {
    removeChartFromResizeManager(powerChartInstance);
    powerChartInstance.dispose();
  }
  if (envChartInstance) {
    removeChartFromResizeManager(envChartInstance);
    envChartInstance.dispose();
  }
  if (waterChartInstance) {
    removeChartFromResizeManager(waterChartInstance);
    waterChartInstance.dispose();
  }
  if (deviceChartInstance) {
    removeChartFromResizeManager(deviceChartInstance);
    deviceChartInstance.dispose();
  }
  if (pie3dChartInstance) {
    removeChartFromResizeManager(pie3dChartInstance);
    pie3dChartInstance.dispose();
  }
});
</script>

<style scoped>
@font-face {
  font-family: 'ShiShangZhongHeiJianTi';
  src: url('../../../assets/fonts/时尚中黑简体.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
.mian {
  height: 100vh;
  background: url('../../../assets/energyConsumptionAnalysis/bg.png');
  background-size: 100% 100%;
  background-color: #081b3a;
  display: flex;
  flex-direction: column;
}
.title {
  height: 5.375rem;
  align-items: center;
  display: flex;
  justify-content: space-between;
  .left {
    display: flex;
    width: 14.3125rem;
    .left-first {
      padding-left: 2.3125rem;
      padding-right: 3.5rem;
      font-size: 1.875rem;
      color: #ffffff;
    }
    .left-second {
      width: 6.5rem;
      font-family: ShiShangZhongHeiJianTi;
      font-weight: 400;
      font-size: 1.25rem;
      color: #ffffff;
    }
  }
  .center {
    font-size: 1.9rem;
    color: #fff;
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.1em;
    text-shadow:
      0 0 10px #1e90ff,
      0 0 20px #1e90ff;
  }
  .right {
    width: 17.3125rem;
    display: flex;
    font-family: ShiShangZhongHeiJianTi;
    font-weight: 400;
    font-size: 1.25rem;
    color: #ffffff;
    gap: 0.75rem;
    .logout {
      display: flex;
      cursor: pointer;
      align-items: center;
      gap: 0.2rem;
    }
  }
}
.header {
  /* margin-top: 1.125rem; */
  margin-left: 4.625rem;
  margin-right: 4.25rem;
  height: 4.4rem;
  display: flex;
  justify-content: space-between;
  .header-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.5rem;
    border-radius: 0.5rem;
    box-shadow:
      0 0 10px #0ff2,
      0 0 20px #0ff2 inset;
  }
  .header-label {
    color: #fff;
    font-size: 1rem;
    margin-right: 0.5rem;
    letter-spacing: 0.05em;
  }

  .header-value {
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 0.2rem;
    font-family: ShiShangZhongHeiJianTi;
  }

  .header-value.orange {
    color: #ffb300;
  }
  .header-value.green {
    color: #00ffb0;
  }
  .header-value.blue {
    color: #3ec6ff;
  }
  .header-value.purple {
    color: #b388ff;
  }

  .header-unit {
    color: #fff;
    font-size: 1rem;
    margin-left: 0.2rem;
  }
}
.header div {
  width: 20.125rem;
}
.content {
  flex: 1;
  height: 100%;
  display: flex;
  justify-content: space-between;
  margin: 0 2.25rem 2.25rem 2.25rem;
  .content-left {
    width: 32.6875rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .first {
      height: 13.9rem;
      .first-total {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 1rem 1rem 0 0;
        font-size: 1.12rem;
        color: #89eaff;
        .first-total-title {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 1.12rem;
          line-height: 1rem;
        }
        .first-total-value {
          display: flex;
          align-items: center;
          .first-total-value-number {
            font-family: Microsoft YaHei;
            font-weight: bold;
            font-size: 1.3rem;
            color: #89eaff;
            line-height: 1rem;
            padding: 0.3rem;
            margin: 0 0.1rem;
            border: 0.02rem solid rgba(99, 145, 180, 0.59);
          }
        }
      }
    }
    .second {
      height: 12.5rem;
      /* margin-top:2.25rem;
             margin-bottom: 2rem; */
      .power-chart {
        height: 100%;
        margin-top: 0.2rem;
      }
    }
    .third {
      height: 16rem;
      display: flex;
      flex-direction: column;
      /* justify-content: space-around; */
      .env-cards {
        display: flex;
        justify-content: space-between;
        margin-top: 5rem;
        margin-left: 1rem;
        margin-right: 1.1rem;
        .env-card {
          width: 6.9rem;
          height: 3.2rem;
          border-radius: 0.5rem;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          .env-card-content {
            .env-title {
              font-size: 0.9rem;
              font-weight: 400;
              color: #4ce2d1;
            }
            .env-value {
              font-size: 0.8rem;
              font-weight: bold;
              font-family: ShiShangZhongHeiJianTi;
              font-weight: 400;
              color: #ffffff;
            }
          }
        }
      }
      .env-chart {
        height: 8rem;
      }
    }
  }
  .content-center {
    width: 47.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .content-center-first {
      height: 31.9rem;
      .first-item {
        height: 100%;
        width: 100%;
        background: url('../../../assets/energyConsumptionAnalysis/center-bg.png');
        background-size: 95% 95%;
        background-repeat: no-repeat;
        background-position: center;
      }
    }
    .content-center-second {
      height: 12.5rem;
      .second-item {
        margin-top: 6rem;
        margin-left: 3.68rem;
        margin-bottom: 6.5rem;
        margin-right: 4.9rem;
        display: flex;
        justify-content: space-between;
        .second-item-text {
          width: 5.37rem;
          font-family: ShiShangZhongHeiJianTi;
          font-weight: 400;
          font-size: 1.37rem;
          color: #ffffff;
          text-align: center;
        }
      }
    }
  }
  .content-right {
    width: 32.68rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .first {
      height: 14.9rem;
      .first-total {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 1rem 1rem 0 0;
        font-size: 1.12rem;
        color: #89eaff;
        .first-total-title {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 1.12rem;
          line-height: 1rem;
        }
        .first-total-value {
          display: flex;
          align-items: center;
          .first-total-value-number {
            font-family: Microsoft YaHei;
            font-weight: bold;
            font-size: 1.3rem;
            color: #89eaff;
            line-height: 1rem;
            padding: 0.3rem;
            margin: 0 0.1rem;
            border: 0.02rem solid rgba(99, 145, 180, 0.59);
          }
        }
      }
    }
    .second {
      height: 12.5rem;
      /* margin-top:2.25rem;
            margin-bottom: 2rem; */
      .water-chart {
        height: 100%;
        margin-top: 0.2rem;
      }
    }
    .third {
      height: 14rem;
      .device-cards {
        display: flex;
        justify-content: space-between;
        margin-top: 2rem;
        margin-right: 1.06rem;
        /* margin-bottom: 0.5rem; */
        margin-left: 1.31rem;
        .device-card1 {
          height: 3.2rem;
          width: 7.21rem;
          background: url('../../../assets/energyConsumptionAnalysis/devices-number.png');
          background-size: 100% 100%;
          display: flex;
          align-items: center;
          justify-content: center;

          .device-card1-value {
            font-family: Arial;
            font-weight: bold;
            font-size: 1.25rem;
            color: #02b3f4;
          }
        }
        .device-card2 {
          height: 3.2rem;
          width: 7.21rem;
          background: url('../../../assets/energyConsumptionAnalysis/devices-online.png');
          background-size: 100% 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          .device-card2-value {
            font-family: Arial;
            font-weight: bold;
            font-size: 1.25rem;
            color: #1de39d;
          }
        }
        .device-card3 {
          height: 3.2rem;
          width: 7.21rem;
          background: url('../../../assets/energyConsumptionAnalysis/devices-offline.png');
          background-size: 100% 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          .device-card3-value {
            font-family: Arial;
            font-weight: bold;
            font-size: 1.25rem;
            color: #f19315;
          }
        }
        .device-card-text {
          font-family: Microsoft YaHei UI;
          font-weight: 400;
          font-size: 0.75rem;
          color: #a1b2c2;
          line-height: 0.75rem;
        }
      }
      .device-chart {
        height: 8rem;
        /* margin-top: 0.2rem; */
      }
    }
  }
}
.pie3d-title {
  color: #fff;
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 0.3rem;
}
.pie3d-water {
  color: #fff;
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}
.pie3d-water-num {
  font-size: 1.3rem;
  color: #3ec6ff;
  background: #0a1e3a;
  border-radius: 0.2rem;
  padding: 0 0.2rem;
  margin: 0 0.2rem;
  letter-spacing: 0.1em;
}
.pie3d-chart {
  width: 100%;
  height: 176px;
  min-height: unset;
  margin: 0 auto;
}
</style>
