<template>
  <div style="padding: 0px 10px 10px 10px">
    <div class="formtitle">若尔盖养殖场</div>
    <div class="layouts">
      <div class="layoutsdiv">
        <div class="tile" style="margin-bottom: 0px">总资源展示</div>
        <div class="echartsdiv">
          <!-- 总资源展示两个图表 -->
          <div id="Inventory" class="chartstyle"></div>
          <div id="Inventory1" class="chartstylepc"></div>
        </div>
        <div class="text">
          <div>种质资源</div>
          <div>基因数据资源</div>
        </div>
      </div>
      <div class="layoutsdiv">
        <div class="tile">综合育种值</div>
        <div
          style="
            display: flex;
            font-weight: bold;
            width: 100%;
            padding-top: 4px;
          "
        >
          <div style="width: 50%; text-align: left; padding-left: 1%">
            育种值
          </div>
          <div class="yzz">平均育种值</div>
        </div>
        <div style="display: flex">
          <div
            class="echartsdiv"
            style="display: flex; flex-direction: column; width: 100%"
          >
            <div id="Inventory2" class="chartstyle2"></div>
          </div>
          <div class="flexdiv">
            <div
              style="width: 100%; display: flex; justify-content: center"
            ></div>
            <div class="tabsdata">
              <div class="tabs">
                <div>平均育种值</div>
                <div>258</div>
              </div>
            </div>
            <div style="text-align: center">
              <img
                style="width: 100%"
                src="https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/ymc_travel/2024/09/23/eebaca34a02b3398edaf107b1ae7415e.png"
                alt=""
              />
            </div>
          </div>
        </div>
        <div class="rightstyle">
          <div>群体育种值趋势图</div>
          <div>育种牛图</div>
        </div>
      </div>
      <div class="layoutsdiv">
        <div class="tile">系谱分析</div>
        <div style="display: flex">
          <img
            style="width: 100%"
            src="https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/ymc_travel/2024/09/23/8efcf4aa9ab05f1a4937a081a20a52d5.png"
            alt=""
          />
        </div>
        <div class="newstyle">
          <div style="width: 42%; text-align: center">群体系统发育NJ树</div>
          <div style="width: 47%; text-align: center">分布位置展示</div>
        </div>
      </div>
      <div class="layoutsdiv">
        <div class="tile">遗传病风险警告</div>
        <div style="display: flex">
          <div
            class="echartsdiv"
            style="display: flex; flex-direction: column; width: 100%"
          >
            <!-- 遗传病风险警告图表 -->
            <div id="Inventory3" class="chartstyle3"></div>
            <div style="font-weight: 600; width: 100%">
              群体遗传病风险概览图
            </div>
          </div>
          <div class="flexdiv" style="display: flex">
            <img
              style="width: 110%"
              src="https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/ymc_travel/2024/09/24/d1995dff7f26663444619f1620d83bc0.png"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  <script>
import * as echarts from 'echarts'
export default {
  data() {
    return {}
  },
  methods: {},
  mounted() {
    setTimeout(() => {
      var myChart = echarts.init(document.getElementById('Inventory'))
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: ['奶牛', '种母牛', '种公牛', '犊牛']
        },
        series: [
          {
            type: 'bar',
            data: [35, 140, 300, 420],
            itemStyle: {
              color: '#6A63E8'
            },
            barWidth: 30 //柱图宽度
          }
        ]
      })
      var myChart1 = echarts.init(document.getElementById('Inventory1'))
      myChart1.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          top: '40px'
        },
        series: [
          {
            type: 'pie',
            radius: [30, 70],
            roseType: 'area',
            data: [
              { value: 40, name: '西门塔尔牛' },
              { value: 30, name: '九龙牦牛' },
              { value: 15, name: '安格斯牛' },
              { value: 10, name: '黄牛' },
              { value: 5, name: '荷斯坦牛' }
            ],
            top: '70px'
          }
        ]
      })
      var myChart2 = echarts.init(document.getElementById('Inventory2'))
      myChart2.setOption({
        title: {},
        tooltip: {},
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [
            '82010000990',
            '82010000991',
            '82010000992',
            '82010000993',
            '82010000994',
            '82010000995',
            '82010000996',
            '82010000997'
          ]
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          }
        },
        series: [
          {
            // name: '销量',
            type: 'line',
            data: [
              255.85, 252.16, 259.69, 250.76, 264.34, 255.24, 260.27, 238.7
            ],
            areaStyle: {},
            areaStyle: {
              normal: {
                color: '#DADFFB' //改变区域颜色
              }
            },
            itemStyle: {
              normal: {
                color: '#6A63E8', //改变折线点的颜色
                lineStyle: {
                  color: '#6A63E8' //改变折线颜色
                }
              }
            }
          }
        ]
      })
      var myChart3 = echarts.init(document.getElementById('Inventory3'))
      myChart3.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['低风险', '高风险']
        },
        series: [
          {
            name: '占比',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: [
              { value: 25, name: '低风险', itemStyle: { color: '#5CAAF8' } },
              { value: 75, name: '高风险', itemStyle: { color: '#E8556F' } }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    }, 500)
  }
}
</script>
  
  <style lang="less" scoped>
.formtitle {
  font-weight: bold;
  padding-left: 12px;
  padding-top: 10px;
  margin-bottom: 2px;
  font-size: 20px;
}
.layouts {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  overflow: hidden;
  .layouts > .layoutsdiv {
    width: 47.86%;
    margin-top: 10px;
    background: white;
    padding: 18px 14px 18px 16px;
    border-radius: 6px;
  }
  .tile {
    border-bottom: 1px solid #29272718;
    padding-bottom: 18px;
    padding-top: 6px;
    font-weight: 600;
    color: rgb(49, 49, 49);
    margin-bottom: 20px;
  }
  .echartsdiv {
    display: flex;
    .chartstyle {
      height: 350px;
      text-align: center;
    }
    .chartstylepc {
      height: 350px;
      text-align: center;
    }
    .chartstyle2 {
      height: 350px;
      text-align: center;
      width: 100%;
    }
    .chartstyle3 {
      height: 350px;
      text-align: center;
      width: 100%;
    }
  }
  .echartsdiv div {
    width: 50%;
    text-align: center;
    display: flex;
    justify-content: center;
  }
  .tabsdata {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 30px;
    .tabs {
      width: 80%;
      border: 1px solid #89d7b2;
      display: flex;
      justify-content: space-between;
      color: #89d7b2;
      background: #f2fffa;
      margin-top: 26px;
      font-size: 14px;
    }
    .tabs div {
      border: 1px solid #89d7b2;
      text-align: center;
      width: 60%;
      padding: 8px 16px 8px 16px;
    }
  }
  .flexdiv {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .newstyle {
    display: flex;
    font-weight: bold;
    width: 100%;
    justify-content: space-around;
    padding-bottom: 20px;
    position: relative;
    margin-top: -38px;
  }
  .yzz {
    width: 35%;
    text-align: center;
  }
  .rightstyle {
    display: flex;
    font-weight: bold;
    width: 104%;
    justify-content: space-around;
    margin-top: -40px;
    padding-bottom: 20px;
  }
  .text {
    display: flex;
    font-weight: bold;
    width: 104%;
    justify-content: space-around;
    padding-top: 40px;
  }
}
@media (max-width: 1669px) {
    .text {
    padding-top: 10px !important;
    margin-bottom: 30px;
  }
  .rightstyle {
    padding-bottom: 0px !important;
    margin-top: 0px !important;
    width: 99% !important;
  }
  .yzz {
    width: 26% !important;
  }
  .newstyle {
    margin-top: -22px !important;
  }
  .layouts > .layoutsdiv {
    width: 47% !important;
  }
  .chartstyle {
    height: 340px !important;
  }
  .chartstylepc {
    height: 380px !important;
  }
  .chartstyle2 {
    height: 340px !important;
  }
  .chartstyle3 {
    height: 270px !important;
  }
  .tabsdata {
    padding-top: 0px;
  }
}
</style>
  