vue颜色循环（支付首页主题）

<template>
  <el-card class="box-card breadcrumb-header" v-loading="containerLoading" :element-loading-text="$t('common.loading')" shadow="never">
    <div v-if="hasRole('PayAdmin')" style="margin-bottom: 20px">
      <el-select v-model="searchMchId" clearable size="small" filterable :disabled="filterDisabled"
                 placeholder="请选择商户" @change="init">
        <el-option v-for="item in mchList" :key="item.id" :label="item.mchName" :value="item.id" />
      </el-select>
    </div>
    <el-row>
      <el-col :span="24">
        <el-divider direction="vertical" class="blue-divider" />
        <span class="text-middle">今日概况</span>
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col v-for="(item, index) in todayData" :key="index" :span="8"
              style="margin-top: 20px;">
        <div :class="`${item.color}` + ' card-flex'">
          <div class="flex-item">
            <img :src="item.icon">
          </div>
          <div class="flex-item" :lg="8">
            <p class="num">{
   {
    todayOverview[item.prop] || 0 }}</p>
            <p class="desc">{
   {
    item.label }}</p>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- <div style="background-color: #ecf5ff;color: #409eff;border: 1px solid #409eff; text-align: center;border-radius: 4px;">
      <h3 style="margin: 8px 0px">{
   {
    todayOverview[item.code] || 0 }}</h3>
      <p style="margin: 8px 0px;">{
   {
    item.label }}交易(元)</p>
    </div> -->
      <!-- <el-col v-for="(item, index) in tagItems" :key="index" :span="4" style="margin-top: 20px;">
        <div style="background-color: #f0f9eb;color: #67c23a;border: 1px solid #67c23a; text-align: center;border-radius: 4px;">
          <h3 style="margin: 8px 0px">{
   {
    todayOverview[item.code] || 0 }}</h3>
          <p style="margin: 8px 0px;">{
   {
    item.label }}交易(元)</p>
        </div>
      </el-col> -->
    <el-row :gutter="15">
      <el-col v-for="(item, index) in tagItems" :key="index" :span="4" style="margin-bottom: 8px;">
        <div style="margin-top: 20px; border: 1px solid rgb(214, 217, 231); text-align: center;border-radius: 4px; -webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1); box-shadow: 0 2px 12px 0 rgba(0,0,0,.1); ">
          <h3 style="margin: 8px 0px">{
   {
    todayOverviewtheme[item.code] || 0 }}</h3>
          <p style="margin: 8px 0px;">{
   {
    item.name }}交易(元)</p>
        </div>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px">
      <el-col :span="24">
        <el-divider direction="vertical" class="blue-divider" />
        <span class="text-middle">最近一周业务实际交易统计</span>
      </el-col>
    </el-row>
    <el-row>
      <div v-if="_.isEmpty(barOption)" style="width: 100%; height: 300px;margin-top: 20px; text-align: center;background: #eee">
        <span style="line-height: 300px">
          数据加载失败
        </span>
      </div>
      <div v-else>
        <v-chart :options="barOption" :theme="theme" autoresize style="width: 100%; height: 300px" />
      </div>
    </el-row>
    <el-row style="margin-top: 20px">
      <el-col :span="24">
        <el-divider direction="vertical" class="blue-divider" />
        <span class="text-middle">月度交易统计 (单位： 元)</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div v-if="_.isEmpty(pieOption)" style="width: 100%; height: 300px;margin-top: 20px; text-align: center;background: #eee">
          <span style="line-height: 300px">
            数据加载失败
          </span>
        </div>
        <v-chart :options="pieOption" :theme="theme" autoresize style=" height: 300px" />
      </el-col>
      <el-col :span="12">
        <div v-if="_.isEmpty(sourceOption)" style=