FE-daPengDaPing-led-2/src/views/formerComponents/scientificResearchProject.vue

<!--科研项目情况概览-->
<template>
  <div class="scientificResearchProject">
    <titleComponent :titleData="titleData"></titleComponent>
    <div class="scientificResearchProject-page">
      <div class="left-max-big-box" id="scientificResearchProject-eCharts-1"></div>
      <div class="right-max-big-box">
        <div class="right-top-big-box" id="scientificResearchProject-eCharts-2"></div>
        <div class="right-bottom-big-box" id="scientificResearchProject-eCharts-3"></div>
      </div>
      <p class="position-top-right-p">{{pieNum}}</p>
      <img class="position-img" src="@/assets/ZDimages/705@1x.png">
    </div>
  </div>
</template>
<script>
  import { dashboardsResearchProjects } from '@/api/yiLi'
  import titleComponent from './components/titleComponent.vue'

  export default {
    name: 'scientificResearchProject',
    components: {
      titleComponent
    },
    data() {
      return {
        titleData: {
          name: '科研项目情况概览',
          // text: 'Overview of scientific research projects'
          text: ''
        },
        eChartsData1: null,
        eChartsData2: null,
        eChartsData3: null,
        //柱状图数据
        barMaxList:[],
        barList:[],
        //饼图数据
        pieData: [],
        pieNum: '0',
        //雷达图数据--雷达图默认逆时针排序 所以数据需要倒序
        radarNameList: [],
        radarDataList: [],
        //图标轮播
        eChartsTimerData: null,
        eChartsCarouselTime: 20000,
        eChartsCarouselIndex: 0,
        //定时拉取数据
        getDataTimer: null,
        getDataSwitchTime: 360000
      }
    },
    created() {

    },
    mounted() {
      this.getDataTimerFunction()

      this.eChartsMethod1()
    },
    methods: {
      getDataTimerFunction() {
        this.dashboardsResearchProjects()
        this.getDataTimer = window.setInterval(() => {
          this.dashboardsResearchProjects()
        }, this.getDataSwitchTime)
      },
      //科研项目情况概览
      dashboardsResearchProjects() {
        clearInterval(this.eChartsTimerData)
        dashboardsResearchProjects().then(res => {
          this.$set(this,'eChartsCarouselIndex',0);
          const getFirstSix = (str) => str.slice(0, 6);
          //柱状图
          let maxList = []
          let list = []
          for (let i = 0; i < res.data.collages.length; i++) {
            if (list[7]) {
              maxList.push(JSON.parse(JSON.stringify(list)))
              list = []
              list.push({
                // name: res.data.collages[i].type,
                name: getFirstSix(res.data.collages[i].type),
                value: res.data.collages[i].count
              })
            } else {
              list.push({
                // name: res.data.collages[i].type,
                name: getFirstSix(res.data.collages[i].type),
                value: res.data.collages[i].count
              })
            }
          }
          if (!maxList[0]) {
            maxList.push(JSON.parse(JSON.stringify(list)))
          } else {
            if (maxList[maxList.length - 1].name != list[list.length - 1].name) {
              maxList.push(JSON.parse(JSON.stringify(list)))
            }
          }
          this.$set(this, 'barMaxList', maxList)
          this.$set(this, 'barList', maxList[0])
          //雷达图/饼图
          this.$set(this, 'pieNum', res.data.totalProjects)
          let max = 0
          for (let i = 0; i < res.data.projectLevels.length; i++) {
            if (res.data.projectLevels[i].count > max) {
              max = res.data.projectLevels[i].count
            }
          }
          max = this.precisionAdd(max, this.preciseDivide(max, 6))
          //雷达图数据
          let radarNameList = []
          let radarDataList = []
          //饼图数据
          let pieData = []
          for (let i = 0; i < res.data.projectLevels.length; i++) {
            radarNameList.unshift({
              max: max,
              name: res.data.projectLevels[i].type
            })
            radarDataList.unshift(res.data.projectLevels[i].count)
            pieData.push({
              value: res.data.projectLevels[i].count,
              name: res.data.projectLevels[i].type
            })
          }
          this.$set(this, 'radarNameList', radarNameList)
          this.$set(this, 'radarDataList', radarDataList)
          this.$set(this, 'pieData', pieData)
          if(maxList[0]){
            this.eChartsMethod1()
          }
          if(pieData[0]){
            this.eChartsMethod2()
            this.eChartsMethod3()
          }
        })
      },
      eChartsMethod1() {
        let self = this;
        clearInterval(this.eChartsTimerData)
        let borderValueList = [
          { value: 100 },
          { value: 100 },
          { value: 100 },
          { value: 100 },
          { value: 100 },
          { value: 100 },
          { value: 100 },
          { value: 100 }
        ]
        let numValueList = []
        let nameValueList = []
        for (let i=0;i<self.barList.length;i++) {
          nameValueList.push(self.barList[i].name)
          numValueList.push(self.barList[i].value)
        }
        let { borderData, total, numData, nameData } = {
          borderData: borderValueList,
          total: 100,
          numData: numValueList,
          nameData: nameValueList
        }
        let totalList = []
        numData.forEach((item) => {
          totalList.push(total)
        })
        let option = {
          xAxis: {
            max: total,
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          grid: {
            borderWidth: 0,
            top: '3%',
            left: '125',
            right: '35',
            bottom: '3%'
          },
          yAxis: [
            {
              type: 'category',
              inverse: true,
              data: nameData,
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#fff',
                  fontSize: 16
                }
              }
            }
          ],
          series: [
            {
              // 内
              type: 'bar',
              barWidth: 10,
              legendHoverLink: false,
              silent: true,
              itemStyle: {
                normal: {
                  barBorderRadius: 15,
                  color: {//渐变色
                    x: 1,
                    y: 0,
                    x2: 0,
                    y2: 0,
                    type: 'linear',
                    global: false,
                    colorStops: [
                      {
                        offset: 0,
                        color: '#00F7FF'
                      },
                      {
                        offset: 1,
                        color: '#0591F3'
                      }
                    ]
                  }
                }
              },
              label: {
                show: true,
                // position: 'insideBottomLeft',
                position: 'insideRight',
                // distance: 20,
                offset: [40, 2],
                fontSize: 14,
                color: '#fff',
                formatter: function(params) {
                  let str = params.value
                  return str
                }
              },
              data: numData,
              z: 1,
              animationEasing: 'elasticOut'
            },
            {
              name: '外框',
              type: 'bar',
              barGap: '-130%', // 设置外框粗细
              data: borderData,
              barWidth: 16,
              label: {
                show: false
              },
              itemStyle: {
                normal: {
                  color: {//渐变色
                    x: 1,
                    y: 0,
                    x2: 0,
                    y2: 0,
                    type: 'linear',
                    global: false,
                    colorStops: [
                      {
                        offset: 0,
                        color: 'rgba(167,167,167,0.1)'
                      },
                      {
                        offset: 1,
                        color: 'rgba(167,167,167,0.1)'
                      }
                    ]
                  },
                  barBorderRadius: 15,
                  label: {
                    // 标签显示位置
                    show: false
                  }
                }
              },
              z: 0
            },
            {
              name: '圆点',
              type: 'scatter',
              data: numData,
              label: 'none',
              symbolSize: 50,
              // symbolSize: 75,
              symbolOffset: [0, -1.5, 0, 0],
              // symbol: 'image://data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMzhweCIgaGVpZ2h0PSIzOHB4IiB2aWV3Qm94PSIwIDAgMzggMzgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+57yW57uEIDUxPC90aXRsZT4KICAgIDxkZWZzPgogICAgICAgIDxyZWN0IGlkPSJwYXRoLTEiIHg9IjAiIHk9IjAiIHdpZHRoPSIxOC4wNDYxOTciIGhlaWdodD0iMTgiIHJ4PSI5Ij48L3JlY3Q+CiAgICAgICAgPGZpbHRlciB4PSItNTIuNiUiIHk9Ii01Mi44JSIgd2lkdGg9IjIwNS4zJSIgaGVpZ2h0PSIyMDUuNiUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImZpbHRlci0yIj4KICAgICAgICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMSIgaW49IlNvdXJjZUdyYXBoaWMiPjwvZmVHYXVzc2lhbkJsdXI+CiAgICAgICAgPC9maWx0ZXI+CiAgICAgICAgPGZpbHRlciB4PSItNzIuMCUiIHk9Ii03Mi4yJSIgd2lkdGg9IjI0NC4xJSIgaGVpZ2h0PSIyNDQuNCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImZpbHRlci0zIj4KICAgICAgICAgICAgPGZlTW9ycGhvbG9neSByYWRpdXM9IjAuNSIgb3BlcmF0b3I9ImRpbGF0ZSIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd1NwcmVhZE91dGVyMSI+PC9mZU1vcnBob2xvZ3k+CiAgICAgICAgICAgIDxmZU9mZnNldCBkeD0iMCIgZHk9IjAiIGluPSJzaGFkb3dTcHJlYWRPdXRlcjEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIj48L2ZlT2Zmc2V0PgogICAgICAgICAgICA8ZmVNb3JwaG9sb2d5IHJhZGl1cz0iMS41IiBvcGVyYXRvcj0iZXJvZGUiIGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJzaGFkb3dJbm5lciI+PC9mZU1vcnBob2xvZ3k+CiAgICAgICAgICAgIDxmZU9mZnNldCBkeD0iMCIgZHk9IjAiIGluPSJzaGFkb3dJbm5lciIgcmVzdWx0PSJzaGFkb3dJbm5lciI+PC9mZU9mZnNldD4KICAgICAgICAgICAgPGZlQ29tcG9zaXRlIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIGluMj0ic2hhZG93SW5uZXIiIG9wZXJhdG9yPSJvdXQiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIj48L2ZlQ29tcG9zaXRlPgogICAgICAgICAgICA8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIzIiBpbj0ic2hhZG93T2Zmc2V0T3V0ZXIxIiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiPjwvZmVHYXVzc2lhbkJsdXI+CiAgICAgICAgICAgIDxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAwLjA4NjI3NDUwOTggICAwIDAgMCAwIDAuNTMzMzMzMzMzICAgMCAwIDAgMCAwLjkxNzY0NzA1OSAgMCAwIDAgMC4zIDAiIHR5cGU9Im1hdHJpeCIgaW49InNoYWRvd0JsdXJPdXRlcjEiPjwvZmVDb2xvck1hdHJpeD4KICAgICAgICA8L2ZpbHRlcj4KICAgICAgICA8cmVjdCBpZD0icGF0aC00IiB4PSI2LjAxNTM5ODk5IiB5PSI2IiB3aWR0aD0iNi4wMTUzOTg5OSIgaGVpZ2h0PSI2IiByeD0iMyI+PC9yZWN0PgogICAgICAgIDxmaWx0ZXIgeD0iLTE2Ni4yJSIgeT0iLTE2Ni43JSIgd2lkdGg9IjQzMi41JSIgaGVpZ2h0PSI0MzMuMyUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImZpbHRlci01Ij4KICAgICAgICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMSIgaW49IlNvdXJjZUdyYXBoaWMiPjwvZmVHYXVzc2lhbkJsdXI+CiAgICAgICAgPC9maWx0ZXI+CiAgICAgICAgPGZpbHRlciB4PSItMjI0LjQlIiB5PSItMjI1LjAlIiB3aWR0aD0iNTQ4LjglIiBoZWlnaHQ9IjU1MC4wJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iZmlsdGVyLTYiPgogICAgICAgICAgICA8ZmVNb3JwaG9sb2d5IHJhZGl1cz0iMC41IiBvcGVyYXRvcj0iZGlsYXRlIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93U3ByZWFkT3V0ZXIxIj48L2ZlTW9ycGhvbG9neT4KICAgICAgICAgICAgPGZlT2Zmc2V0IGR4PSIwIiBkeT0iMCIgaW49InNoYWRvd1NwcmVhZE91dGVyMSIgcmVzdWx0PSJzaGFkb3dPZmZzZXRPdXRlcjEiPjwvZmVPZmZzZXQ+CiAgICAgICAgICAgIDxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjMiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSI+PC9mZUdhdXNzaWFuQmx1cj4KICAgICAgICAgICAgPGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAuMDg2Mjc0NTA5OCAgIDAgMCAwIDAgMC41MzMzMzMzMzMgICAwIDAgMCAwIDAuOTE3NjQ3MDU5ICAwIDAgMCAxIDAiIHR5cGU9Im1hdHJpeCIgaW49InNoYWRvd0JsdXJPdXRlcjEiIHJlc3VsdD0ic2hhZG93TWF0cml4T3V0ZXIxIj48L2ZlQ29sb3JNYXRyaXg+CiAgICAgICAgICAgIDxmZU1vcnBob2xvZ3kgcmFkaXVzPSIwLjUiIG9wZXJhdG9yPSJkaWxhdGUiIGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJzaGFkb3dTcHJlYWRPdXRlcjIiPjwvZmVNb3JwaG9sb2d5PgogICAgICAgICAgICA8ZmVPZmZzZXQgZHg9IjAiIGR5PSIwIiBpbj0ic2hhZG93U3ByZWFkT3V0ZXIyIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMiI+PC9mZU9mZnNldD4KICAgICAgICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMyIgaW49InNoYWRvd09mZnNldE91dGVyMiIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIyIj48L2ZlR2F1c3NpYW5CbHVyPgogICAgICAgICAgICA8ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMC4wODYyNzQ1MDk4ICAgMCAwIDAgMCAwLjUzMzMzMzMzMyAgIDAgMCAwIDAgMC45MTc2NDcwNTkgIDAgMCAwIDAuMyAwIiB0eXBlPSJtYXRyaXgiIGluPSJzaGFkb3dCbHVyT3V0ZXIyIiByZXN1bHQ9InNoYWRvd01hdHJpeE91dGVyMiI+PC9mZUNvbG9yTWF0cml4PgogICAgICAgICAgICA8ZmVNZXJnZT4KICAgICAgICAgICAgICAgIDxmZU1lcmdlTm9kZSBpbj0ic2hhZG93TWF0cml4T3V0ZXIxIj48L2ZlTWVyZ2VOb2RlPgogICAgICAgICAgICAgICAgPGZlTWVyZ2VOb2RlIGluPSJzaGFkb3dNYXRyaXhPdXRlcjIiPjwvZmVNZXJnZU5vZGU+CiAgICAgICAgICAgIDwvZmVNZXJnZT4KICAgICAgICA8L2ZpbHRlcj4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSLnlKjmiLfkuK3lv4MiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLlrr3lsY8t6aaW6aG1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjU5NC4wMDAwMDAsIC0yMjkuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSLnvJbnu4QtNDkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI1NDUuMTcwMDAwLCAxNzUuNjc3NzE0KSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0i57yW57uELTUxIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1OC44MzAwMDAsIDYzLjMyMjI4NikiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSLnn6nlvaIiIG9wYWNpdHk9IjAuNyIgZmlsdGVyPSJ1cmwoI2ZpbHRlci0yKSI+CiAgICAgICAgICAgICAgICAgICAgICAgIDx1c2UgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMSIgZmlsdGVyPSJ1cmwoI2ZpbHRlci0zKSIgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IHN0cm9rZT0iIzZGOUFCRiIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtbGluZWpvaW49InNxdWFyZSIgeD0iMC41IiB5PSIwLjUiIHdpZHRoPSIxNy4wNDYxOTciIGhlaWdodD0iMTciIHJ4PSI4LjUiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9IuefqeW9oiIgZmlsdGVyPSJ1cmwoI2ZpbHRlci01KSI+CiAgICAgICAgICAgICAgICAgICAgICAgIDx1c2UgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMSIgZmlsdGVyPSJ1cmwoI2ZpbHRlci02KSIgeGxpbms6aHJlZj0iI3BhdGgtNCI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgICAgIDx1c2UgZmlsbD0iIzk1RTJGMCIgZmlsbC1ydWxlPSJldmVub2RkIiB4bGluazpocmVmPSIjcGF0aC00Ij48L3VzZT4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==',
              symbol: 'image://data:image/png;base64,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',
              itemStyle: {
                borderColor: 'rgba(230, 240, 255, 0.2)',
                borderWidth: 12,
                color: '#70FFFF',
                opacity: 1
              },
              z: 2
            }
          ]
        }
        this.eChartsData1 = this.$echarts.init(document.getElementById('scientificResearchProject-eCharts-1'))
        this.eChartsData1.clear()
        this.eChartsData1.setOption(option)
        this.eChartsTimer()
      },
      eChartsTimer() {
        let self = this
        self.eChartsTimerData = window.setInterval(() => {
          eChartsCarousel()
        }, this.eChartsCarouselTime)
        function eChartsCarousel() {
          if (self.eChartsCarouselIndex < self.barMaxList.length-1) {
            self.eChartsCarouselIndex++
          }else{
            self.$set(self, 'eChartsCarouselIndex', 0)
          }
          if(self.barList[0]){
            self.$set(self,'barList',self.barMaxList[self.eChartsCarouselIndex]);
            self.eChartsMethod1();
            self.eChartsMethod2();
            self.eChartsMethod3();
          }
        }
      },
      eChartsMethod2() {
        const colorList = ['#00B312', '#FFE019', '#FF9718', '#109BFF', '#00FFFF', '#9956FF', '#FF5D5D']
        let option = {
          tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(9,40,84,0.8)',
            borderColor: 'rgba(9,40,84,0.8)',
            textStyle: {
              fontSize: 20,
              color: '#fff'
            },
            formatter: function(params) {
              return ('<span style="margin-right: 5px; border-radius: 50%; display: inline-block; width:14px; height: 14px; vertical-align: middle; background:linear-gradient( ' + params.color.colorStops[0].color + ', ' + params.color.colorStops[1].color + ');"></span>' + params.name + '&nbsp;&nbsp;<span style=\'font-weight:bold\'>' + params.value + '</span>')
            }
          },
          polar: {},
          angleAxis: {
            interval: 1,
            type: 'category',
            data: [],
            z: 10,
            axisLine: {
              show: false,
              lineStyle: {
                color: '#0B4A6B',
                width: 1,
                type: 'solid'
              }
            },
            axisLabel: {
              show: false,
              interval: 0,
              color: '#0B4A6B',
              margin: 8,
              fontSize: 20
            }
          },
          radiusAxis: {
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              formatter: '{value} %',
              show: false,
              padding: [0, 0, 20, 0],
              color: '#0B3E5E',
              fontSize: 20
            }
          },
          calculable: true,
          series: [{
            type: 'pie',
            center: ['50%', '53%'],
            radius: ['55%', '70%'],
            zlevel: 10,
            label: {
              show: true,
              formatter: function(param) {
                if (param.dataIndex == 0) {
                  return ('{a|' + param.name + '}' + '{b|' + ' ' + param.value + '}\n\n')
                } else if (param.dataIndex == 1) {
                  return ('{a|' + param.name + '}' + '{c|' + ' ' + param.value + '}\n\n')
                } else if (param.dataIndex == 2) {
                  return ('{a|' + param.name + '}' + '{d|' + ' ' + param.value + '}\n\n')
                } else if (param.dataIndex == 3) {
                  return ('{a|' + param.name + '}' + '{e|' + ' ' + param.value + '}\n\n')
                } else if (param.dataIndex == 4) {
                  return ('{a|' + param.name + '}' + '{f|' + ' ' + param.value + '}\n\n')
                } else if (param.dataIndex == 5) {
                  return ('{a|' + param.name + '}' + '{g|' + ' ' + param.value + '}\n\n')
                } else if (param.dataIndex == 6) {
                  return ('{a|' + param.name + '}' + '{h|' + ' ' + param.value + '}\n\n')
                }
              },
              padding: [0, -40],
              height: 50,
              rich: {
                a: {
                  color: '#fff',
                  fontSize: '16'
                },
                b: {
                  color: '#00B312',
                  fontSize: '18'
                },
                c: {
                  color: '#FFE019',
                  fontSize: '18'
                },
                d: {
                  color: '#FF9718',
                  fontSize: '18'
                },
                e: {
                  color: '#109BFF',
                  fontSize: '18'
                },
                f: {
                  color: '#00FFFF',
                  fontSize: '18'
                },
                g: {
                  color: '#9956FF',
                  fontSize: '18'
                },
                h: {
                  color: '#FF5D5D',
                  fontSize: '18'
                }
              },
              position: 'outside'
            },
            emphasis: {
              label: {
                show: true
              },
              labelLine: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                borderColor: '#01132a',
                boderRadius: 10,
                borderWidth: 5,
                color: function(params) {
                  return colorList[params.dataIndex]
                }
              }
            },
            labelLine: {
              show: true,
              length: 14,
              length2: 70,
              lineStyle: {
                type: 'dashed',
                width: 2
              }
            },
            data: this.pieData
          }, {
            // 外层刻度
            name: '',
            type: 'gauge',
            // splitNumber: 360, // 刻度数量
            radius: '50%', // 图表尺寸
            center: ['50%', '53%'],
            startAngle: 0,
            endAngle: 360,
            axisLine: {
              show: false,
              lineStyle: {
                width: 0,
                shadowBlur: 0,
                color: [
                  [1, '#84CDFF']
                ]
              }
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#84CDFF' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#84CDFF' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                },
                width: 2 //宽度
              },
              length: 10, //长度
              splitNumber: 8 //密度
            },
            splitLine: {
              show: true,
              length: 2,
              lineStyle: {
                color: 'auto'
              }
            },
            axisLabel: {
              show: false
            }
          }]
        }
        this.eChartsData2 = this.$echarts.init(document.getElementById('scientificResearchProject-eCharts-2'))
        this.eChartsData2.clear()
        this.eChartsData2.setOption(option)
      },
      eChartsMethod3() {
        let option = {
          tooltip: {
            show: false // 弹层数据去掉
          },
          legend: {
            show: false
          },
          radar: {
            center: ['50%', '45%'], // 外圆的位置
            radius: '70%',
            // startAngle:0,
            startAngle: 90 + (365 / this.radarNameList.length),
            splitNumber: 5,//网格数量
            name: {
              textStyle: {
                color: '#fff',
                fontSize: 16,
                fontWeight: 400,
                fontFamily: 'PingFangSC-Regular,PingFang SC',
                fontStyle: 'normal'
              }
            },
            indicator: this.radarNameList,
            splitArea: {
              areaStyle: {
                //雷达间隔背景色
                color: ['#012149', '#012a5e']
              }
            },
            axisLine: {
              // 指向外圈文本的分隔线样式
              lineStyle: {
                color: 'rgba(255,255,255,0)'
              }
            },
            splitLine: {
              lineStyle: {
                type: 'solid',
                color: '#04386a', // 分隔线颜色
                width: 2 // 分隔线线宽
              }
            }
          },
          series: {
            type: 'radar',
            data: [{
              value: this.radarDataList,
              name: '',
              areaStyle: {
                normal: {
                  color: {
                    type: 'radial',
                    x: 0.5,
                    y: 0.5,
                    r: 0.5,
                    colorStops: [{
                      offset: 0,
                      color: 'rgba(0,194,255, 0.14)' // 0% 处的颜色
                    }, {
                      offset: 0.15,
                      color: 'rgba(0,194,255, 0.14)' // 100% 处的颜色
                    }, {
                      offset: 0.75,
                      color: 'rgba(0,194,255, 0.4)' // 100% 处的颜色
                    }, {
                      offset: 1,
                      color: 'rgba(0,194,255, 0.8)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                  }
                }
              },
              symbolSize: [6, 6],
              lineStyle: { //边缘颜色
                color: 'rgba(0, 194, 255, 0.8)'
              },
              //雷达线颜色
              itemStyle: {
                color: '#00FFFF',
                borderColor: '#00FFFF',
                borderWidth: 1,
                shadowBlur: 8,
                shadowColor: '#00FFFF'
              }
            }]
          }
        }
        this.eChartsData3 = this.$echarts.init(document.getElementById('scientificResearchProject-eCharts-3'))
        this.eChartsData3.clear()
        this.eChartsData3.setOption(option)
      },
      // 处理浮点数精度的加法
      precisionAdd(num1, num2) {
        const multiplier = Math.pow(10, Math.max(this.getDecimalPlaces(num1), this.getDecimalPlaces(num2)))
        return (Math.round(num1 * multiplier) + Math.round(num2 * multiplier)) / multiplier
      },
      // 获取数字的小数位数
      getDecimalPlaces(num) {
        const str = num.toString()
        const decimalIndex = str.indexOf('.')
        return decimalIndex === -1 ? 0 : str.length - decimalIndex - 1
      },
      preciseDivide(dividend, divisor) {
        const dividendStr = dividend.toString()
        const divisorStr = divisor.toString()
        const dividendDecimals = dividendStr.includes('.') ? dividendStr.split('.')[1].length : 0
        const divisorDecimals = divisorStr.includes('.') ? divisorStr.split('.')[1].length : 0
        const maxDecimals = Math.max(dividendDecimals, divisorDecimals)
        const adjustedDividend = parseInt(dividendStr.replace('.', ''), 10) * Math.pow(10, maxDecimals - dividendDecimals)
        const adjustedDivisor = parseInt(divisorStr.replace('.', ''), 10) * Math.pow(10, maxDecimals - divisorDecimals)
        const result = adjustedDividend / adjustedDivisor
        return result / Math.pow(10, maxDecimals * 2)
      }
    },
    destroyed() {
      //清除定时器
      clearInterval(this.getDataTimer)
      clearInterval(this.eChartsTimerData)
    }
  }
</script>
<style scoped lang="scss">
  .scientificResearchProject {
    /*width: 826px;*/
    /*height: 707px;*/
    /*分辨率调整*/
    width: 1082px;
    height: 957px;
    overflow: hidden;
    background-image: url("../../assets/ZDimages/img_kyxm_bg@1x.png");
    background-size: 100% 100%;
    .scientificResearchProject-page {
      /*width: 826px;*/
      /*height: 647px;*/
      /*分辨率调整*/
      width: 1082px;
      height: 897px;
      overflow: hidden;
      display: flex;
      position: relative;
      .left-max-big-box {
        width: 451px;
        height: 647px;
        /*分辨率调整*/
        margin-top:130px;
        margin-left:20px;
      }
      .right-max-big-box {
        width: 475px;
        /*height: 647px;*/
        .right-top-big-box {
          width: 475px;
          height: 320px;
          /*分辨率调整*/
          margin:100px 0 0 60px;
        }
        .right-bottom-big-box {
          width: 475px;
          height: 327px;
          /*分辨率调整*/
          margin:80px 0 0 60px;
        }
      }
      .position-top-right-p {
        z-index: 2;
        width: 100px;
        position: absolute;
        /*top: 145px;*/
        /*right: 187px;*/
        /*分辨率调整*/
        top: 245px;
        right: 264px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 40px;
        font-weight: bold;
        background: -webkit-linear-gradient(#FFFFFF, #0095FF);
        -webkit-background-clip: text;
        color: transparent;
        font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
      }
      .position-img {
        z-index: 1;
        position: absolute;
        /*top: 111px;*/
        /*right: 178px;*/
        /*分辨率调整*/
        top: 210px;
        right: 256px;
      }
    }
  }
</style>