pc_kingdee_large_screen/investmentNew/js/index.js

let app = new Vue({
  el: "#app",
  data () {
    return {
      count: 0, //重点项目两线指标轮到哪个
      list: [], //重点项目两线指标数组
      countType: 0, //重点项目两线指标数组
      mapShow: true, // false为中国地图 true为山西地图
      leftEcharts1: "",
      leftEcharts2: "",
      leftEcharts3: "",
      leftEcharts4: "",
      leftEcharts5: "",
      leftEcharts6: "",
      leftEcharts7: "",
      leftEcharts8: "",
      leftEcharts9: "",
      leftEcharts10: "",
      leftEcharts11: "",
      leftEcharts12: '',
      leftEcharts13: '',
      leftEcharts14: '',
      leftEcharts15: '',
      echartR2Fd: true, // 投后进度成本偏差防抖
      leftEcharts16: '', // 中国地图背景地球
      rightEcharts1: '', // 投后进度成本偏差
      shanxiMap: "", // 山西地图
      chinaMap: '', // 中国地图
      industryProportion: 1, // 主辅业占比轮播
      industryLayout: 0, //产业布局分析
      time1: "", // 4秒定时器
      time2: "", // 针对投前产业布局分析的定时器
      projectNum: 0, // 项目阶段分析指示器
      projecList: [ //项目阶段分析内容距离
        [
          { name: '特别监管', value: '1230', value2: '1036' },
          { name: '备案', value: '1230', value2: '1036' },
          { name: '项目储备', distance: '250px' }
        ],
        [
          { name: '特别监管', value: '1230', value2: '1036' },
          { name: '备案', value: '1230', value2: '1036' },
          { name: '项目储备', distance: '370px' }
        ],
        [
          { name: '特别监管', value: '1230', value2: '1036' },
          { name: '备案', value: '1230', value2: '1036' },
          { name: '项目储备', distance: '490px' }
        ],
        [
          { name: '特别监管', value: '1230', value2: '1036' },
          { name: '备案', value: '1230', value2: '1036' },
          { name: '项目储备', distance: '610px' }
        ],
        [
          { name: '特别监管', value: '1230', value2: '1036' },
          { name: '备案', value: '1230', value2: '1036' },
          { name: '项目储备', distance: '350px' }
        ],
        [
          { name: '特别监管', value: '1230', value2: '1036' },
          { name: '备案', value: '1230', value2: '1036' },
          { name: '项目储备', distance: '470px' }
        ],
        [
          { name: '特别监管', value: '1230', value2: '1036' },
          { name: '备案', value: '1230', value2: '1036' },
          { name: '项目储备', distance: '590px' }
        ],
        [
          { name: '特别监管', value: '1230', value2: '1036' },
          { name: '备案', value: '1230', value2: '1036' },
          { name: '项目储备', distance: '710px' }
        ],
      ],
      storageRecordConfig: {
        waitTime: "2000",
        hoverPause: true,
        header: ["企业集团", "项目名 ", "投资总额"],
        headerHeight: 80,
        headerBGC: '#69C0FF20',
        oddRowBGC: '#011e4800',
        evenRowBGC: '#69C0FF20',
        // oddRowBGC: '#05507b33',
        rowNum: 6,
        columnWidth: [150, 450, 150],
        align: ["center", "center", "center"],
        data: [
          ["国际能源", "娄烦县120MW智慧光伏发电项目+10%储能", "6.78亿元"],
          ["国际能源", "平朔矿区150MW农光储氢一体化项目", "7.84亿元"],
          ["汾酒集团", "汾酒2030技改原酒产储能扩建项目（一期）", "91.02亿元"],
          [
            "大地控股",
            "山西大地控股忻州新店矿业有限公司投资建设年产800万吨精品砂石骨料项目",
            "8.67亿元",
          ],
          ["潞安化工", "分布式光伏发电项目", "2.01亿元"],
          ["太重集团", "设立太重（大同）新能源产业投资公司", "0.30亿元"],
          [
            "大地控股",
            "山西大地宏翔环保科技有限公司电厂固废资源化综合利用建设项目",
            "3.60亿元",
          ],
          [
            "大地控股",
            "山西大地海科环保科技有限公司电厂固废资源化综合利用建设项目",
            "3.11亿元",
          ],
          ["汾酒集团", "保健酒园区新增原酒产能项目", "4.98亿元"],
          ["汾酒集团", "白玉酒厂改扩建项目", "4.96亿元"],
          ["华阳新材", "5GW高效光伏组件制造项目", "4.82亿元"],
          ["华新燃气", "吉县—延长输气管道项目（一期工程）", "3.54亿元"],
          ["太重集团", "建设液压挖掘机配套油缸项目", "2.60亿元"],
          [
            "华远陆港",
            "物产集团参股设立项目公司投资建设山西物产万科（太原）综合物流产业园项目",
            "6.60亿元",
          ],
          ["太重集团", "设立昔阳县晶能新能源有限公司", "0.50亿元"],
          ["山西建投", "设立山西低碳环保产业集团有限公司", "30.00亿元"],
          [
            "山西建投",
            "设立山西省太忻经济一体化发展投资集团有限公司",
            "30.00亿元",
          ],
          ["华新燃气", "设立山西华新液化天然气集团有限公司", "3.00亿元"],
          ["交控集团", "设立山西交控新能源发展有限公司", "3.00亿元"],
        ],
      },
      storageRecordConfig2: {
        header: ['企业集团', '项目名称', '投资金额'],
        headerBGC: '#69C0FF20',
        oddRowBGC: '#011e4800',
        evenRowBGC: '#69C0FF20',
        headerHeight: '80',
        rowNum: 6,
        // columnWidth: [250],
        align: ['center', 'center', 'center'],
        data: [
          ["战略性新兴产业", "新材料", "20,340.00"],
          ["战略性新兴产业", "新材料", "20,340.00"],
          ["战略性新兴产业", "新材料", "20,340.00"],
          ["战略性新兴产业", "新材料", "20,340.00"],
          ["战略性新兴产业", "新材料", "20,340.00"],
          ["战略性新兴产业", "新材料", "20,340.00"],
          ["战略性新兴产业", "新材料", "20,340.00"],
          ["战略性新兴产业", "新材料", "20,340.00"],
          ["战略性新兴产业", "新材料", "20,340.00"],
        ],
      },
      meansList: [
        {
          label: "初步设计",
          value: "106",
        },
        {
          label: "详细设计",
          value: "103",
        },
        {
          label: "施工",
          value: "62",
        },
        {
          label: "完工",
          value: "35",
        },
        {
          label: "验收",
          value: "42",
        },
        {
          label: "结算",
          value: "33",
        },
      ],
      stockRightList: [
        {
          label: "前期准备",
          value: "66",
        },
        {
          label: "变更登记",
          value: "77",
        },
      ],
      costList: [
        {
          num: 160,
          value: 284,
          status: "正偏差",
        },
        {
          num: 280,
          value: 129,
          status: "容差内",
        },
        {
          num: 103,
          value: 1082,
          status: "负偏差",
        },
      ],
      investData: {
        investList: [
          {
            name: "大地控股",
            yse: "26.79",
            yqhte: "9.64",
            czrde: "121.59",
            jse: "120.13",
            fke: "36.4",
            url: "./img/logos/logo15.png",
          },
          {
            name: "云时代",
            yse: "21.79",
            yqhte: "9.64",
            czrde: "121.59",
            jse: "120.13",
            fke: "36.4",
            url: "./img/logos/logo16.png",
          },
          {
            name: "华舰体育",
            yse: "26.79",
            yqhte: "9.64",
            czrde: "121.59",
            jse: "120.13",
            fke: "36.4",
            url: "./img/logos/logo17.png",
          },
          {
            name: "神农科技",
            yse: "26.79",
            yqhte: "9.64",
            czrde: "121.59",
            jse: "120.13",
            fke: "36.4",
            url: "./img/logos/logo18.png",
          },
          {
            name: "山西焦煤",
            yse: "26.79",
            yqhte: "9.64",
            czrde: "121.59",
            jse: "120.13",
            fke: "36.4",
            url: "./img/logos/logo1.png",
          },
          {
            name: "晋能控股",
            yse: "26.79",
            yqhte: "9.64",
            czrde: "121.59",
            jse: "120.13",
            fke: "36.4",
            url: "./img/logos/logo2.png",
          },
          {
            name: "华阳新材",
            yse: "26.79",
            yqhte: "9.64",
            czrde: "121.59",
            jse: "120.13",
            fke: "36.4",
            url: "./img/logos/logo3.png",
          },
          {
            name: "潞安化工",
            yse: "26.79",
            yqhte: "9.64",
            czrde: "121.59",
            jse: "120.13",
            fke: "36.4",
            url: "./img/logos/logo4.png",
          },
          {
            name: "华新燃气",
            yse: "26.79",
            yqhte: "9.64",
            czrde: "121.59",
            jse: "120.13",
            fke: "36.4",
            url: "./img/logos/logo5.png",
          },
          {
            name: "太重集团",
            yse: "26.79",
            yqhte: "9.64",
            czrde: "121.59",
            jse: "120.13",
            fke: "36.4",
            url: "./img/logos/logo6.png",
          },
          {
            name: "国际能源",
            yse: "26.79",
            yqhte: "9.64",
            czrde: "121.59",
            jse: "120.13",
            fke: "36.4",
            url: "./img/logos/logo7.png",
          },
          {
            name: "华远陆港",
            yse: "26.79",
            yqhte: "9.64",
            czrde: "121.59",
            jse: "120.13",
            fke: "36.4",
            url: "./img/logos/logo8.png",
          },
          {
            name: "水控集团",
            yse: "26.79",
            yqhte: "9.64",
            czrde: "121.59",
            jse: "120.13",
            fke: "36.4",
            url: "./img/logos/logo9.png",
          },
          {
            name: "文旅集团",
            yse: "26.79",
            yqhte: "9.64",
            czrde: "121.59",
            jse: "120.13",
            fke: "36.4",
            url: "./img/logos/logo10.png",
          },
          {
            name: "交控集团",
            yse: "26.79",
            yqhte: "9.64",
            czrde: "121.59",
            jse: "120.13",
            fke: "36.4",
            url: "./img/logos/logo11.png",
          },
          {
            name: "航产集团",
            yse: "26.79",
            yqhte: "9.64",
            czrde: "121.59",
            jse: "120.13",
            fke: "36.4",
            url: "./img/logos/logo12.png",
          },
          {
            name: "山西建投",
            yse: "26.79",
            yqhte: "9.64",
            czrde: "121.59",
            jse: "120.13",
            fke: "36.4",
            url: "./img/logos/logo13.png",
          },
          {
            name: "汾酒集团",
            yse: "26.79",
            yqhte: "9.64",
            czrde: "121.59",
            jse: "120.13",
            fke: "36.4",
            url: "./img/logos/logo14.png",
          },
        ],
      },
      riskData: {
        x: [
          { name: "大地控股", value: [14, 13, 6, 15, 13, 4] },
          { name: "云时代", value: [15, 12, 12, 10, 24, 6] },
          { name: "华舰体育", value: [14, 13, 6, 15, 13, 4] },
          { name: "神农科技", value: [14, 13, 6, 15, 13, 4] },
          { name: "山西焦煤", value: [14, 13, 6, 15, 13, 4] },
          { name: "晋能控股", value: [14, 13, 6, 15, 13, 4] },
          { name: "华阳新材", value: [14, 13, 6, 15, 13, 4] },
          { name: "潞安化工", value: [14, 13, 6, 15, 13, 4] },
          { name: "华新燃气", value: [14, 13, 6, 15, 13, 4] },
          { name: "太重集团", value: [14, 13, 6, 15, 13, 4] },
          { name: "国际能源", value: [14, 13, 6, 15, 13, 4] },
          { name: "华远陆港", value: [14, 13, 6, 15, 13, 4] },
          { name: "水控集团", value: [14, 13, 6, 15, 13, 4] },
          { name: "文旅集团", value: [14, 13, 6, 15, 13, 4] },
          { name: "交控集团", value: [14, 13, 6, 15, 13, 4] },
          { name: "航产集团", value: [14, 13, 6, 15, 13, 4] },
          { name: "山西建投", value: [14, 13, 6, 15, 13, 4] },
          { name: "汾酒集团", value: [14, 13, 6, 15, 13, 4] },
        ],
        y1: [
          120, 110, 200, 220, 123, 345, 323, 123, 233, 234, 123, 143, 120, 110,
          20, 220, 123, 345,
        ],
        y2: [
          120, 110, 210, 220, 123, 345, 323, 123, 233, 234, 123, 143, 120, 110,
          20, 220, 123, 345,
        ],
        y3: [
          120, 110, 230, 220, 123, 345, 323, 123, 233, 234, 123, 143, 120, 110,
          20, 220, 123, 345,
        ],
      },
      inner: 0,
      innerDeg: 0,
      timer: null, // 两秒定时器
      witchs: 0,
      topIndex: 0,
      echartR1Fd1: true,
      echartR2Fd2: true,
      echartC1Fd1:true,
      r3Index: 0,
      riskData1: {
        x: [
          "大地控股",
          "云时代",
          "华舰体育",
          "神农科技",
          "山西焦煤",
          "晋能控股",
          "华阳新材",
          "潞安化工",
          "华新燃气",
          "太重集团",
          "国际能源",
          "华远陆港",
          "水控集团",
          "文旅集团",
          "交控集团",
          "航产集团",
          "山西建投",
          "汾酒集团",
        ],
        y1: [
          100, 45, 67, 110, 108, 120, 110, 45, 67, 110, 108, 34, 100, 45, 67,
          110, 108, 34,
        ],
        y2: [
          120, 50, 67, 130, 56, 233, 100, 78, 98, 100, 120, 78, 120, 90, 56,
          120, 110, 78,
        ],
        y3: [
          130, 76, 67, 120, 89, 111, 87, 123, 56, 65, 45, 98, 230, 78, 99, 130,
          56, 98,
        ],
        y4: [
          90, 100, 67, 90, 110, 120, 34, 231, 34, 78, 78, 100, 110, 120, 67, 89,
          78, 110,
        ],
        y5: [
          110, 110, 67, 110, 120, 95, 78, 45, 120, 110, 98, 233, 100, 45, 67,
          98, 98, 34,
        ],
      },
    };
  },
  created () { },
  beforeDestroy () {
    clearInterval(this.timer);
    clearInterval(this.time1);
    clearInterval(this.time2);
  },
  mounted () {
    let that = this
    this.time4s();
    this.timeNs();
    this.filterLpData();
    this.lpRotate();
    setTimeout(() => {
      if (that.mapShow) {
        that.leftEcharts12Fun()
        that.leftEcharts14Fun()
        that.leftEcharts9Fun()
        that.leftEcharts15Fun()
        that.leftEcharts13Fun()
        that.shanxiEchartsFun()
      } else {
        that.chinaEchartsFun()
        that.leftEcharts16Fun() // 中国地图背景地球
      }
      this.leftEcharts1Fun();
      this.leftEcharts2Fun();
      this.leftEcharts3Fun();
      this.leftEcharts4Fun();
      this.leftEcharts5Fun();
      this.leftEcharts6Fun();
      this.leftEcharts7Fun();
      this.leftEcharts8Fun();
      this.leftEcharts10Fun();
      this.leftEcharts11Fun();
      this.rightEcharts1Fun();
      this.initChartR2();
      this.initChartR4();
    });
  },
  methods: {
    // 解决乘法失去精度
    numMulti (num1, num2) {
      var baseNum = 0;
      try {
        baseNum += num1.toString().split(".")[1].length;
      } catch (e) {
      }
      try {
        baseNum += num2.toString().split(".")[1].length;
      } catch (e) {
      }
      return Number(num1.toString().replace(".", "")) * Number(num2.toString().replace(".", "")) / Math.pow(10, baseNum);
    },
    // 解决减法失去精度
    numSub (num1, num2) {
      var baseNum, baseNum1, baseNum2;
      var precision;// 精度
      try {
        baseNum1 = num1.toString().split(".")[1].length;
      } catch (e) {
        baseNum1 = 0;
      }
      try {
        baseNum2 = num2.toString().split(".")[1].length;
      } catch (e) {
        baseNum2 = 0;
      }
      baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
      precision = (baseNum1 >= baseNum2) ? baseNum1 : baseNum2;
      return ((num1 * baseNum - num2 * baseNum) / baseNum).toFixed(precision);
    },
    rightEcharts1Fun () {
      let that = this
      let sumA = 42
      // 所有在100范围外的全部变成0，其他值相应增加/减少sumA
      right5.forEach(item => {
        item.forEach(item2 => {
          if (Number(item2[1]) < 0) {
            item2[1] = that.$set(item2, 1, Number(that.numSub(item2[1], sumA)))
          } else if (Number(item2[1]) > 0) {
            item2[1] = that.$set(item2, 1, Number(item2[1]) + sumA)
          }
          if (Number(item2[1]) < (-100 - sumA)) {
            item2[1] = that.$set(item2, 1, 0)
            item2[1] = that.$set(item2, 2, 0)
          } else if (Number(item2[1]) > (100 + sumA)) {
            item2[1] = that.$set(item2, 1, 0)
            item2[1] = that.$set(item2, 2, 0)
          }
        })
      })
      const itemStyle = {
        // opacity: 0.8,
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        shadowColor: 'rgba(0,0,0,0.3)'
      };
      that.rightEcharts1 = echarts.init(this.$refs['rightEcharts1'])
      that.rightEcharts1.on('showTip', (params) => {
        // 如果是7或者15并且满足防抖则切换
        if ((params.dataIndex == 5 || params.dataIndex == 11) && that.echartR2Fd) {
          that.echartR2Fd = false
          setTimeout(() => {
            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
            that.rightEcharts1.setOption(option);
            // 防止勿刷新做的防抖
            setTimeout(() => {
              that.echartR2Fd = true
            }, 2000)
          }, 1900);
          // 如果是17表示到了最后一个，那么重新来一遍
        } else if (params.dataIndex == 17 && that.echartR2Fd) {
          that.echartR2Fd = false
          setTimeout(() => {
            option.dataZoom[0].endValue = 0
            option.dataZoom[0].startValue = 5
            that.rightEcharts1.setOption(option);
            // 防止勿刷新做的防抖
            setTimeout(() => {
              that.echartR2Fd = true
            }, 2000)
          }, 1900)
        }
      })
      let option = {
        color: [{
          type: 'radial', // linear 线性渐变  radial径向渐变
          x: 0.5,
          y: 0.5,
          r: 0.5,
          colorStops: [{
            offset: 0, color: '#58F7DF' // 0% 处的颜色
          }, {
            offset: 1, color: '#4ECFBB' // 100% 处的颜色
          }]
        },
        {
          type: 'radial', // linear 线性渐变  radial径向渐变
          x: 0.5,
          y: 0.5,
          r: 0.5,
          colorStops: [{
            offset: 0, color: '#7FD9FF' // 0% 处的颜色
          }, {
            offset: 1, color: '#40A9FF' // 100% 处的颜色
          }]
        }, {
          type: 'radial', // linear 线性渐变  radial径向渐变
          x: 0.5,
          y: 0.5,
          r: 0.5,
          colorStops: [{
            offset: 0, color: '#FF9592' // 0% 处的颜色
          }, {
            offset: 1, color: '#D2706D' // 100% 处的颜色
          }]
        }
        ],
        dataZoom: [
          {
            // start: 9,//默认为@
            // end: 100,//黑认认为1@0
            type: "slider",
            show: false,
            // xAxisIndex: [0]
            handlesize: 0,//滑动条的 左右2个滑动条的大小
            startValue: 5,// 初始显示值
            endValue: 0,// 结束显示值
            height: 10,//组件高度
            left: "5%",
            right: "4%",//右边的距离
            bottom: "25%",//底边的距离
            borderColor: "#939",
            fillerColor: "#269cdb",
            borderRadius: 5,
            backgroundColor: "#33384b",//两边未选中的滑动条区域的额色
            showDataShadow: false,//是否显示数据阴影
            showDetail: false,//即拖拽时候是否显示详细数值信息 
            truerealtime: true,//是否实时更新
            filterMode: "filter"
          }, {
            type: 'inside',
            show: true,
            start: 1,
            end: 100,
            zoomOnMouseWheel: false,  //滚轮是否触发缩放
            moveOnMouseMove: false,  //鼠标滚轮触发滚动
          }
        ],
        legend: {
          selectedMode: false,
          top: 10,
          data: ['正偏差', '容差', '负偏差'],
          textStyle: {
            fontSize: 20,
            color: '#fff',
            fontFamily: 'Microsoft YaHei'
          }
        },
        textStyle: {
          color: '#fff',
        },
        tooltip: {
          show: true,
          trigger: "axis",
          backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
          borderColor: "rgba(50,50,50,0.7)",
          textStyle: {
            color: "#fff",
            fontStyle: "normal", // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
            fontWeight: "normal", // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
            fontSize: "28", // 文字字体大小
          },
          formatter: data => {
            return `${data[0].value[0]}<br /><span style="display:inline-block;border-radius:50%; width:20px;height:20px;background-color:${data[0].color}"></span> ${data[0].seriesName}：${that.numFormat(data[0].data[2])}亿<br /><span style="display:inline-block;border-radius:50%; width:20px;height:20px;background-color:${data[1].color}"></span> ${data[1].seriesName}：${that.numFormat(data[1].data[2])}亿<br /><span style="display:inline-block;border-radius:50%; width:20px;height:20px;background-color:${data[2].color}"></span> ${data[2].seriesName}：${that.numFormat(data[2].data[2])}亿`
          },
          axisPointer: {
            //  // type: 'cross',',
          },
        },
        grid: {
          top: '10%',
          right: '7%',
          left: '7%',
          bottom: '5%',
        },
        yAxis: {
          min: (-101 - sumA),
          max: (101 + sumA),
          maxInterval: 1,
          splitLine: {
            show: false,
            // interval:,
            lineStyle: {
              color: '#68b4dd66',
              type: 'dashed',
            },
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            // formatter: '{value}',
            formatter (data) {
              if (data == (100 + sumA)) {
                return '100%'
              } else if (data == (-100 - sumA)) {
                return '-100%'
              } else if (data == (-5 - sumA)) {
                return '-5%'
              } else if (data == (5 + sumA)) {
                return '5%'
              }
            },
            textStyle: {
              color: '#fff',
              fontSize: '20',
              fontFamily: 'Microsoft YaHei'
            },
          },
          nameTextStyle: {
            color: '#fff',
            fontSize: 20,
            fontFamily: 'Microsoft YaHei'
          },
        },
        xAxis: {
          data: commonCompany,
          axisLine: {
            show: false, //隐藏X轴轴线
            lineStyle: {
              color: '#005094',
              width: 1,
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#68b4dd66',
              type: 'dashed',
            },
          },
          axisTick: {
            show: true, //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            // rotate: 40,
            padding: [0, 0, 0, 0],
            textStyle: {
              color: '#fff', //X轴文字颜色
              fontSize: 20,
              fontFamily: 'Microsoft YaHei'
            },
          },
        },
        series: [
          {
            name: '正偏差',
            type: 'scatter',
            itemStyle: itemStyle,
            data: right5[0],
            symbolSize: function (data) {
              if ((data[2] > 0 && data[2] < 50) || data[2] == 50) {
                return 40;
              } else if ((data[2] > 50 && data[2] < 100) || data[2] == 100) {
                return 70;
              } else if (data[2] > 100) {
                return 100;
              }
            },
            markLine: {
              symbol: 'none',
              data: [
                {
                  name: '100%',
                  yAxis: 100 + sumA,
                  lineStyle: {
                    // color: '#fff',
                  },
                  label: {
                    show: false,
                    formatter: '{b}',
                    position: 'right',
                    color: '#fff',
                    fontSize: 20,
                    label: {
                      show: false
                    }
                  },
                },
                {
                  name: '5%',
                  yAxis: 5 + sumA,
                  lineStyle: {
                    // color: '#fff',
                  },
                  label: {
                    show: false,
                    formatter: '{b}',
                    position: 'right',
                    color: '#fff',
                    fontSize: 20,
                  },
                },
                {
                  name: '-5%',
                  yAxis: -5 - sumA,
                  lineStyle: {
                    // color: '#fff',
                  },
                  label: {
                    show: false,
                    formatter: '{b}',
                    position: 'right',
                    color: '#fff',
                    fontSize: 20,
                  },
                },
                {
                  name: '100%',
                  yAxis: -100 - sumA,
                  lineStyle: {
                    // color: '#fff',
                  },
                  label: {
                    show: false,
                    formatter: '{b}',
                    position: 'right',
                    color: '#fff',
                    fontSize: 20,
                  },
                },
              ],
            },
          },
          {
            name: '容差',
            type: 'scatter',
            itemStyle: itemStyle,
            data: right5[1],
            symbolSize: function (data) {
              if ((data[2] > 0 && data[2] < 50) || data[2] == 50) {
                return 40;
              } else if ((data[2] > 50 && data[2] < 100) || data[2] == 100) {
                return 70;
              } else if (data[2] > 100) {
                return 100;
              }
            },
          },
          {
            name: '负偏差',
            type: 'scatter',
            itemStyle: itemStyle,
            data: right5[2],
            symbolSize: function (data) {
              if ((data[2] > 0 && data[2] < 50) || data[2] == 50) {
                return 40;
              } else if ((data[2] > 50 && data[2] < 100) || data[2] == 100) {
                return 70;
              } else if (data[2] > 100) {
                return 100;
              }
            },
          }
        ]
      }
      that.rightEcharts1.setOption(option)
      tools.loopShowTooltip(that.rightEcharts1, option, {
        interval: 2000,
        loopSeries: true,
      })
    },
    initChartR2 () {
      let that = this;
      that.right1Chart = echarts.init(this.$refs["echartR2"]);
      that.right1Chart.on("showTip", (params) => {
        that.r3Index = params.dataIndex;
        that.initChartR3();
        // 如果是7或者15并且满足防抖则切换
        if (
          (params.dataIndex == 5 || params.dataIndex == 11) &&
          that.echartR1Fd1
        ) {
          that.echartR1Fd1 = false;
          setTimeout(() => {
            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6;
            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6;
            that.right1Chart.setOption(option);
            // 防止勿刷新做的防抖
            setTimeout(() => {
              that.echartR1Fd1 = true;
            }, 2000);
          }, 1900);
          // 如果是17表示到了最后一个，那么重新来一遍
        } else if (params.dataIndex == 17 && that.echartR1Fd1) {
          that.echartR1Fd1 = false;
          setTimeout(() => {
            option.dataZoom[0].endValue = 0;
            option.dataZoom[0].startValue = 5;
            that.right1Chart.setOption(option);
            // 防止勿刷新做的防抖
            setTimeout(() => {
              that.echartR1Fd1 = true;
            }, 2000);
          }, 1900);
        }
      });
      let option = {
        color: [
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#07806E", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#79FFEB", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#9F7F00", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#FBE463", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#91231F", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#F98784", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          }
        ],
        dataZoom: [
          {
            // start: 9,//默认为@
            // end: 100,//黑认认为1@0
            type: "slider",
            show: false,
            // xAxisIndex: [0]
            handlesize: 0, //滑动条的 左右2个滑动条的大小
            startValue: 5, // 初始显示值
            endValue: 0, // 结束显示值
            height: 10, //组件高度
            left: "5%",
            right: "4%", //右边的距离
            bottom: "25%", //底边的距离
            borderColor: "#939",
            fillerColor: "#269cdb",
            borderRadius: 5,
            backgroundColor: "#33384b", //两边未选中的滑动条区域的额色
            showDataShadow: false, //是否显示数据阴影
            showDetail: false, //即拖拽时候是否显示详细数值信息
            truerealtime: true, //是否实时更新
            filterMode: "filter",
          },
          {
            type: "inside",
            show: true,
            start: 1,
            end: 100,
            zoomOnMouseWheel: false, //滚轮是否触发缩放
            moveOnMouseMove: false, //鼠标滚轮触发滚动
          },
        ],
        legend: {
          top: 10,
          right: 10,
          textStyle: {
            fontSize: 20,
            color: "#fff",
            fontFamily: "Microsoft YaHei",
          },
          itemStyle: {
            borderCap: "round",
          },
        },
        tooltip: {
          trigger: "item",
          show: true,
          position: "top",
          backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
          backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
          borderColor: "rgba(50,50,50,0.7)",
          textStyle: {
            color: "#fff",
            fontStyle: "normal", // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
            fontWeight: "normal", // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
            fontSize: "28", // 文字字体大小
          },
          formatter: function (p) {
            return `${p.name}<br>低风险：${that.riskData.y1[p.dataIndex]}个<br>
              中风险：${that.riskData.y2[p.dataIndex]}个<br>
              高风险：${that.riskData.y3[p.dataIndex]}个<br>
              `
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: that.riskData.x.map((item) => item.name),
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(0, 80, 148, .8)",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "#fff",
              rotate: 20,
              fontSize: 22,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              color: "#fff",
              fontSize: 22,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(104, 180, 221, .2)",
                type: "dashed",
              },
            },
          },
        ],
        series: [
          {
            name: "低风险",
            type: "bar",
            stack: "Ad",
            barWidth: 14,
            emphasis: {
              focus: "series",
            },
            itemStyle: {
              barBorderRadius: [15, 15, 15, 15],
            },
            data: that.riskData.y1,
          },
          {
            name: "中风险",
            type: "bar",
            barWidth: 14,
            stack: "Ad",
            itemStyle: {
              barBorderRadius: [15, 15, 15, 15],
            },
            emphasis: {
              focus: "series",
            },
            data: that.riskData.y2,
          },
          {
            name: "高风险",
            type: "bar",
            barWidth: 14,
            stack: "Ad",
            itemStyle: {
              barBorderRadius: [15, 15, 15, 15],
            },
            emphasis: {
              focus: "series",
            },
            data: that.riskData.y3,
          },
        ],
      };
      that.right1Chart.setOption(option);
      tools.loopShowTooltip(that.right1Chart, option, {
        interval: 2000,
        loopSeries: true,
      });
    },
    initChartR3 () {
      let that = this;
      that.right3Chart = echarts.init(this.$refs["echartR3"]);
      let option = {
        radar: {
          // shape: 'circle',
          splitNumber: 3,
          splitLine: {
            lineStyle: {
              color: ["#DD5955", "#39e1d0", "#2e3d45"],
            },
          },
          splitArea: {
            areaStyle: {
              color: [
                "rgba(88,247,223,0.2)",
                "rgba(255, 224, 54, 0.2)",
                "rgba(221,89,85,0.3)",
              ],
            },
          },
          indicator: [
            { name: "安全风险", max: 25 },
            { name: "付款风险", max: 25 },
            { name: "合同风险", max: 25 },
            { name: "结算风险", max: 25 },
            { name: "进度风险", max: 25 },
            { name: "质量风险", max: 25 },
          ],
        },
        series: [
          {
            name: "风险",
            type: "radar",
            symbol: "circle",
            label: {
              show: true,
              formatter: function (params) {
                return params.value;
              },
              fontSize: 24,
              color: "#68BDFF",
            },
            data: [
              {
                value: that.riskData.x[that.r3Index].value,
                areaStyle: {
                  color: "#112b75",
                },
                lineStyle: {
                  width: 4,
                  color: "#60C1FF",
                },
                label: {
                  fontSize: 22,
                },
              },
            ],
          },
        ],
      };
      that.right3Chart.setOption(option);
    },
    initChartR4 () {
      let that = this;
      that.right4Chart = echarts.init(this.$refs["echartR4"]);
      that.right4Chart.on("showTip", (params) => {
        // 如果是7或者15并且满足防抖则切换
        if (
          (params.dataIndex == 5 || params.dataIndex == 11) &&
          that.echartR2Fd2
        ) {
          that.echartR2Fd2 = false;
          setTimeout(() => {
            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6;
            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6;
            that.right4Chart.setOption(option);
            // 防止勿刷新做的防抖
            setTimeout(() => {
              that.echartR2Fd2 = true;
            }, 2000);
          }, 1900);
          // 如果是17表示到了最后一个，那么重新来一遍
        } else if (params.dataIndex == 17 && that.echartR2Fd2) {
          that.echartR2Fd2 = false;
          setTimeout(() => {
            option.dataZoom[0].endValue = 0;
            option.dataZoom[0].startValue = 5;
            that.right4Chart.setOption(option);
            // 防止勿刷新做的防抖
            setTimeout(() => {
              that.echartR2Fd2 = true;
            }, 2000);
          }, 1900);
        }
      });
      let option = {
        dataZoom: [
          {
            // start: 9,//默认为@
            // end: 100,//黑认认为1@0
            type: "slider",
            show: false,
            // xAxisIndex: [0]
            handlesize: 0, //滑动条的 左右2个滑动条的大小
            startValue: 5, // 初始显示值
            endValue: 0, // 结束显示值
            height: 10, //组件高度
            left: "5%",
            right: "4%", //右边的距离
            bottom: "25%", //底边的距离
            borderColor: "#939",
            fillerColor: "#269cdb",
            borderRadius: 5,
            backgroundColor: "#33384b", //两边未选中的滑动条区域的额色
            showDataShadow: false, //是否显示数据阴影
            showDetail: false, //即拖拽时候是否显示详细数值信息
            truerealtime: true, //是否实时更新
            filterMode: "filter",
          },
          {
            type: "inside",
            show: true,
            start: 1,
            end: 100,
            zoomOnMouseWheel: false, //滚轮是否触发缩放
            moveOnMouseMove: false, //鼠标滚轮触发滚动
          },
        ],
        title: {
          text: "企业后评价执行情况",
          left: "center",
          textStyle: {
            color: "#fff",
            fontSize: 32,
          },
        },
        tooltip: {
          trigger: "item",
          show: true,
          position: "top",
          backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
          borderColor: "rgba(50,50,50,0.7)",
          confine: true,
          textStyle: {
            color: "#fff",
            fontStyle: "normal", // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
            fontWeight: "normal", // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
            fontSize: "28", // 文字字体大小
          },

          formatter: function (p) {
            return `${p.name}<br>应首评项目数：${that.riskData1.y1[p.dataIndex]}个<br>
            已完成首评项目数：${that.riskData1.y2[p.dataIndex]}个<br>
            应再评项目数：${that.riskData1.y3[p.dataIndex]}个<br>
            已完成再评项目数：${that.riskData1.y4[p.dataIndex]}个<br>
            再评达标项目数：${that.riskData1.y5[p.dataIndex]}个
            `
          },
        },
        legend: {
          show: true,
          textStyle: {
            fontSize: 24,
            color: "rgba(255, 255, 255, .6)",
          },
          inactiveColor: "#fff",
          itemHeight: 20,
          top: "15%",
          backgroundColor: "transparent",
          data: [
            {
              name: "应首评项目数",
              icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAWdJREFUOE+N0k8og3EYB/Dvs8P8CSlTxJGD8u+yTYmNm0gJQznIQRxMoV2cXWSKCznIQdk7SkmOEomNg41y4EjURkLZFI/ed3vX+5v82nt4357n9/s8Pe/v9xCST6+fzVHGKAMDAKqT6WsCNi2ElS0Xfak5Ul+tfi77YewBqNcLpH0vTYSOAxc9kFo5wghINus2lJMPOzl8PE6EpX8qC2lmuMmp8CmABn3FVgJ4bIloLggEnwRzRg6F4wSY9fR2J1CUnYieY0DPrgDiUvASA7pF8PGnJXsp4LEC3wx4L4DAY1pLLQq7GVjM5KcJmKC2fc76fNeOtU6GmBDOzYMt04sLmQjt2sUZRyMCjAEYBKNKyxNuAGwUA8vCaBhbcSrMxviwj1JFU7Nk3NC49iqAk+FCObAu3AngfLJCDmpmjgVwNdskB5UjPgHcrvbLQXmXVwD3O1NyYGmeFkD0aF4OCmqHBPAWXhfAL4WqeuKVsFKCAAAAAElFTkSuQmCC",
            },
            {
              name: "已完成首评项目数",
              icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAXFJREFUOE+V0kFLAkEUB/D/G9eW3UN1sFPYNaJAu2R0Coog8mq0fQH1kEVBhz5Ah6CoLhrdE/LqKQo6VZ7SKCKChKRTBRmhbq47oabsZC22h1nem/k93jCP8P0F+E2HQ1dD4NAAGqqn+TUI8YpciCVo8LOaoeoSKOR6GTOSxOFtFLD+OSFtmpI/obqfqFqZ6Wrqr8NNyJHJK4aPtNLDAue0+1vlnzkiHqG5YvYcwGhj08MUhJyuWhgrvyBjFq3uogp0AB2NbFR2o5sctfCNVxDWc1ag/xPQR0tLXqYg6HTBBMd++RXplpZK2Qg4dtq5NAiLNM3v5a6ilALBY4s4rvKKMdLWw4EjU4E0U3s462gwXQ3DMLeJsfpgmCYgsSVTLkSF0bC24r9NcWucHPA1izZnyXpg8vRIAMfjU/ZgLH4ogDNt1h4Mb8YEcLkSsgf9y+sCuNtaswd92qoAHuMb9qBnIiiA55M9e9DpnRfAe/pAAF9gqJXUYWdYUwAAAABJRU5ErkJggg==",
            },
            {
              name: "应再评项目数",
              icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAV5JREFUOE+V0j8oxGEYwPHvo/wMjgyUslAWcTFhMRiEsHLKYDzFKZRBSskgR7mUG29QjpX86QaDwdlwLotiUYpB/gyHPDru9HsPP+c3vL+e530/T8/b+wipb31KrYJ8vAi9QE0qfYqy+vBEsHtKnpM5SS4bC1qW+8amQl26gP0vcPSSQ2fXiFxJsnKhi8PfDtvgsVo0yJZfhwQCP1XOzCn4ZNuvB0BjerO4HNxtn1FsB24vDRZNggRgpdPNXsjL/4wST7AXNEDiv+DxW0slFVDTCvoG8QjcXGS2NKc+hMVsLo0yLFsBzZNnDoHaP9CJWtRn9XDA8WsOHR8PZx+NQhcDqvQhVH3klTMRVu4fWTZGw97Ktl/VHrePyVfRr1myHwhP3xnAM1nkDJbGzw0wOFvpDCa8+waYCTY5g/6esAFCax5n0NI6b4DI7qgzcDeOGSAW9TuD0up+A1zHQwZ4B2JrgI9r4uMDAAAAAElFTkSuQmCC",
            },
            {
              name: "已完成再评项目数",
              icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAWBJREFUOE9jZICC/1e12Rh4uDIY/jNGMjAw6ECFrzAw/l/O8OXbDEbtq79AYowg4v9jS2mGv3+3MDAwGMAMQKMvMDAz+zDKHn/KCDaZm/skHsUwvRcZfr8zZ/z/0CyX4T/DJBwmowozMuQx/n9gdpyBgcECLsNpycAgXAPhvm1hYPgOkoaDEyANPxkYGNjgQjJbGRiYRSDcv28YGJ54I2v4SUDDWwaGJ17IGr5gcZIV1El/GRjetjMwfD+G5qSHpnkM/xknEufp//mM/2+rsDOwCoGCVZ+ApksMv9+ZERtxFxmYmb3BEYeaNHgyGf7/j2FgYNCEil9nYGRcwvDly3SUpIHslP8PzP4j8xkVTsENhaclZAWvLligaBAzOIFfw9ld1igajN2O4tewar49ioawxIP4NbQ0OqNoqKnfi19DXIoHioZFc3bg12Dt6YOi4ej2Lfg1yBn7o2h4dHYjigYAb0t88hVwEBYAAAAASUVORK5CYII=",
            },
            {
              name: "再评达标项目数",
              icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAWBJREFUOE+V0k8og2EcwPHvkzVZLLm6KItEzWlclIPbdhGKcsCJwzZFdtgOK+8OimIXTjgoSrisXByUgz8nE4mmXFwlZmuaPXr3r/eZ9sZ7eN9+v/f5/J6n3/MTFJ9wWFpTFqYFjAFdxfSthF1blo1wWHzpOaG/gppszkIM6C4VqPheW8ATCYkXoVdOW7g0WVyy8ZSdHhFYlF4E0SqV1bTEJwKaPAd6S3/aWmHEU4j2Y/D4pJgLHWQAaykd9ENDfSH6SEJkTQGZ/4LkryO1O2DYDbkcHB7DQ6LiSAua9AlQN67SAQl+4Y3KWtt7vq1Os04JuPm04/rrxcUt4M5fnHE00jXMIBgHOor5eyQ7dd+sK6NhPEpAk9IYL4VEuWh5lowLfKE3BUS1RnMwOZtQwNaqwxwMTp0p4Gizzxz0D+0p4PRg1Bw4B1YUED+ZMwctrnkFPF8tm4OmzgkFvN5tK+AHKZh4TU8krdoAAAAASUVORK5CYII=",
            },
          ],
        },
        grid: {
          top: "30%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          data: that.riskData1.x,
          type: "category",
          splitLine: {
            show: false,
          },
          alignTicks: true,
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(0, 80, 148, .8)",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#fff",
            fontSize: 22,
            rotate: 20,
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(104, 180, 221, .2)",
              type: "dashed",
            },
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#fff",
            fontSize: 22,
          },
        },
        series: [
          {
            type: "bar",
            name: "应首评项目数",
            barWidth: 4,
            barGap: "600%",
            data: that.riskData1.y1,
            label: {
              show: true,
              position: "top",
              formatter: " ",
              width: 6,
              height: 6,
              borderRadius: 50,
              borderWidth: 6,
              borderColor: "#40A9FF",
              backgroundColor: "#fff",
            },
            itemStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#40A9FF", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#092351", // 100% 处的颜色
                  },
                ],
              },
            },
          },
          {
            type: "bar",
            name: "已完成首评项目数",
            barGap: "600%",
            barWidth: 4,
            data: that.riskData1.y2,
            label: {
              show: true,
              position: "top",
              formatter: " ",
              width: 6,
              height: 6,
              borderRadius: 50,
              borderWidth: 6,
              borderColor: "#58F7DF",
              backgroundColor: "#fff",
            },
            itemStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#58F7DF", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#092351", // 100% 处的颜色
                  },
                ],
              },
            },
          },
          {
            type: "bar",
            name: "应再评项目数",
            barGap: "600%",
            barWidth: 4,
            data: that.riskData1.y3,
            label: {
              show: true,
              position: "top",
              formatter: " ",
              width: 6,
              height: 6,
              borderRadius: 50,
              borderWidth: 6,
              borderColor: "#B78CFF",
              backgroundColor: "#fff",
            },
            itemStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#B78CFF", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#092351", // 100% 处的颜色
                  },
                ],
              },
            },
          },
          {
            type: "bar",
            name: "已完成再评项目数",
            barGap: "600%",
            barWidth: 4,
            data: that.riskData1.y4,
            label: {
              show: true,
              position: "top",
              formatter: " ",
              width: 6,
              height: 6,
              borderRadius: 50,
              borderWidth: 6,
              borderColor: "#FFE036",
              backgroundColor: "#fff",
            },
            itemStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#FFE036", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#092351", // 100% 处的颜色
                  },
                ],
              },
            },
          },
          {
            type: "bar",
            name: "再评达标项目数",
            barGap: "600%",
            barWidth: 4,
            data: that.riskData1.y5,
            label: {
              show: true,
              position: "top",
              formatter: " ",
              width: 6,
              height: 6,
              borderRadius: 50,
              borderWidth: 6,
              borderColor: "#7784FF",
              backgroundColor: "#fff",
            },
            itemStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#7784FF", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#092351", // 100% 处的颜色
                  },
                ],
              },
            },
          },
        ],
      };
      that.right4Chart.setOption(option);
      tools.loopShowTooltip(that.right4Chart, option, {
        interval: 2000,
        loopSeries: true,
      });
    },
    clickItem (index) {
      const angle = 360 / this.investData.investList.length;
      this.witchs = index;
      this.inner = index;
      this.innerDeg = this.witchs * angle;
      this.lpRotate();
    },
    lpRotate () {
      const angle = 360 / this.investData.investList.length;
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        this.inner++;
        this.topIndex++;
        this.topIndex = this.topIndex % 8;
        this.witchs = this.inner % this.investData.investList.length;
        this.innerDeg = this.inner * angle;
        // 项目阶段分析弹窗
        if (this.projectNum < 7) {
          this.projectNum = this.projectNum + 1
        } else {
          this.projectNum = 0
        }
      }, 2000);
    },
    filterLpData () {
      const angle = 360 / this.investData.investList.length;
      for (let i in this.investData.investList) {
        this.investData.investList[i].deg = i * angle;
        this.$set(this.investData.investList, i, {
          ...this.investData.investList[i],
          deg: i * angle,
        });
      }
    },
    // 4秒定时器
    time4s () {
      let that = this;
      // 4秒定时器
      this.time1 = setInterval(() => {
        that.industryProportion == 1
          ? (that.industryProportion = 2)
          : (that.industryProportion = 1);
        that.leftEcharts1.dispose();
        that.leftEcharts2.dispose();
        that.leftEcharts3.dispose();
        that.leftEcharts4.dispose();
        that.leftEcharts1Fun();
        that.leftEcharts2Fun();
        that.leftEcharts3Fun();
        that.leftEcharts4Fun();
      }, 4000);
    },
    // 针对投前产业布局分析的定时器
    timeNs () {
      let that = this;
      this.time2 = setInterval(() => {
        if (that.industryLayout < 3) {
          that.industryLayout = that.industryLayout + 1;
        } else {
          that.industryLayout = 0;
        }
        this.time2 && clearInterval(this.time2);
        this.timeNs();
        that.leftEcharts5.dispose();
        that.leftEcharts5Fun();
      }, left1[that.industryLayout].length * 2000);
    },
    // 主辅业占比点击方法
    industryProportionChange (e) {
      let that = this;
      this.industryProportion = e;
      this.time1 && clearInterval(this.time1);
      that.leftEcharts1.dispose();
      that.leftEcharts2.dispose();
      that.leftEcharts3.dispose();
      that.leftEcharts4.dispose();
      that.leftEcharts1Fun();
      that.leftEcharts2Fun();
      that.leftEcharts3Fun();
      that.leftEcharts4Fun();
      this.time4s();
    },
    // 产业布局分析点击方法
    industryLayoutChange (e) {
      this.industryLayout = e;
      this.time2 && clearInterval(this.time2);
      this.leftEcharts5.dispose();
      this.timeNs();
      this.leftEcharts5Fun();
    },
    yuanChange (value) {
      return Number((value / 100000000).toFixed(2));
    },
    // 逢三折断
    numFormat (value) {
      if (!value) return "0";
      // var intPart = Number(value).toFixed(0) // 获取整数部分
      var intPart = parseInt(value); // 获取整数部分
      var intPartFormat = intPart
        .toString()
        .replace(/(\d)(?=(?:\d{3})+$)/g, "$1,"); // 将整数部分逢三一断

      var floatPart = ".00"; // 预定义小数部分
      var value2Array = value.toString().split(".");
      // =2表示数据有小数位
      if (value2Array.length === 2) {
        floatPart = value2Array[1].toString(); // 拿到小数部分
        if (floatPart.length === 1) {
          // 补0
          return intPartFormat + "." + floatPart + "0";
        } else {
          floatPart = floatPart.slice(0, 2);
          return intPartFormat + "." + floatPart;
        }
      } else {
        return intPartFormat;
      }
    },
    leftEcharts1Fun () {
      let that = this;
      this.leftEcharts1 = echarts.init(this.$refs["leftEcharts1"]);
      option = {
        title: {
          text: that.industryProportion == 1 ? "94.4%" : "46.62%",
          x: "center",
          y: "center",
          textStyle: {
            fontWeight: "normal",
            color: "#68BDFF",
            fontSize: "20",
          },
        },
        color: ["#68BDFF", "#254F7F"],
        series: [
          {
            name: "Line 1",
            type: "pie",
            clockWise: true,
            radius: ["80%", "100%"],
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            },
            hoverAnimation: false,
            data: [
              {
                value: 80,
                name: "01",
                itemStyle: {
                  normal: {
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                  },
                },
              },
              {
                name: "02",
                value: 20,
              },
            ],
          },
        ],
      };
      //轮播
      // tools.loopShowTooltip(leftEcharts1, option, {
      //   interval: 2000,
      //   loopSeries: true,
      // });
      //注册
      that.leftEcharts1.setOption(option);
    },
    leftEcharts2Fun () {
      let that = this;
      this.leftEcharts2 = echarts.init(this.$refs["leftEcharts2"]);
      let nameList = ["a"];
      let valueList = that.industryProportion == 1 ? [1287.5] : [635.84];
      let total = 1363.88; // 数据总数
      var category = nameList.map((item, index) => {
        return {
          value: valueList[index],
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
              1,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "#40A9FF50",
                },
                {
                  offset: 1,
                  color: "#40A9FF",
                },
              ],
              false
            ),
          },
        };
      });
      var totalList = [];
      var totalBorderList = [];
      nameList.map((item, index) => {
        totalList.push({
          value: total,
          itemStyle: {
            color: "rgba(51, 147, 236, 0.29)",
          },
        });
        totalBorderList.push({
          value: total,
          itemStyle: {
            borderColor: "rgba(51, 147, 236, 0.29)",
            color: "transparent",
          },
        });
      });
      var datas = [];
      category.forEach((value) => {
        datas.push(value.value);
      });
      option = {
        // backgroundColor: 'rgb(231,238,249)',
        xAxis: {
          max: total,
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        grid: {
          left: "0%",
          top: "15%", // 设置条形图的边距
          right: "15%",
          bottom: "5%",
        },
        yAxis: [
          {
            type: "category",
            inverse: false,
            data: nameList,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
          },
        ],
        series: [
          {
            // 内
            type: "bar",
            barWidth: 16,
            barGap: "20%",
            silent: true,
            // label: {
            //     normal: {
            //         formatter: (item) => {
            //             return `${item['name']}：${item['value']} `;
            //         },
            //         textStyle: {
            //             color: 'rgba(105, 120, 136, 1)',
            //             fontSize: 14,
            //         },
            //         position: [0, '-25px'],
            //         show: true,
            //     },
            // },
            data: category,
            z: 1,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  1,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(81, 193, 156, 1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(234, 177, 100, 1)",
                    },
                  ],
                  false
                ),
              },
            },
            animationEasing: "elasticOut",
          },

          {
            // 分隔
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: "#143362",
              },
            },
            symbolRepeat: "fixed",
            symbolMargin: 8,
            symbol: "rect",
            symbolClip: false,
            symbolSize: [4, 20],
            symbolPosition: "start",
            symbolOffset: [0, -2],
            symbolBoundingData: total,
            data: [total, total, total, total],
            z: 2,
            animationEasing: "elasticOut",
          },
          {
            // label
            type: "pictorialBar",
            symbolBoundingData: total,
            itemStyle: {
              normal: {
                color: "none",
              },
            },
            label: {
              normal: {
                formatter: (params) => {
                  var text;
                  text = `${((params["data"] * 100) / total).toFixed(2)}亿`;
                  return text;
                },
                textStyle: {
                  // 图列内容样式
                  fontSize: "20",
                  fontWeight: 800,
                },
                position: "right",
                offset: [0, -3],
                distance: 10, // 向右偏移位置
                show: true,
                color: "#68BDFF",
              },
            },
            data: datas,
            z: 0,
          },
          {
            name: "外框",
            type: "bar",
            barGap: "-130%", // 设置外框粗细
            data: totalBorderList,
            barWidth: 26,
            itemStyle: {
              normal: {
                // barBorderRadius: [5, 5, 5, 5],
                borderWidth: 1, // 边框宽度
                borderColor: "rgb(51, 147, 236)", // 边框色
                color: "rgb(231,238,249)",
              },
            },
            z: 0,
          },
        ],
      };

      //轮播
      // tools.loopShowTooltip(leftEcharts1, option, {
      //   interval: 2000,
      //   loopSeries: true,
      // });
      //注册
      that.leftEcharts2.setOption(option);
    },
    leftEcharts3Fun () {
      let that = this;
      this.leftEcharts3 = echarts.init(this.$refs["leftEcharts3"]);
      option = {
        title: {
          text: that.industryProportion == 1 ? "5.6%" : "53.38%",
          x: "center",
          y: "center",
          textStyle: {
            fontWeight: "normal",
            color: "#68BDFF",
            fontSize: "20",
          },
        },
        color: ["#5BDCC8", "#254F7F"],
        series: [
          {
            name: "Line 1",
            type: "pie",
            clockWise: true,
            radius: ["80%", "100%"],
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            },
            hoverAnimation: false,
            data: [
              {
                value: 80,
                name: "01",
                itemStyle: {
                  normal: {
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                  },
                },
              },
              {
                name: "02",
                value: 20,
              },
            ],
          },
        ],
      };
      //轮播
      // tools.loopShowTooltip(leftEcharts1, option, {
      //   interval: 2000,
      //   loopSeries: true,
      // });
      //注册
      that.leftEcharts3.setOption(option);
    },
    leftEcharts4Fun () {
      let that = this;
      this.leftEcharts4 = echarts.init(this.$refs["leftEcharts4"]);
      let nameList = ["a"];
      let valueList = that.industryProportion == 1 ? [76.38] : [728.04];
      let total = 1363.88; // 数据总数
      var category = nameList.map((item, index) => {
        return {
          value: valueList[index],
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
              1,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "#5BDCC850",
                },
                {
                  offset: 1,
                  color: "#5BDCC8",
                },
              ],
              false
            ),
          },
        };
      });
      var totalList = [];
      var totalBorderList = [];
      nameList.map((item, index) => {
        totalList.push({
          value: total,
          itemStyle: {
            color: "rgba(51, 147, 236, 0.29)",
          },
        });
        totalBorderList.push({
          value: total,
          itemStyle: {
            borderColor: "rgba(51, 147, 236, 0.29)",
            color: "transparent",
          },
        });
      });
      var datas = [];
      category.forEach((value) => {
        datas.push(value.value);
      });
      option = {
        // backgroundColor: 'rgb(231,238,249)',
        xAxis: {
          max: total,
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        grid: {
          left: "0%",
          top: "15%", // 设置条形图的边距
          right: "15%",
          bottom: "5%",
        },
        yAxis: [
          {
            type: "category",
            inverse: false,
            data: nameList,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
          },
        ],
        series: [
          {
            // 内
            type: "bar",
            barWidth: 16,
            barGap: "20%",
            silent: true,
            // label: {
            //     normal: {
            //         formatter: (item) => {
            //             return `${item['name']}：${item['value']} `;
            //         },
            //         textStyle: {
            //             color: 'rgba(105, 120, 136, 1)',
            //             fontSize: 14,
            //         },
            //         position: [0, '-25px'],
            //         show: true,
            //     },
            // },
            data: category,
            z: 1,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  1,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(81, 193, 156, 1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(234, 177, 100, 1)",
                    },
                  ],
                  false
                ),
              },
            },
            animationEasing: "elasticOut",
          },

          {
            // 分隔
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: "#143362",
              },
            },
            symbolRepeat: "fixed",
            symbolMargin: 8,
            symbol: "rect",
            symbolClip: false,
            symbolSize: [4, 20],
            symbolPosition: "start",
            symbolOffset: [0, -2],
            symbolBoundingData: total,
            data: [total, total, total, total],
            z: 2,
            animationEasing: "elasticOut",
          },
          {
            // label
            type: "pictorialBar",
            symbolBoundingData: total,
            itemStyle: {
              normal: {
                color: "none",
              },
            },
            label: {
              normal: {
                formatter: (params) => {
                  var text;
                  text = `${((params["data"] * 100) / total).toFixed(2)}亿`;
                  return text;
                },
                textStyle: {
                  // 图列内容样式
                  fontSize: "20",
                  fontWeight: 800,
                },
                position: "right",
                offset: [0, -3],
                distance: 10, // 向右偏移位置
                show: true,
                color: "#68BDFF",
              },
            },
            data: datas,
            z: 0,
          },
          {
            name: "外框",
            type: "bar",
            barGap: "-130%", // 设置外框粗细
            data: totalBorderList,
            barWidth: 26,
            itemStyle: {
              normal: {
                // barBorderRadius: [5, 5, 5, 5],
                borderWidth: 1, // 边框宽度
                borderColor: "rgb(51, 147, 236)", // 边框色
                color: "rgb(231,238,249)",
              },
            },
            z: 0,
          },
        ],
      };

      //轮播
      // tools.loopShowTooltip(leftEcharts1, option, {
      //   interval: 2000,
      //   loopSeries: true,
      // });
      //注册
      that.leftEcharts4.setOption(option);
    },
    leftEcharts5Fun () {
      let that = this;
      this.leftEcharts5 = echarts.init(this.$refs["leftEcharts5"]);
      let dataList = [];
      left1[that.industryLayout].forEach((item, index) => {
        dataList[index] = {
          value: item.y,
          name: item.name,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                {
                  offset: 0,
                  color: commonColor2[index], //顶部颜色
                },
                {
                  offset: 1,
                  color: commonColor[index], // 底部颜色
                },
              ]),
              borderColor: commonColor[index],
              borderWidth: 3,
            },
          },
        };
      });
      let option = {
        tooltip: {
          trigger: "item",
          formatter: function (e) {
            return `<span style="display:inline-block;margin-right:15px;border-radius:10px;width:20px;height:20px;background-color:${e.borderColor
              };"></span>${e.name} ${e.percent}%<br>${e.value}亿 ${left1[that.industryLayout][e.seriesIndex].num
              }个`;
          },
          backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
          textStyle: {
            color: "#fff",
            fontStyle: "normal", // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
            fontWeight: "normal", // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
            fontSize: "28", // 文字字体大小
          },
        },
        legend: {
          top: "center",
          orient: "vertical",
          left: "65%",
          textStyle: {
            color: "#fff",
            fontSize: 20,
            padding: [0, 20],
          },
        },
        graphic: {
          elements: [
            {
              type: "image", //需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
              style: {
                image: "./img/whiteCircle.png", //这里添加图片地址
                width: 80,
                height: 80,
              },
              left: "37.7%", //
              top: "middle", //配置图片居中
            },
          ],
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["20%", "90%"],
            center: ["41%", "50%"],
            labelLine: {
              normal: {
                lineStyle: {
                  width: 1,
                },
              },
            },
            label: {
              normal: {
                show: false,
                textStyle: {
                  fontSize: 28,
                  color: "#fff",
                },
              },
            },
            roseType: "area",
            data: dataList,
          },
          {
            tooltip: {
              show: false,
            },
            type: "pie",
            radius: ["90%", "92%"],
            center: ["41%", "50%"],
            hoverAnimation: false,
            name: "",
            data: [
              {
                name: "",
                value: 0,
                itemStyle: {
                  normal: {
                    color: "#345189",
                  },
                },
              },
            ],
          },
        ],
      };
      //轮播
      tools.loopShowTooltip(that.leftEcharts5, option, {
        interval: 2000,
        loopSeries: true,
      });
      //注册
      that.leftEcharts5.setOption(option);
    },
    leftEcharts6Fun () {
      let that = this;
      this.leftEcharts6 = echarts.init(this.$refs["leftEcharts6"]);
      var dataArr = 44;
      var colorSet = {
        color: "#22B95E",
      };
      var color1 = {
        type: "linear",
        x: 0,
        y: 0,
        x2: 1,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "rgba(255,255,255,0.1)",
          },
          {
            offset: 1,
            color: "rgba(255,255,255,0.3)",
          },
        ],
        global: false,
      };
      var color2 = {
        type: "linear",
        x: 0,
        y: 0,
        x2: 1,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "#30DBBA",
          },
          {
            offset: 1,
            color: "#2DE696",
          },
        ],
        global: false,
      };

      option = {
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%",
        },
        series: [
          {
            name: "内部进度条",
            type: "gauge",
            // center: ['20%', '50%'],
            radius: "50%",

            splitNumber: 10,
            axisLine: {
              lineStyle: {
                color: [
                  [dataArr / 100, "rgba(0,0,0,0)"],
                  [1, "rgba(0,0,0,0)"],
                ],
                width: 1,
              },
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            itemStyle: {
              color: "#ffffff",
            },
            detail: {
              formatter: function (value) {
                if (value !== 0) {
                  var num = Math.round(value);
                  return parseInt(num).toFixed(0) + "%";
                } else {
                  return 0;
                }
              },
              offsetCenter: [0, 117],
              textStyle: {
                padding: [0, 0, 0, 0],
                fontSize: 60,
                color: "#58F7DF",
              },
            },
            title: {
              //标题
              show: true,
              offsetCenter: [0, 220], // x, y，单位px
              textStyle: {
                color: "#40A9FF",
                fontSize: 34, //表盘上的标题文字大小
                fontWeight: 400,
                fontFamily: "MicrosoftYaHei",
              },
            },
            data: [
              {
                name: "总额度:1,323.85亿",
                value: dataArr,
                itemStyle: {
                  fontSize: "50", //y轴上方单位的大小
                  color: "#FFF666",
                  fontFamily: "MicrosoftYaHei",
                },
              },
            ],
            pointer: {
              show: true,
              length: "100%",
              radius: "20%",
              width: 3, //指针粗细
            },
            animationDuration: 4000,
          },
          {
            name: "内部阴影",
            type: "gauge",
            radius: "75%",
            splitNumber: 10,
            axisLine: {
              lineStyle: {
                color: [
                  [
                    dataArr / 100,
                    new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 0,
                        color: "#081947",
                      },
                      {
                        offset: 0.5,
                        color: "#5DF5A9",
                      },
                      {
                        offset: 1,
                        color: "#F6F16A",
                      },
                    ]),
                  ],
                  [1, "#0E4889"],
                ],
                width: 70,
              },
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            itemStyle: {
              show: false,
            },
          },
          {
            name: "外部刻度",
            type: "gauge",
            //  center: ['20%', '50%'],
            radius: "90%",
            min: 0, //最小刻度
            max: 100, //最大刻度
            splitNumber: 5, //刻度数量
            startAngle: 225,
            endAngle: -45,
            axisLine: {
              show: true,
              lineStyle: {
                width: 1,
                color: [[1, "rgba(0,0,0,0)"]],
              },
            }, //仪表盘轴线
            axisLabel: {
              show: false,
              color: "#ffffff",
              fontSize: 28,
              fontFamily: "SourceHanSansSC-Regular",
              fontWeight: "bold",
              // position: "top",
              distance: -45,
              formatter: function (v) {
                switch (v + "") {
                  case "0":
                    return "0";
                  case "10":
                    return "10";
                  case "20":
                    return "20";
                  case "30":
                    return "30";
                  case "40":
                    return "40";
                  case "50":
                    return "50";
                  case "60":
                    return "60";
                  case "70":
                    return "70";
                  case "80":
                    return "80";
                  case "90":
                    return "90";
                  case "100":
                    return "100";
                }
              },
            }, //刻度标签。
            axisTick: {
              show: true,
              splitNumber: 10,
              lineStyle: {
                color: "#3798D7", //用颜色渐变函数不起作用
                width: 1,
              },
              length: -6,
            }, //刻度样式
            splitLine: {
              show: true,
              length: -12,
              lineStyle: {
                color: "#3798D7", //用颜色渐变函数不起作用
              },
            }, //分隔线样式
            detail: {
              show: false,
            },
          },
          {
            //指针上的圆
            type: "pie",
            tooltip: {
              show: false,
            },
            hoverAnimation: false,
            legendHoverLink: false,
            radius: ["0%", "4%"],
            center: ["50%", "50%"],
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: 120,
                itemStyle: {
                  normal: {
                    color: "#ffffff",
                  },
                },
              },
            ],
          },
        ],
      };

      //轮播
      // tools.loopShowTooltip(leftEcharts1, option, {
      //   interval: 2000,
      //   loopSeries: true,
      // });
      //注册
      that.leftEcharts6.setOption(option);
    },
    leftEcharts7Fun () {
      let that = this;
      this.leftEcharts7 = echarts.init(this.$refs["leftEcharts7"]);
      let option = {
        title: {
          text: "固定资产进度分布",
          textStyle: {
            color: "#fff",
            fontSize: 28,
            fontWeight: 500,
            fontFamily: "Microsoft YaHei",
          },
          top: "20",
          left: "220",
        },
        textStyle: {
          color: "#fff",
        },
        tooltip: {
          show: false,
          trigger: "axis",
          formatter: function (params) {
            var tip =
              params[0].axisValue +
              "<br/>" +
              params[0].marker +
              params[0].data[1] +
              "：" +
              params[0].data[2] +
              "个，" +
              params[0].data[3] +
              "亿元" +
              "<br/>" +
              params[1].marker +
              params[1].data[1] +
              "：" +
              params[1].data[2] +
              "个，" +
              params[1].data[3] +
              "亿元";
            return tip;
          },
          textStyle: {
            color: "#ffffff", // 文字的颜色
            fontSize: "20", // 文字字体大小
            fontFamily: "Microsoft YaHei",
          },
          axisPointer: {
            // lineStyle: {
            //   type: 'dashed',
            //   width: 2,
            //   color: 'rgba(255,255,255,0.6)'
            // },
            animation: false,
          },
        },
        grid: {
          top: "0%",
          right: "5%",
          left: "15%",
          bottom: "-10%",
        },
        yAxis: {
          data: ["备案", "特别监管"],
          splitLine: {
            show: false,
            lineStyle: {
              color: "#68b4dd66",
              type: "dashed",
            },
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            formatter: "{value}",
            textStyle: {
              color: function (data) {
                if (data == "特别监管") {
                  return "#40A9FF";
                } else if (data == "备案") {
                  return "#5BDCC8";
                }
              },
              fontSize: 20,
              padding: [0, -10, 0, 0],
              fontFamily: "Microsoft YaHei",
            },
          },
          nameTextStyle: {
            color: "#ebf8ac",
            fontSize: 16,
            fontFamily: "Microsoft YaHei",
          },
        },
        xAxis: {
          data: ["项目储备", "项目立项", "可研论证", "投资决策"],
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: "red",
              width: 1,
            },
          },
          axisTick: {
            show: false, //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff", //X轴文字颜色
              fontSize: 20,
              padding: [-80, 0, 0, 0],
              fontFamily: "Microsoft YaHei",
            },
          },
        },
        series: [
          {
            name: "特别监管",
            type: "scatter",
            symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
            symbolSize: function (data) {
              return Math.sqrt(data[2]) * 5;
            },
            // label: {
            //   emphasis: {
            //     show: true,
            //     formatter: function (param) {
            //       return param.data[2];
            //     },
            //     position: 'top'
            //   }
            // },
            itemStyle: {
              normal: {
                color: "#69c0ff",
              },
            },
            // data: left13[0]
          },
          {
            name: "备案",
            type: "scatter",
            symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
            symbolSize: function (data) {
              return Math.sqrt(data[2]) * 5;
            },
            // label: {
            //   emphasis: {
            //     show: true,
            //     formatter: function (param) {
            //       return param.data[2];
            //     },
            //     position: 'top'
            //   }
            // },
            itemStyle: {
              normal: {
                color: "#957DFF",
              },
            },
            // data: left13[1]
          },
        ],
      };
      //轮播
      // tools.loopShowTooltip(leftEcharts1, option, {
      //   interval: 2000,
      //   loopSeries: true,
      // });
      //注册
      that.leftEcharts7.setOption(option);
    },
    leftEcharts8Fun () {
      let that = this;
      this.leftEcharts8 = echarts.init(this.$refs["leftEcharts8"]);
      let option = {
        title: {
          text: "固定资产进度分布",
          textStyle: {
            color: "#fff",
            fontSize: 28,
            fontWeight: 500,
            fontFamily: "Microsoft YaHei",
          },
          top: "20",
          left: "220",
        },
        textStyle: {
          color: "#fff",
        },
        tooltip: {
          show: false,
          trigger: "axis",
          formatter: function (params) {
            var tip =
              params[0].axisValue +
              "<br/>" +
              params[0].marker +
              params[0].data[1] +
              "：" +
              params[0].data[2] +
              "个，" +
              params[0].data[3] +
              "亿元" +
              "<br/>" +
              params[1].marker +
              params[1].data[1] +
              "：" +
              params[1].data[2] +
              "个，" +
              params[1].data[3] +
              "亿元";
            return tip;
          },
          textStyle: {
            color: "#ffffff", // 文字的颜色
            fontSize: "20", // 文字字体大小
            fontFamily: "Microsoft YaHei",
          },
          axisPointer: {
            // lineStyle: {
            //   type: 'dashed',
            //   width: 2,
            //   color: 'rgba(255,255,255,0.6)'
            // },
            animation: false,
          },
        },
        grid: {
          top: "0%",
          right: "5%",
          left: "15%",
          bottom: "-10%",
        },
        yAxis: {
          data: ["备案", "特别监管"],
          splitLine: {
            show: false,
            lineStyle: {
              color: "#68b4dd66",
              type: "dashed",
            },
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
            formatter: "{value}",
            textStyle: {
              color: "#fff",
              fontSize: 20,
              padding: [0, -10, 0, 0],
              fontFamily: "Microsoft YaHei",
            },
          },
          nameTextStyle: {
            color: "#ebf8ac",
            fontSize: 16,
            fontFamily: "Microsoft YaHei",
          },
        },
        xAxis: {
          data: ["项目储备", "项目立项", "可研论证", "投资决策"],
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: "red",
              width: 1,
            },
          },
          axisTick: {
            show: false, //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff", //X轴文字颜色
              fontSize: 20,
              padding: [-80, 0, 0, 0],
              fontFamily: "Microsoft YaHei",
            },
          },
        },
        series: [
          {
            name: "特别监管",
            type: "scatter",
            symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
            symbolSize: function (data) {
              return Math.sqrt(data[2]) * 5;
            },
            // label: {
            //   emphasis: {
            //     show: true,
            //     formatter: function (param) {
            //       return param.data[2];
            //     },
            //     position: 'top'
            //   }
            // },
            itemStyle: {
              normal: {
                color: "#69c0ff",
              },
            },
            // data: left13[0]
          },
          {
            name: "备案",
            type: "scatter",
            symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
            symbolSize: function (data) {
              return Math.sqrt(data[2]) * 5;
            },
            // label: {
            //   emphasis: {
            //     show: true,
            //     formatter: function (param) {
            //       return param.data[2];
            //     },
            //     position: 'top'
            //   }
            // },
            itemStyle: {
              normal: {
                color: "#957DFF",
              },
            },
            // data: left13[1]
          },
        ],
      };
      //轮播
      // tools.loopShowTooltip(leftEcharts1, option, {
      //   interval: 2000,
      //   loopSeries: true,
      // });
      //注册
      that.leftEcharts8.setOption(option);
    },
    shanxiEchartsFun () {
      let that = this;
      this.geoCoordMap = [];
      /*获取地图数据*/
      this.shanxiMap = echarts.init(this.$refs["shanxi"]);
      // echarts.registerMap('china', china)
      echarts.registerMap("china", shanxi);
      // var mapFeatures = echarts.getMap('china').geoJson.features
      // mapFeatures.forEach(v => {
      //   // 地区名称
      //   var name = v.properties.name
      //   // 地区经纬度
      //   this.geoCoordMap[name] = v.properties.cp
      //   data.push({ name: v.properties.name, value: v.properties.cp[0], value2: v.properties.cp[1] })
      // })
      var data = [
        { name: "大同市", value: 6035, value2: 28 },
        { name: "朔州市", value: 3361, value2: 13 },
        { name: "忻州市", value: 7335, value2: 25 },
        { name: "吕梁市", value: 10904, value2: 45 },
        { name: "太原市", value: 25167, value2: 113 },
        { name: "阳泉市", value: 2512, value2: 28 },
        { name: "晋中市", value: 14857, value2: 52 },
        { name: "临汾市", value: 13055, value2: 30 },
        { name: "长治市", value: 10300, value2: 23 },
        { name: "运城市", value: 4106, value2: 23 },
        { name: "晋城市", value: 4543, value2: 31 },
      ];
      var geoCoordMap = {
        太原市: [112.53, 37.87],
        大同市: [113.3, 40.12],
        阳泉市: [113.57, 37.85],
        长治市: [113.08, 36.18],
        晋城市: [112.83, 35.52],
        朔州市: [112.43, 39.33],
        晋中市: [112.94, 37.4],
        运城市: [110.97, 35.03],
        忻州市: [112.53, 38.72],
        临汾市: [111.5, 36.08],
        吕梁市: [111.13, 37.52],
      };
      var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value, data[i].value2),
            });
          }
        }
        return res;
      };
      var convertedData = [
        convertData(data),
        convertData(
          data
            .sort(function (a, b) {
              return b.value - a.value;
            })
            .slice(0, 6)
        ),
      ];
      data.sort(function (a, b) {
        return a.value - b.value;
      });
      option = {
        backgroundColor: "#404a5900",
        animation: true,
        animationDuration: 1000,
        animationEasing: "cubicInOut",
        animationDurationUpdate: 1000,
        animationEasingUpdate: "cubicInOut",
        geo: {
          map: "china",
          center: [112.53, 37.67],
          zoom: 4.5,
          label: {
            emphasis: {
              show: false,
            },
          },
          roam: false,
          itemStyle: {
            normal: {
              borderColor: "#7fb3ff",
              borderWidth: 3,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "#468ff8", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#0a2c6d", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
              // shadowColor: 'rgba(128, 217, 248, 1)',
              shadowColor: "#468ff8",
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 20,
            },
            emphasis: {
              areaColor: {
                colorStops: [
                  {
                    offset: 0,
                    color: "#3844aa", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#7284fc", // 100% 处的颜色
                  },
                ],
              },
              borderColor: "#b3baff",
              borderWidth: 5,
            },
          },
          tooltip: {
            trigger: "item",
            className: "custom-tooltip-box",
            confine: true, // 不超出当前表

            formatter: (params, ticket, callback) => {
              // 清空所有轮播
              for (var k in geoCoordMap) {
                that.shanxiMap.dispatchAction({
                  // type: 'geoUnSelect',
                  type: "downplay",
                  name: k,
                  geoIndex: 0,
                });
                that.shanxiMap.dispatchAction({
                  // type: 'geoUnSelect',
                  type: "downplay",
                  name: k,
                  seriesName: params.seriesName,
                });
                that.shanxiMap.dispatchAction({
                  // type: 'geoUnSelect',
                  type: "downplay",
                  name: k,
                  seriesName: "series\u00001",
                });
              }
              that.shanxiMap.dispatchAction({
                // type: 'geoSelect',
                type: "highlight",
                name: params.name,
                geoIndex: 0,
              });
              that.shanxiMap.dispatchAction({
                // type: 'geoSelect',
                type: "highlight",
                name: params.name,
                seriesName: params.seriesName,
              });
              that.shanxiMap.dispatchAction({
                // type: 'geoSelect',
                type: "highlight",
                name: params.name,
                seriesName: "series\u00001",
              });
              return `<div class="bgTooltip" style="background: url('../img/shanxi/${params.name}.png') no-repeat center center;background-size: 100% 100%;font-size:36px">
              <div class="flex items-center">
                <img src="./img/yellowArrow.png" style="width: 12px;height: 22px;margin-right:10px" alt=""><span class="fb">${params.name}</span>
              </div>
                <div class="blueIcon flex items-center">项目数量：<span class="fb" style="color:#68BDFF;">${params.value[3]}<span style="font-size:20px" class="fn">个</span></span></div>
                <div class="blueIcon flex items-center">投资总额：<span class="fb" style="color:#68BDFF">${params.value[2]}<span style="font-size:20px" class="fn">亿</span></span></div>
              </div>`;
            },
          },
          regions: [
            {
              name: "太原市",
              value: 2000,
              itemStyle: {
                emphasis: {
                  borderColor: "#ffe036",
                  borderWidth: 5,
                  areaColor: {
                    type: "radial",
                    x: 0.5,
                    y: 0.5,
                    r: 0.8,
                    colorStops: [
                      {
                        offset: 0,
                        color: "#ffe036", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#7c732a", // 100% 处的颜色
                      },
                    ],
                    globalCoord: false, // 缺省为 false
                  },
                },
              },
            },
            {
              name: "南海诸岛",
              itemStyle: {
                // 隐藏地图
                normal: {
                  opacity: 0, // 为 0 时不绘制该图形
                },
              },
              label: {
                show: false, // 隐藏文字
              },
            },
          ],
        },
        tooltip: {
          trigger: "item",
          className: "custom-tooltip-box",
          confine: true, // 不超出当前表
          formatter: (e) => {
            console.log('走了这里了', e)
          }
        },
        xAxis: {
          type: "value",
          scale: true,
          position: "top",
          boundaryGap: false,
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            margin: 2,
            textStyle: {
              color: "#aaa",
            },
          },
        },
        yAxis: {
          type: "category",
          nameGap: 16,
          axisLine: {
            show: false,
            lineStyle: {
              color: "#ddd",
            },
          },
          axisTick: {
            show: false,
            lineStyle: {
              color: "#ddd",
            },
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: "#ddd",
            },
          },
          data: categoryData,
        },
        series: [
          {
            type: "effectScatter",
            colorBy: "data",
            coordinateSystem: "geo",
            data: convertedData[0],
            symbolSize: function (val) {
              return Math.max(val[2] / 500, 8);
            },
            showEffectOn: "emphasis",
            rippleEffect: {
              brushType: "stroke",
              color: "#58F7DF",
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: true,
                fontSize: "30",
                color: "#fff",
              },
            },
            itemStyle: {
              normal: {
                color: "#ffc809",
                shadowBlur: 50,
                shadowColor: "#ffc809",
              },
              emphasis: {
                color: "#58F7DF",
                shadowBlur: 50,
                shadowColor: "#58F7DF",
              },
            },
            zlevel: 99,
          },
          {
            type: "effectScatter",
            colorBy: "data",
            coordinateSystem: "geo",
            data: [
              {
                name: "太原市",
                value: [112.53, 37.87, 25167, 113],
              },
            ],
            symbolSize: function (val) {
              return Math.max(val[2] / 500, 8);
            },
            showEffectOn: "emphasis",
            rippleEffect: {
              brushType: "stroke",
              color: "#DF62F2",
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: true,
                fontSize: "30",
                color: "#fff",
              },
            },
            itemStyle: {
              normal: {
                color: "#ffc809",
                shadowBlur: 50,
                shadowColor: "#ffc809",
              },
              emphasis: {
                color: "#DF62F2",
                shadowBlur: 50,
                shadowColor: "#DF62F2",
              },
            },
            zlevel: 999,
          },
        ],
      };
      var categoryData = [];
      var barData = [];
      var sum = 0;
      for (var i = 0; i < data.length; i++) {
        categoryData.push(data[i].name);
        barData.push(data[i].value);
        sum += data[i].value;
      }
      // this.shanxiMap.on('click', function (params) {
      //   if (params.name == '山西') {
      //     that.shanxiMap.dispose()
      //     that.centerShow = true
      //     setTimeout(() => {
      //     })
      //   }
      // })
      tools.loopShowTooltip(this.shanxiMap, option, {
        interval: 2000,
        loopSeries: false,
        seriesIndex: 0,
      });
      this.shanxiMap.setOption(option);
    },
    chinaEchartsFun () {
      let that = this;
      this.geoCoordMap = [];
      /*获取地图数据*/
      this.chinaMap = echarts.init(this.$refs["china"]);
      echarts.registerMap("china", china);
      // var mapFeatures = echarts.getMap('china').geoJson.features
      // mapFeatures.forEach(v => {
      //   // 地区名称
      //   var name = v.properties.name
      //   // 地区经纬度
      //   this.geoCoordMap[name] = v.properties.cp
      //   data.push({ name: v.properties.name, value: v.properties.cp[0], value2: v.properties.cp[1] })
      // })
      var data = [
        { "name": "新疆", value: 29780, value2: 80 },
        { "name": "西藏", value: 2186, value2: 80 },
        { "name": "内蒙古", value: 1135, value2: 80 },
        { "name": "青海", value: 29780, value2: 80 },
        { "name": "四川", value: 2568, value2: 80 },
        { "name": "黑龙江", value: 29780, value2: 80 },
        { "name": "甘肃", value: 6959, value2: 80 },
        { "name": "云南", value: 5632, value2: 80 },
        { "name": "广西", value: 6707, value2: 80 },
        { "name": "湖南", value: 29780, value2: 80 },
        { "name": "陕西", value: 1894, value2: 80 },
        { "name": "广东", value: 15769, value2: 80 },
        { "name": "吉林", value: 8259, value2: 80 },
        { "name": "河北", value: 5741, value2: 80 },
        { "name": "湖北", value: 3030, value2: 80 },
        { "name": "贵州", value: 4542, value2: 80 },
        { "name": "山东", value: 19780, value2: 80 },
        { "name": "江西", value: 3157, value2: 80 },
        { "name": "河南", value: 6690, value2: 80 },
        { "name": "辽宁", value: 8678, value2: 80 },
        { "name": "山西", value: 5303, value2: 80 },
        { "name": "安徽", value: 29780, value2: 80 },
        { "name": "福建", value: 10259, value2: 80 },
        { "name": "浙江", value: 3016, value2: 80 },
        { "name": "江苏", value: 3202, value2: 80 },
        { "name": "重庆", value: 4540, value2: 80 },
        { "name": "宁夏", value: 19780, value2: 80 },
        { "name": "海南", value: 8626, value2: 80 },
        { "name": "台湾", value: 4361, value2: 80 },
        { "name": "北京", value: 20000, value2: 80 },
        { "name": "天津", value: 4080, value2: 80 },
        { "name": "上海", value: 19780, value2: 80 },
        { "name": "香港", value: 6991, value2: 80 },
        { "name": "澳门", value: 13873, value2: 80 },
      ];
      var geoCoordMap = {
        "新疆": [86.9023, 41.148],
        "西藏": [87.8695, 31.6846],
        "内蒙古": [110.5977, 41.3408],
        "青海": [95.2402, 35.4199],
        "四川": [102.9199, 30.1904],
        "黑龙江": [128.1445, 46.7156],
        "甘肃": [102.7129, 38.166],
        "云南": [101.0652, 24.6807],
        "广西": [108.7813, 23.6426],
        "湖南": [111.5332, 27.3779],
        "陕西": [108.5996, 33.7396],
        "广东": [113.8668, 22.8076],
        "吉林": [126.1746, 43.5938],
        "河北": [115.4004, 38.1688],
        "湖北": [112.2363, 30.8572],
        "贵州": [106.6113, 26.6385],
        "山东": [118.2402, 36.2307],
        "江西": [115.7156, 27.99],
        "河南": [113.0668, 33.8818],
        "辽宁": [123.0438, 41.0889],
        "山西": [112.44, 37.73],
        "安徽": [117.2461, 31.0361],
        "福建": [118.3008, 25.9277],
        "浙江": [120.498, 29.0918],
        "江苏": [119.8586, 32.915],
        "重庆": [107.7539, 29.8904],
        "宁夏": [105.9961, 37.1096],
        "海南": [109.9512, 19.2041],
        "台湾": [120.8254, 23.5986],
        "北京": [116.4551, 40.2539],
        "天津": [117.4219, 39.4189],
        "上海": [121.4648, 31.2891],
        "香港": [114.6178, 22.3242],
        "澳门": [113.5547, 21.6484],
        '南海诸岛': [128.8254, 21.5986]
      };
      var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value, data[i].value2),
            });
          }
        }
        return res;
      };
      var convertedData = [
        convertData(data),
        convertData(
          data
            .sort(function (a, b) {
              return b.value - a.value;
            })
            .slice(0, 6)
        ),
      ];
      data.sort(function (a, b) {
        return a.value - b.value;
      });
      option = {
        animation: true,
        animationDuration: 1000,
        animationEasing: "cubicInOut",
        animationDurationUpdate: 1000,
        animationEasingUpdate: "cubicInOut",
        geo: {
          map: "china",
          zoom: 0.9,
          label: {
            emphasis: {
              show: false,
            },
          },
          roam: false,
          itemStyle: {
            normal: {
              borderColor: "#7fb3ff",
              borderWidth: 3,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "#468ff8", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#0a2c6d", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
              // shadowColor: 'rgba(128, 217, 248, 1)',
              shadowColor: "#468ff8",
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 20,
            },
            emphasis: {
              areaColor: {
                colorStops: [
                  {
                    offset: 0,
                    color: "#3844aa", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#7284fc", // 100% 处的颜色
                  },
                ],
              },
              borderColor: "#b3baff",
              borderWidth: 5,
            },
          },
          tooltip: {
            trigger: "item",
            className: "custom-tooltip-box",
            confine: true, // 不超出当前表

            formatter: (params, ticket, callback) => {
              // console.log(params, '走了这里了')
              // 清空所有轮播
              for (var k in geoCoordMap) {
                that.chinaMap.dispatchAction({
                  // type: 'geoUnSelect',
                  type: "downplay",
                  name: k,
                  geoIndex: 0,
                });
                that.chinaMap.dispatchAction({
                  // type: 'geoUnSelect',
                  type: "downplay",
                  name: k,
                  seriesName: params.seriesName,
                });
                that.chinaMap.dispatchAction({
                  // type: 'geoUnSelect',
                  type: "downplay",
                  name: k,
                  seriesName: "series\u00001",
                });
              }
              that.chinaMap.dispatchAction({
                // type: 'geoSelect',
                type: "highlight",
                name: params.name,
                geoIndex: 0,
              });
              that.chinaMap.dispatchAction({
                // type: 'geoSelect',
                type: "highlight",
                name: params.name,
                seriesName: params.seriesName,
              });
              that.chinaMap.dispatchAction({
                // type: 'geoSelect',
                type: "highlight",
                name: params.name,
                seriesName: "series\u00001",
              });
              return `<div class="bgTooltip" style="background: rgba(50,50,50,0.7);font-size:36px">
              <div class="flex items-center">
                <img src="./img/yellowArrow.png" style="width: 12px;height: 22px;margin-right:10px" alt=""><span class="fb">${params.name}</span>
              </div>
                <div class="blueIcon flex items-center">项目数量：<span class="fb" style="color:#68BDFF;">${params.value[3]}<span style="font-size:20px" class="fn">个</span></span></div>
                <div class="blueIcon flex items-center">投资总额：<span class="fb" style="color:#68BDFF">${params.value[2]}<span style="font-size:20px" class="fn">亿</span></span></div>
              </div>`;
            },
          },
          regions: [
            {
              name: "山西",
              value: 2000,
              itemStyle: {
                emphasis: {
                  borderColor: "#ffe036",
                  borderWidth: 5,
                  areaColor: {
                    type: "radial",
                    x: 0.5,
                    y: 0.5,
                    r: 0.8,
                    colorStops: [
                      {
                        offset: 0,
                        color: "#ffe036", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#7c732a", // 100% 处的颜色
                      },
                    ],
                    globalCoord: false, // 缺省为 false
                  },
                },
              },
            },
            // {
            //   name: "南海诸岛",
            //   itemStyle: {
            //     // 隐藏地图
            //     normal: {
            //       opacity: 0, // 为 0 时不绘制该图形
            //     },
            //   },
            //   label: {
            //     show: false, // 隐藏文字
            //   },
            // },
          ],
        },
        tooltip: {
          trigger: "item",
          className: "custom-tooltip-box",
          confine: true, // 不超出当前表
        },
        xAxis: {
          type: "value",
          scale: true,
          position: "top",
          boundaryGap: false,
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            margin: 2,
            textStyle: {
              color: "#aaa",
            },
          },
        },
        yAxis: {
          type: "category",
          nameGap: 16,
          axisLine: {
            show: false,
            lineStyle: {
              color: "#ddd",
            },
          },
          axisTick: {
            show: false,
            lineStyle: {
              color: "#ddd",
            },
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: "#ddd",
            },
          },
          data: categoryData,
        },
        series: [
          {
            type: "effectScatter",
            colorBy: "data",
            coordinateSystem: "geo",
            data: convertedData[0],
            symbolSize: function (val) {
              return Math.max(val[2] / 500, 8);
            },
            showEffectOn: "emphasis",
            rippleEffect: {
              brushType: "stroke",
              color: "#58F7DF",
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: true,
                fontSize: "30",
                color: "#fff",
              },
            },
            itemStyle: {
              normal: {
                color: "#ffc809",
                shadowBlur: 50,
                shadowColor: "#ffc809",
              },
              emphasis: {
                color: "#58F7DF",
                shadowBlur: 50,
                shadowColor: "#58F7DF",
              },
            },
            zlevel: 99,
          },
          {
            type: "effectScatter",
            colorBy: "data",
            coordinateSystem: "geo",
            data: [
              {
                name: "山西",
                value: [112.43, 37.73, 5303, 80],
              },
            ],
            symbolSize: function (val) {
              return Math.max(val[2] / 500, 8);
            },
            showEffectOn: "emphasis",
            rippleEffect: {
              brushType: "stroke",
              color: "#DF62F2",
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: true,
                fontSize: "30",
                color: "#fff",
              },
            },
            itemStyle: {
              normal: {
                color: "#ffc809",
                shadowBlur: 50,
                shadowColor: "#ffc809",
              },
              emphasis: {
                color: "#DF62F2",
                shadowBlur: 50,
                shadowColor: "#DF62F2",
              },
            },
            zlevel: 999,
          },
        ],
      };
      var categoryData = [];
      var barData = [];
      var sum = 0;
      for (var i = 0; i < data.length; i++) {
        categoryData.push(data[i].name);
        barData.push(data[i].value);
        sum += data[i].value;
      }
      this.chinaMap.on('click', function (params) {
        if (params.name == '山西') {
          that.chinaMap.dispose()
          that.leftEcharts16.dispose()
          that.mapShow = true
          setTimeout(() => {
            that.leftEcharts12Fun()
            that.leftEcharts14Fun()
            that.leftEcharts9Fun()
            that.leftEcharts15Fun()
            that.leftEcharts13Fun()
            that.shanxiEchartsFun()
          })
        }
      })
      tools.loopShowTooltip(this.chinaMap, option, {
        interval: 2000,
        loopSeries: false,
        seriesIndex: 0,
      });
      this.chinaMap.setOption(option);
    },
    leftEcharts9Fun () {
      let that = this;
      this.leftEcharts9 = echarts.init(this.$refs["leftEcharts9"]);
      // var ROOT_PATH = 'https://echarts.apache.org/examples';
      let option = {
        backgroundColor: "#00000000",
        globe: {
          globeRadius: 55,
          baseTexture: "./img/3D/world1.jpg",
          heightTexture: "./img/3D/world1.jpg",
          displacementScale: 0.04,
          shading: "realistic",
          // environment: './img/3D/world2.jpg',
          realisticMaterial: {
            roughness: 0.9,
          },
          postEffect: {
            enable: true,
          },
          light: {
            main: {
              intensity: 3,
              shadow: true,
            },
          },
        },
      };
      that.leftEcharts9.setOption(option);
    },
    leftEcharts10Fun () {
      let that = this;
      this.leftEcharts10 = echarts.init(this.$refs["leftEcharts10"]);
      option = {
        grid: {
          top: 45,
          right: 0,
          left: 80,
          bottom: 80,
        },
        tooltip: {
          show: true,
          trigger: "axis",
          formatter: (data) => {
            return `${data[0].name
              }<br /><span style="display:inline-block;border-radius:50%; width:20px;height:20px;background-color:${data[0].color
              }"></span> ${data[0].seriesName}：${that.numFormat(
                data[0].value
              )}亿<br/><span style="display:inline-block;border-radius:50%; width:20px;height:20px;background-color:${data[1].color.colorStops[0].color
              }"></span> ${data[1].seriesName}：${that.numFormat(
                data[1].value
              )}亿`;
          },
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
          borderColor: "rgba(50,50,50,0.7)",
          textStyle: {
            color: "#fff",
            fontStyle: "normal", // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
            fontWeight: "normal", // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
            fontSize: "28", // 文字字体大小
          },
        },
        xAxis: {
          data: commonCompany,
          axisTick: {
            show: false,
          },
          // x轴的字体颜色
          axisLabel: {
            rotate: 40,
            textStyle: {
              color: "white",
              fontSize: "20",
              fontFamily: "Microsoft YaHei",
            },
          },
          //y轴线的颜色以及宽度
          axisLine: {
            show: true,
            lineStyle: {
              color: "#1E5389",
              width: 1,
              type: "solid",
            },
          },
        },
        yAxis: {
          name: "亿",
          axisTick: {
            lineStyle: {
              color: "#18416F",
            },
          },
          // y轴的字体颜色
          axisLabel: {
            textStyle: {
              color: "white",
              fontSize: "20",
              fontFamily: "Microsoft YaHei",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#68b4dd66",
              width: 1,
              type: "dashed",
            },
          },
          //y轴线的颜色以及宽度
          axisLine: {
            show: true,
            lineStyle: {
              color: "#1E5389",
              width: 1,
              type: "solid",
            },
          },
          nameTextStyle: {
            color: "#fff",
            fontSize: 20,
            fontFamily: "Microsoft YaHei",
          },
        },
        series: [
          {
            name: "已用额度",
            type: "pictorialBar",
            symbol: "fixed",
            symbolSize: [20, 5],
            symbolMargin: 2,
            symbolRepeat: "repeat",
            data: [
              26, 36, 16, 46, 26, 36, 16, 46, 26, 36, 16, 46, 26, 36, 16, 46,
              26, 36,
            ],
            showBackground: false,
            barWidth: "15",
            itemStyle: {
              color: "#40A9FF",
            },
            zlevel: 1,
          },
          {
            name: "总额度",
            type: "pictorialBar",
            symbol: "fixed",
            symbolSize: [30, 5],
            symbolMargin: 2,
            symbolRepeat: "repeat",
            data: [
              390, 390, 390, 200, 390, 390, 390, 200, 390, 390, 390, 200, 390,
              390, 390, 200, 390, 200,
            ],
            barGap: "-130%",
            barWidth: "25",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "#b9b7c030",
                },
                {
                  offset: 1,
                  color: "#b9b7c030",
                },
              ]),
            },
          },
        ],
      };
      //轮播
      tools.loopShowTooltip(that.leftEcharts10, option, {
        interval: 2000,
        loopSeries: true,
      });
      //注册
      that.leftEcharts10.setOption(option);
    },
    // 重点项目两线指标轮播方法
    scrollChange (index) {
      if (index == 18) {
        this.count = -1;
      } else {
        this.count = index;
      }
      if (this.count > 12 && this.count != 18) {
        this.countType = 1;
      } else {
        this.countType = 0;
      }
      for (var i = 0; i < this.list.length; i++) {
        if (i == 2) {
          this.list[i].classList.add("light");
        } else {
          this.list[i].classList.remove("light");
        }
      }
      this.leftEcharts11 ? this.leftEcharts11.dispose() : "";
      this.leftEcharts11Fun();
    },
    leftEcharts11Fun () {
      let that = this;
      this.leftEcharts11 = echarts.init(this.$refs["leftEcharts11"]);
      option = {
        tooltip: {
          trigger: "axis",
          formatter:
            "指标：" +
            "{c0}" +
            "<br/>" +
            "发展线：" +
            "{c1}" +
            "<br/>" +
            "生存线：" +
            "{c2}", //+ '<br/>'+ '{a1}：{c1}' + '%',
          axisPointer: {
            type: "shadow",
          },
          backgroundColor: "rgba(50,50,50,0.7)",
          borderColor: "rgba(50,50,50,0.7)",
          textStyle: {
            color: "#fff",
            fontStyle: "normal", // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
            fontWeight: "normal", // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
            fontSize: "28", // 文字字体大小
          }
        },
        grid: {
          top: "10%",
          right: "5%",
          left: "15%",
          bottom: "20%",
        },
        xAxis: {
          data: [
            "总投资收益率",
            "销售利润率",
            "成本费用利润率",
            "总资产周转率",
            "财务内部收益率",
          ],
          // data: left15[this.countType],
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: "#005094",
              width: 1,
            },
          },
          axisTick: {
            show: true, //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            rotate: 30,
            textStyle: {
              color: "#fff", //X轴文字颜色
              fontSize: 20,
              fontFamily: "Microsoft YaHei",
            },
          },
        },
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                color: "#68b4dd66",
                type: "dashed",
              },
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              formatter: "{value}%",
              textStyle: {
                color: "#fff",
                fontSize: 20,
                fontFamily: "Microsoft YaHei",
              },
            },
            nameTextStyle: {
              color: "#ebf8ac",
              fontSize: 16,
              fontFamily: "Microsoft YaHei",
            },
          },
        ],
        series: [
          {
            name: "实际值",
            type: "bar",
            barWidth: 20,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#69c0ff",
                  },
                  {
                    offset: 1,
                    color: "#082550",
                  },
                ]),
              },
            },
            data: [70, 52, 33, 41, 52],
            // data: this.storageRecordConfig.data.length == 0 ? [] : this.storageRecordConfig.data.length == 1 ? left12[this.count][2] : left12[this.count + 1][2]
          },
          {
            name: "",
            type: "line",
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#69c0ff",
                  },
                  {
                    offset: 1,
                    color: "green",
                  },
                ]),
              },
            },
            data: [20, 30, 15, 28, 36],
            // data: this.storageRecordConfig.data.length == 0 ? [] : this.storageRecordConfig.data.length == 1 ? left12[this.count][1] : left12[this.count + 1][1]
          },
          {
            name: "",
            type: "line",
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#69c0ff",
                  },
                  {
                    offset: 1,
                    color: "yellow",
                  },
                ]),
              },
            },
            data: [15, 22, 17, 33, 14],
            // data: this.storageRecordConfig.data.length == 0 ? [] : this.storageRecordConfig.data.length == 1 ? left12[this.count][0] : left12[this.count + 1][0]
          },
        ],
      };
      //轮播
      tools.loopShowTooltip(that.leftEcharts11, option, {
        interval: 2000,
        loopSeries: true,
      });
      //注册
      that.leftEcharts11.setOption(option);
    },
    leftEcharts12Fun () {
      let that = this;
      this.leftEcharts12 = echarts.init(this.$refs["leftEcharts12"]);
      var totalData = [{
        name: '传统产业',
        value: 12,
        radio: 0.13
      }, {
        name: '公共基础产业',
        value: 52,
        radio: 0.01
      }, {
        name: '战略性新兴产业',
        value: 15,
        radio: 3.9
      }, {
        name: '特色优势产业',
        value: 56,
        radio: 10.5
      }];

      var data = [];
      for (var i = 0; i < totalData.length; i++) {
        data.push({
          value: totalData[i].value,
          name: totalData[i].name,
          itemStyle: {
            normal: {
              borderWidth: 8,
              shadowBlur: 0,
              borderColor: commonColor[i],
              shadowColor: commonColor[i]
            }
          }
        },
          {
            value: 5,
            name: '',
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                color: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 0
              }
            }
          }
        );
      }
      var seriesOption = [
        {
          name: '',
          type: 'pie',
          clockWise: false,
          radius: [170, 160],
          center: [260, 250],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              }
            }
          },
          data: data
        },
        {
          type: 'pie',
          radius: [120, 120],
          center: [260, 250],
          zlevel: 3,
          silent: true,
          label: {
            normal: {
              show: false
            },
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: _pie3()
        },
        {
          type: "liquidFill",
          radius: "40%",
          data: [left2[0]],
          center: [260, 250],
          backgroundStyle: {
            color: {
              type: "radial",
              x: 0.5,
              y: 0.5,
              r: 0.5,
              // 水球体颜色
              colorStops: [
                {
                  offset: 0,
                  color: "#010a11",
                },
                {
                  offset: 0.75,
                  // color: "#203852",
                  color: "#1a2f45",
                },
                {
                  offset: 1,
                  // color: "#354e6d",
                  color: "#2b405a",
                  // color: "#314967",
                },
              ],
              globalCoord: false,
            },
          },
          outline: {
            borderDistance: 0,
            itemStyle: {
              borderWidth: 0,
              borderColor: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                ],
                globalCoord: false,
              },
            },
          },
          color: [
            {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: '#237386',
              },
              {
                offset: 1,
                color: '#0078C8',
              },],
            },
            {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: '#2F97A9',
              },
              {
                offset: 1,
                color: '#0078C8',
              },],
            },
            {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: '#48E0ED',
              },
              {
                offset: 1,
                color: '#0078C8',
              },],
            }
          ],
          label: {
            normal: {
              textStyle: {
                fontSize: '50',
                color: "#58E6F7", // x轴文字颜色
              },
            },
          },
        },
      ];
      option = {
        color: commonColor,
        title: {
          show: false,
          text: '风险类型123',
          top: '48%',
          textAlign: "center",
          left: "49%",
          textStyle: {
            color: '#fff',
            fontSize: 18,
            fontWeight: '400'
          }
        },
        tooltip: {
          show: false
        },
        legend: {
          icon: "circle",
          orient: 'vertical',
          formatter: function (name) {
            let num
            for (let i = 0; i < totalData.length; i++) {
              if (totalData[i].name === name) {
                num = name + ':' + totalData[i].value + '(' + totalData[i].radio + '%' + ')'
              }
            }
            return num
          },
          data: ['传统产业', '公共基础产业', '战略性新兴产业', '特色优势产业'],
          right: 0,
          bottom: 0,
          align: 'left',
          textStyle: {
            color: '#FFF',     // 文字的颜色
            fontSize: '20',    // 文字字体大小
            fontFamily: 'Microsoft YaHei'
          },
          itemGap: 20
        },
        toolbox: {
          show: false
        },
        series: seriesOption
      }

      function _pie3 () {
        let dataArr = [];
        for (var i = 0; i < 100; i++) {
          if (i % 2 === 0) {
            dataArr.push({
              name: (i + 1).toString(),
              value: 25,
              itemStyle: {
                normal: {
                  color: "#5A5DE0",
                  borderWidth: 1,
                  borderColor: "#5A5DE0"
                }
              }
            })
          } else {
            dataArr.push({
              name: (i + 1).toString(),
              value: 20,
              itemStyle: {
                normal: {
                  color: "rgba(0,0,0,0)",
                  borderWidth: 0,
                  borderColor: "rgba(0,0,0,0)"
                }
              }
            })
          }

        }
        return dataArr

      }
      //轮播
      tools.loopShowTooltip(that.leftEcharts12, option, {
        interval: 2000,
        loopSeries: true,
      });
      //注册
      that.leftEcharts12.setOption(option);
    },
    leftEcharts13Fun () {
      let that = this;
      this.leftEcharts13 = echarts.init(this.$refs["leftEcharts13"]);
      var totalData = [{
        name: '新建',
        value: 12,
        radio: 0.13
      }, {
        name: '续建',
        value: 52,
        radio: 0.01
      }];

      var data = [];
      for (var i = 0; i < totalData.length; i++) {
        data.push({
          value: totalData[i].value,
          name: totalData[i].name,
          itemStyle: {
            normal: {
              borderWidth: 8,
              shadowBlur: 0,
              borderColor: commonColor[i],
              shadowColor: commonColor[i]
            }
          }
        },
          {
            value: 5,
            name: '',
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                color: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 0
              }
            }
          }
        );
      }
      var seriesOption = [
        {
          name: '',
          type: 'pie',
          clockWise: false,
          radius: [170, 160],
          center: [350, 250],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              }
            }
          },
          data: data
        },
        {
          type: 'pie',
          radius: [120, 120],
          center: [350, 250],
          zlevel: 3,
          silent: true,
          label: {
            normal: {
              show: false
            },
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: _pie3()
        }
      ];
      option = {
        color: commonColor,
        title: {
          show: true,
          text: '35%',
          top: '40%',
          textAlign: "center",
          left: "50%",
          textStyle: {
            fontWeight: '600',
            fontFamily: 'Microsoft YaHei',
            fontSize: '50',
            color: "#58E6F7", // x轴文字颜色
          }
        },
        tooltip: {
          show: false
        },
        legend: {
          icon: "circle",
          orient: 'vertical',
          formatter: function (name) {
            let num
            for (let i = 0; i < totalData.length; i++) {
              if (totalData[i].name === name) {
                num = name + ':' + totalData[i].value + '(' + totalData[i].radio + '%' + ')'
              }
            }
            return num
          },
          data: ['新建', '续建'],
          right: 0,
          bottom: 0,
          align: 'left',
          textStyle: {
            color: '#FFF',     // 文字的颜色
            fontSize: '20',    // 文字字体大小
          },
          itemGap: 20
        },
        toolbox: {
          show: false
        },
        series: seriesOption
      }

      function _pie3 () {
        let dataArr = [];
        for (var i = 0; i < 1; i++) {
          if (i % 2 === 0) {
            dataArr.push({
              name: (i + 1).toString(),
              value: 25,
              itemStyle: {
                normal: {
                  color: "#5A5DE0",
                  borderWidth: 1,
                  borderColor: "#5A5DE0"
                }
              }
            })
          } else {
            dataArr.push({
              name: (i + 1).toString(),
              value: 20,
              itemStyle: {
                normal: {
                  color: "rgba(0,0,0,0)",
                  borderWidth: 0,
                  borderColor: "rgba(0,0,0,0)"
                }
              }
            })
          }

        }
        return dataArr

      }
      //轮播
      tools.loopShowTooltip(that.leftEcharts13, option, {
        interval: 2000,
        loopSeries: true,
      });
      //注册
      that.leftEcharts13.setOption(option);
    },
    leftEcharts14Fun () {
      let that = this;
      this.leftEcharts14 = echarts.init(this.$refs["leftEcharts14"]);
      that.leftEcharts14.on("showTip", (params) => {
        // 如果是7或者15并且满足防抖则切换
        if (
          (params.dataIndex == 5 || params.dataIndex == 11) &&
          that.echartC1Fd1
        ) {
          that.echartC1Fd1 = false;
          setTimeout(() => {
            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6;
            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6;
            that.leftEcharts14.setOption(option);
            // 防止勿刷新做的防抖
            setTimeout(() => {
              that.echartC1Fd1 = true;
            }, 2000);
          }, 1900);
          // 如果是17表示到了最后一个，那么重新来一遍
        } else if (params.dataIndex == 17 && that.echartC1Fd1) {
          that.echartC1Fd1 = false;
          setTimeout(() => {
            option.dataZoom[0].endValue = 0;
            option.dataZoom[0].startValue = 5;
            that.leftEcharts14.setOption(option);
            // 防止勿刷新做的防抖
            setTimeout(() => {
              that.echartC1Fd1 = true;
            }, 2000);
          }, 1900);
        }
      });
      let option = {
        dataZoom: [
          {
            // start: 9,//默认为@
            // end: 100,//黑认认为1@0
            type: "slider",
            show: false,
            yAxisIndex: 0,
            handlesize: 0, //滑动条的 左右2个滑动条的大小
            startValue: 5, // 初始显示值
            endValue: 0, // 结束显示值
            height: 10, //组件高度
            left: "5%",
            right: "4%", //右边的距离
            bottom: "25%", //底边的距离
            borderColor: "#939",
            fillerColor: "#269cdb",
            borderRadius: 5,
            backgroundColor: "#33384b", //两边未选中的滑动条区域的额色
            showDataShadow: false, //是否显示数据阴影
            showDetail: false, //即拖拽时候是否显示详细数值信息
            truerealtime: true, //是否实时更新
            filterMode: "filter",
          },
          {
            type: "inside",
            show: true,
            start: 1,
            end: 100,
            zoomOnMouseWheel: false, //滚轮是否触发缩放
            moveOnMouseMove: false, //鼠标滚轮触发滚动
          },
        ],
        tooltip: {
          show: true,
          trigger: "axis",
          // formatter: (data) => {
          //   return `${data[0].name
          //     }<br /><span style="display:inline-block;border-radius:50%; width:20px;height:20px;background-color:${data[0].color
          //     }"></span> ${data[0].seriesName}：${that.numFormat(
          //       data[0].value
          //     )}亿<br/><span style="display:inline-block;border-radius:50%; width:20px;height:20px;background-color:${data[1].color.colorStops[0].color
          //     }"></span> ${data[1].seriesName}：${that.numFormat(
          //       data[1].value
          //     )}亿`;
          // },
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
          borderColor: "rgba(50,50,50,0.7)",
          textStyle: {
            color: "#fff",
            fontStyle: "normal", // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
            fontWeight: "normal", // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
            fontSize: "28", // 文字字体大小
          },
        },

        legend: {
          top: "top",
          textStyle: {
            color: "#fff",
            fontSize: 20,
            padding: [0, 20],
          },
        },

        grid: {
          left: '3%',
          right: '7%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          name: '亿',
          nameTextStyle: {
            color: '#fff',
            fontSize: 20,
            fontFamily: 'Microsoft YaHei'
          },
          type: 'value',
          axisLabel: {
            textStyle: {
              color: "white",
              fontSize: '20',
              fontFamily: 'Microsoft YaHei'
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#68b4dd66",
              width: 1,
              type: "dashed",
            },
          },
        },
        yAxis: {
          type: 'category',
          axisTick: {
            lineStyle: {
              color: "#18416F",
            },
          },
          // y轴的字体颜色
          axisLabel: {
            textStyle: {
              color: "white",
              fontSize: '20',
              fontFamily: 'Microsoft YaHei'
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#68b4dd66",
              width: 1,
              type: "dashed",
            },
          },
          //y轴线的颜色以及宽度
          axisLine: {
            show: true,
            lineStyle: {
              color: "#1E5389",
              width: 1,
              type: "solid",
            },
          },
          nameTextStyle: {
            color: '#fff',
            fontSize: 20,
            fontFamily: 'Microsoft YaHei'
          },
          data: that.riskData1.x
        },
        series: [
          {
            name: '实际投资',
            type: 'bar',
            data: that.riskData1.y1,
            barGap: '-145%',
            barWidth: "15",
            zlevel: 10,
            itemStyle: {
              barBorderRadius: [0, 20, 20, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: '#0F357C',
                },
                {
                  offset: 1,
                  color: '#B78CFF',

                },
              ]),
            },
          },
          {
            name: '计划投资',
            type: 'bar',
            data: that.riskData1.y1,
            barWidth: "30",
            itemStyle: {
              barBorderRadius: [0, 50, 50, 0],
              borderColor: '#B78CFF',
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: '#0F357C80',
                },
                {
                  offset: 1,
                  color: '#10417F80',

                },
              ]),
            },
          }
        ]
      };
      //轮播
      tools.loopShowTooltip(that.leftEcharts14, option, {
        interval: 2000,
        loopSeries: true,
      });
      //注册
      that.leftEcharts14.setOption(option);
    },
    leftEcharts15Fun () {
      let that = this;
      this.leftEcharts15 = echarts.init(this.$refs["leftEcharts15"]);
      var xdata = ['煤炭和煤电', '煤电和新能源', '煤炭和化工', '煤炭和数字', '煤炭和降碳'];
      var data = [70, 60, 80, 200, 300];
      var maxArr = [100, 100, 100];
      option = {
        tooltip: {
          show: true,
          trigger: "axis",
          // formatter: (data) => {
          //   return `${data[0].name
          //     }<br /><span style="display:inline-block;border-radius:50%; width:20px;height:20px;background-color:${data[0].color
          //     }"></span> ${data[0].seriesName}：${that.numFormat(
          //       data[0].value
          //     )}亿<br/><span style="display:inline-block;border-radius:50%; width:20px;height:20px;background-color:${data[1].color.colorStops[0].color
          //     }"></span> ${data[1].seriesName}：${that.numFormat(
          //       data[1].value
          //     )}亿`;
          // },
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
          borderColor: "rgba(50,50,50,0.7)",
          textStyle: {
            color: "#fff",
            fontStyle: "normal", // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
            fontWeight: "normal", // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
            fontSize: "28", // 文字字体大小
          },
        },

        grid: {
          left: "4%",
          right: "4%",
          bottom: "3%",
          top: "15%",
          containLabel: true
        },
        xAxis: {
          data: xdata,
          triggerEvent: true,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            rotate: 0,
            interval: 0,
            textStyle: {
              padding: [14, 0, 0, 0],
              fontSize: 14,
              color: "rgba(255,255,255,1)"
            }
          }
        },
        yAxis: {
          name: "单位：个数",
          triggerEvent: true,
          nameTextStyle: {
            color: "rgba(255,255,255,1)",
            fontSize: 16,
            padding: [0, 0, 10, -20]
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,.1)'
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,.1)'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "rgb(148,159,167)",
              fontSize: 16
            }
          }
        },
        series: [
          {
            name: "数量",
            type: "pictorialBar",
            barCategoryGap: "60%",
            // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
            symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
            itemStyle: {
              normal: {
                //渐变色
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: "#01EAED"
                },
                {
                  offset: 0.5,
                  color: "#02C4DD"
                },
                {
                  offset: 1,
                  color: "#029ED9"
                }
                ])
              }
            },
            label: {
              normal: {
                show: false,
                position: "top",
                textStyle: {
                  color: "#fff",
                  fontSize: 20
                }
              }
            },
            data: data,
          }
        ]
      }
      //轮播
      tools.loopShowTooltip(that.leftEcharts15, option, {
        interval: 2000,
        loopSeries: true,
      });
      //注册
      that.leftEcharts15.setOption(option);
    },
    leftEcharts16Fun () {
      let that = this;
      this.leftEcharts16 = echarts.init(this.$refs["leftEcharts16"]);
      // var ROOT_PATH = 'https://echarts.apache.org/examples';
      let option = {
        backgroundColor: "#00000000",
        globe: {
          globeRadius: 85,
          baseTexture: "./img/3D/world1.jpg",
          heightTexture: "./img/3D/world1.jpg",
          displacementScale: 0.04,
          shading: "realistic",
          // environment: './img/3D/world2.jpg',
          realisticMaterial: {
            roughness: 0.9,
          },
          postEffect: {
            enable: true,
          },
          light: {
            main: {
              intensity: 1,
              shadow: true,
            },
          },
        },
      };
      that.leftEcharts16.setOption(option);
    },
    // 回到中国地图
    backChina () {
      let that = this
      if (!this.mapShow) {
        return
      }
      this.mapShow = false
      that.leftEcharts12.dispose()
      that.leftEcharts14.dispose()
      that.leftEcharts9.dispose()
      that.leftEcharts15.dispose()
      that.leftEcharts13.dispose()
      that.shanxiMap.dispose()
      setTimeout(() => {
        that.chinaEchartsFun()
        that.leftEcharts16Fun()
      });
    },
  },
});