foster-pc-vue/src/views/znxy/charts/l_c/Bchfxtj.vue

<template>
  <div>
    <Title title="异常预警">
      <template v-slot:title-slot>
      </template>
    </Title>
    <div class="tabs yse-events">
      <div class="lbtn"><div class="text" :key="btnIndex" :class="getActive(1)" @click="change(1)">病害</div></div>
      <div class="rbtn"><div class="text" :key="btnIndex" :class="getActive(2)" @click="change(2)">虫害</div></div>
    </div>
    <div class="sumArea">
      <div class="left"></div>
      <template v-if="btnIndex == 1">
        <div class="content">
          <div class="label">预计发生病害面积</div>
          <div><font class="val">6
          </font><font class="unit">亩</font></div>
        </div>
      </template>
      <template v-if="btnIndex == 2">
        <div class="content">
          <div class="label">预计发生虫害面积</div>
          <div><font class="val">10
          </font><font class="unit">亩</font></div>
        </div>
      </template>
      <div class="right"></div>
    </div>
    <div ref="chartDom"  class="content-box yse-events"></div>
  </div>
</template>


<script setup>

import {onMounted, ref} from "vue";
import * as echarts from 'echarts';
import Title from "../../../components/title";

let chartDom = ref(null);
let myChart = null;
const btnIndex = ref(null);
function getActive(index){
  return btnIndex.value == index ? "active" : "";
}
function change(index) {
  btnIndex.value = index;
  switch (index) {
    case 1:
      bhInit();
      break;
    case 2:
      chInit();
      break;
  }
}
  onMounted(async () => {
    myChart = echarts.init(chartDom.value);
    change(1)
  })
  const options = {
    tooltip: {
      trigger: 'item',
      formatter:function(obj){
        let {value,unit,per,name} = obj.data;
        return value +" "+ unit + "<br/>"+per + "%<br/>"+name;
      },
    },
    legend: {
      orient:"vertical",
      top: '50%',
      right: '0%',
      textStyle:{
        color: "#fff",
      },
      formatter:function(name){
        let data = options.series[0].data;
        let obj = data.find((item)=> item.name == name)
        return obj.name+" "+obj.value + " " + obj.unit + " | "+ obj.per + "%";
      },
    },
    series: [
      {
        center:['30%','50%'],
        name: 'Access From',
        type: 'pie',
        radius: ['50', '70'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderColor: '#00000010',
          borderRadius:3,
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        data: []
      },
      {
        center:['30%','50%'],
        name: 'Access From',
        type: 'pie',
        radius: ['30', '40'],
        avoidLabelOverlap: false,
        itemStyle: {
          color:"#847e7e",
          borderColor: '#00000010',
          borderRadius:3,
          borderWidth: 2
        },
        label: {
          formatter:function(obj){
            let {per,name} = obj.data;
            return per + "%\n"+name;
          },
          show: true,
          position: 'center'
        },
        data: []
      }
    ]
  };


  function bhInit() {
    options.series[0]["name"] = "病害"
    options.series[1]["name"] = "病害"
    options.series[0].data = [
      {
        name: "无病害",
        value: 24,
        unit: "亩",
        per: "75",
        itemStyle: {
          color: "#1FEBD4",
        }
      },
      {
        name: '有病害',
        value: 6,
        unit: "亩",
        per: "25",
        itemStyle: {
          color: "#9DEA4B",
        }
      },
    ];
    options.series[1].data = [];
    for(let item of options.series[0].data){
      options.series[1].data.push({...item,itemStyle:{color:"#3C3F41"}})
    }
    myChart.clear();
    options && myChart.setOption(options);
  }
  function chInit() {
    options.series[0]["name"] = "虫害"
    options.series[1]["name"] = "虫害"
    options.series[0].data = [
      {
        name: "有虫害",
        value: 10,
        unit: "亩",
        per: "62",
        itemStyle:{
          color: "#77ec5d",
        }

    },
      {
        name: '无虫害',
        value: 20,
        unit: "亩",
        per: "19",
        itemStyle:{
          color: "#FFA75C",
        }
      },
    ];
    options.series[1].data = [];
    for(let item of options.series[0].data){
      options.series[1].data.push({...item,itemStyle:{color:"#3C3F41"}})
    }

    myChart.clear();
    options && myChart.setOption(options);
  }

</script>

<style lang="scss" scoped>

.tabs{
  position: absolute;
  top:25%;
  width:100%;
  z-index: 3;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  .text{
    text-align: center;
    width: 88px;
    height: 38px;
    line-height: 38px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #B4FFFB;
  }
  .lbtn{
    cursor: pointer;
    background-image: url(@/assets/img/left_btn.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 88px;
    height: 38px;
    .active{
      width: 88px;
      height: 38px;
      background-image: url(@/assets/img/left_btn_active.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
  .btn{
    cursor: pointer;
    background-image: url(@/assets/img/center_btn.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 88px;
    height: 38px;
    .active{
      width: 88px;
      height: 36px;
      background: rgba(3,44,57,0.8);
      box-shadow: inset 0px 0px 20px 4px rgba(0,255,240,0.5);
      border-radius: 0px 0px 0px 0px;
      border: 1px solid #51E9F0;
    }
  }
  .rbtn{
    background-image: url(@/assets/img/right_btn.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 88px;
    height: 38px;
    cursor: pointer;
    .active{
      width: 88px;
      height: 38px;
      background-image: url(@/assets/img/right_btn_active.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
}
.sumArea{
  position: absolute;
  top:50%;
  right: 0;
  width:40%;
  z-index: 3;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  color: #F4F4F4;
  .left{
    width: 8px;
    height: 52px;
    border: 1px solid #00FFF0;
    border-right: none;
  }
  .right{
    width: 8px;
    height: 52px;
    border: 1px solid #00FFF0;
    border-left: none;
  }
  .content{
    flex-grow:1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .label{
      height: 20px;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #B4FFFB;
      line-height: 20px;
      text-align: center;
    }
    .val{
      text-align: left;
      color: #D0C249;font-size: 18px;font-weight: bold
    }
  }
}
.content-box{
  position: absolute;
  width: 100%;
  height: calc(80% - 48px - 10px);
  bottom: 0px;
}



</style>