<template>
  <div v-loading="utxosLoading">

      <!-- 对数线性显示切换 -->
     
    <el-row>      
      <el-col>
        <!-- @handelSwitch="handelSwitch"     -->
         <el-button @click="handelLineSwitch"
         style="margin-left:100px;height:35px;border-radius:6px;line-height: 10px;"
         >{{ $t(`home.switch`)
          }}<span class="according"> {{ $t(switch3) }}</span></el-button
        >
      </el-col>
    </el-row>
 
     <h3 class="minTitle">{{$t(`arh.ratio1`)}}</h3>
     <div style="padding-left: 9%;font-size:12px;color:rgba(0,0,0,0.6);margin-top: 10px;">{{ $t(`home.figure`) }}</div>
    <el-row   type="flex" class="row-bg" justify="space-between">
      <!-- style="width: 40vw; height: 600px; margin-left: -80px" -->
      
      <el-col :span="24">
        <div
          id="utxosLine"
          style="width: 100%; height: 600px; margin-left: 20px"
        ></div>
      </el-col>
    
    </el-row>
    <div style="padding-left: 9%;font-size:12px;color:rgba(0,0,0,0.6);margin-top: 10px;">{{ $t(`home.figure2`) }}</div>
    <!-- 比率图 -->
     <h3 class="minTitle">{{$t(`arh.ratio2`)}}</h3>
    <el-row type="flex" class="row-bg" justify="space-between">
      <!-- style="width: 40vw; height: 600px; margin-left: -80px" -->
      <el-col :span="24">
        <div
          id="ratioLine"
          style="width: 100%; height: 600px; margin-left: 20px"
        ></div>
      </el-col>
     
    </el-row>
    

  </div>
</template>


<script>
import indexJs from "./index";
export default {
  mixins: [indexJs],
};
</script>

<style scoped>
.minTitle{
  color: rgba(0, 0, 0, 0.5);
  /* outline: 1px solid red; */
  padding: 5px;
  text-align: center;
  margin: 0 auto;
}
.figure{
  padding: 10px;
  color: rgba(0,0,0,0.5);
}
</style>