pc_kingdee_large_screen/investment/js/investHome.js

let app = new Vue({
  el: '#app',
  data() {
    return {
      showTip: false,
      showTip2: false,
      timeOut: '',
      tipTitle: '',
      tipTitle2: '',
      year: '2022',
      time: '',
      timer: '',
      mapName: 'shanxi',
      geoCoordMap: {},
      config1: {
        number: [100],
        content: '{nt}个',
      },
      storageRecordConfig: null,
      companyList: [
        { name: '山西焦煤' },
        { name: '晋能控股' },
        { name: '华新燃气' },
        { name: '山西建投' },
        { name: '潞安化工' },
        { name: '华远陆港' },
        { name: '航产集团' },
        { name: '大地控股' },
        { name: '国新能源' },
        { name: '汾酒集团' },
        { name: '云时代' },
        { name: '神农科技' },
        { name: '华阳新材' },
        { name: '华舰体育' },
        { name: '交控集团' },
        { name: '文旅集团' },
        { name: '水控集团' },
        { name: '太重集团' },
      ],
      amountList: amountList,
      amountTotal: 0,
      classOption: {
        step: 0.5
      }
    }
  },
  created() {
    this.amountList.map(item => {
      this.amountTotal += Number(item.value)
    })
    this.time = formatDate()
    this.timer = setInterval(() => {
      this.time = formatDate()
    }, 1000)
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
    clearInterval(this.timeOut)
  },
  mounted() {
    setTimeout(() => {
      // 左侧图表
      //this.initChartTip()
      this.initChartTip2()
      this.initChartTip3()
      this.initChartTip4()
      this.initChartL1()
      this.initChartL2()
      this.initChartR1()
      this.initChartR2()
      this.initChinaChart()
      this.initProjectList()
    }, 0)
  },
  methods: {
    numFormat(value) {
      if (!value) return '0'
      var intPart = Number(value).toFixed(0) // 获取整数部分
      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 {
          return intPartFormat + '.' + floatPart
        }
      } else {
        return intPartFormat
      }
    },
    convertData(data) {
      var res = []
      for (var i = 0; i < data.length; i++) {
        var geoCoord = this.geoCoordMap[data[i].name]
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value),
          })
        }
      }
      return res
    },
    initChinaChart() {
      var data = [
        { name: '大同市', value: 60.35, value2: 28 },
        { name: '朔州市', value: 33.61, value2: 13 },
        { name: '忻州市', value: 73.35, value2: 25 },
        { name: '吕梁市', value: 109.04, value2: 45 },
        { name: '太原市', value: 251.67, value2: 113 },
        { name: '阳泉市', value: 25.12, value2: 28 },
        { name: '晋中市', value: 148.57, value2: 52 },
        { name: '临汾市', value: 130.55, value2: 30 },
        { name: '长治市', value: 103.00, value2: 23 },
        { name: '运城市', value: 41.06, value2: 23 },
        { name: '晋城市', value: 45.43, value2: 31 }
      ]

      var moveLine = {
        normal: [
          {
            fromName: '太原市',
            toName: '吕梁市',
            coords: [
              [112.3352, 37.9413],
              [111.3574, 37.7325],
            ],
          },
          {
            fromName: '太原市',
            toName: '忻州市',
            coords: [
              [112.3352, 37.9413],
              [112.4561, 38.8971],
            ],
          },
          {
            fromName: '太原市',
            toName: '临汾市',
            coords: [
              [112.3352, 37.9413],
              [111.4783, 36.1615],
            ],
          },
          {
            fromName: '太原市',
            toName: '阳泉市',
            coords: [
              [112.3352, 37.9413],
              [113.4778, 38.0951],
            ],
          },
          {
            fromName: '太原市',
            toName: '晋中市',
            coords: [
              [112.3352, 37.9413],
              [112.7747, 37.37],
            ],
          },
          {
            fromName: '太原市',
            toName: '运城市',
            coords: [
              [112.3352, 37.9413],
              [111.1487, 35.2002],
            ],
          },
          {
            fromName: '太原市',
            toName: '大同市',
            coords: [
              [112.3352, 37.9413],
              [113.7854, 39.8035],
            ],
          },
          {
            fromName: '太原市',
            toName: '晋城市',
            coords: [
              [112.3352, 37.9413],
              [112.7856, 35.6342],
            ],
          },
          {
            fromName: '太原市',
            toName: '长治市',
            coords: [
              [112.3352, 37.9413],
              [112.8625, 36.4746],
            ],
          },
          {
            fromName: '太原市',
            toName: '朔州市',
            coords: [
              [112.3352, 37.9413],
              [113.0713, 39.6991],
            ],
          },
        ],
      }
      /*获取地图数据*/
      let myChart = echarts.init(this.$refs['echarts-map'])
      echarts.registerMap('shanxi', {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            id: '1409',
            properties: { name: '忻州市', cp: [112.4561, 38.8971], childNum: 14 },
            geometry: {
              type: 'Polygon',
              coordinates: [
                '@@Vx@lnbn¦WlnnUšmš°š²VšV‚VVVnUn„ºlz@l„„@Jƒ@kXWVXl@Lƒa@„ƒKUL„ŽlbnKlLnK‚LnKÆXn°šbVV@bUVl°Un@LnaVJUbW@UX²l‚@ČwlVVIšWnkÆa°„„anV‚Kn°™UW¯@™aVUVk@Un@„aV@ValwUanmWU„k@WVUUanaVwnLVl°@nk@mVU@UVK@w„LVKVU@ƒ„K@UUKVUV@@bnL„a‚V„aôšlIXmlKX_°KVV@bVV„@šzV`kblI„V„Ul‚šL@bnV@V„Ċll„„VlIXW@k„a‚U²blKšVnIlJ„albXXlWVn°JnšnL@l@XlJlaX@„X˜W²@l_VmnKšU„blU@mnkVK„¯@U@ƒma@kX¥VƒmakkƒLƒa@aƒ@WIUUVXWWnk@a°a@kkm@kUUmJm@WUUUIk`m@V—kaWWkX™KmƒXk¯ƒ@WKƒLkak@±bƒw@ƒaƒa@akaƒ@ma¯@ƒL—KÇÅkKWbkmġ™±ÅUƒLUK™VVkƒm¯LUVVbƒ„UwUW¯bm„ƒULƒxWJ—@ƒklmkUm@@KnwVkVK@akwƒ@@a¯bƒKkn›VUI™b¯mmbk@UbmKUL@xUUƒ@klmLUŽlVXI‚VVVUVUœU`mLXVWbXnW`Ų°xmŽxU@mĉƒƒwU@mbU@UƒmbkVW¦kJ™@ƒX@`¯Im@UlUVVnb@bWJXnmbƒJUU™UUaƒ@UamIkaƒxƒ@@x@b',
              ],
              encodeOffsets: [[113614, 39657]],
            },
          },
          {
            type: 'Feature',
            id: '1411',
            properties: { name: '吕梁市', cp: [111.3574, 37.7325], childNum: 13 },
            geometry: {
              type: 'Polygon',
              coordinates: [
                '@@@a@w„@„wlbnJVb„@VbšVVV„InaWmXI@a‚aUmVUVkn@°J@_„Wš@lIX¥lUnaV„V@naV@„xĊ„n‚V@‚wn¯wƱX_WmXaWUnKV_V›VUUUUWJkUVnKlk¯™@@kmKUaŁ±KkU@WmI@WUIlUUmVwXƒ‚w@ƒUlUVwœV‚@„Lnb‚W@anU@UšaVkô@l»n@na˜JnUÈLVaƃUUVm„VKVƒ²L@mU_lK@UVWkU‚a@a@U¯aUaƒÑóÑUb™„ƒKk@@aƒk¯mVaUwVƒÑkWUmK@UUKmXUWÝwUa™LUU@aWJUUU@Ua݄U@WL@VKVaVI@WnU@alIVKƒƒ@kIƒmIkJ@™m@ƒ™@@_™K@xƒ@kaW@U„@Vmn@ŽUK@mIƒJUXV¤XXWlkKƒkkK@XmJVakImJU@ó™¯LWKUV@nUVƒLkxmKkLma@kXKmmƒLƒab™LmK@V@mXVÆUxƒX@`nL„aV@@VmLUVnLlLš˜„b@„šŽ°²nx@b‚VUxlb@V¯bUV@zV‚XVĊXVx@lVn@VnnmŽUš@LlJXVƒz¯VWVXbšV@bmn™VUVk„Çþń@XVxmbUlV„Uln„W„@„Xl‚@VLXÒ@bÞJ°¦„L˜ò„@nU‚b@°„X@ŽXbmVU„V„nb@x‚x',
              ],
              encodeOffsets: [[113614, 39657]],
            },
          },
          {
            type: 'Feature',
            id: '1410',
            properties: { name: '临汾市', cp: [111.4783, 36.1615], childNum: 17 },
            geometry: {
              type: 'Polygon',
              coordinates: [
                '@@nW‚@@UnLšK‚a„b„KnnWL@lnblKnLlw„KVU@mVUXL°KôšV@nIlJUbnI@WlL„llLXkWWU£VW„InJ‚@VL@nm@UVƒX@lb„@@wšL@`‚@„šn@V@lw„@n„VmVX„WmwnUlƒœa@_lK„wVlUn°xVKVXXWlUšVVI@K@K„n°KœwlVlU@kna@V_„Wn‚m„UVm@kXml_@m„LlKXw°m@_ôJVUV@X™l@UaV@Va°I„lk»VwUkVmwUmmVn@V¯@KƒU—wmK@U¯wUVÝ@mJƒU—nWK™@@UnKVa„_lykUmKÛnm@™x@ƒUUlwVk™ƒXW@ƒa@Uƒ@@K@ƒkIV™nammVakUlƒ@wX@@kƒ™¯@ƒVVbml@„„°UbULmlVbnbÅK±VƒKVXUJWa@ULWaUU@@U@aWK@UkxUKƒLUUUJ±UkL@V±kk@kam@UV@l@LWl@n@VVUx„LlUUx@VUV™U@aƒIUl™L@°mLU‚ƒbkUUaWUUaUU@aWK—LWJ@bUL@VUVVbU@m@a@kmKmnĉlUK™XƒWUblb—xmIkƒƒU@xWb@lkšVx™LXŽmzVV@bklVVUzm˜@bk„@Vx@xlŽU„@lUbVnl@„Wxnl@n@ŽUbV„mL‚mƒb@`X@lUX@@xlnkLWaUJnnWV™Vn@l„@bULVV@l™V@XnJVX',
              ],
              encodeOffsets: [[113063, 37784]],
            },
          },
          {
            type: 'Feature',
            id: '1407',
            properties: { name: '晋中市', cp: [112.7747, 37.37], childNum: 11 },
            geometry: {
              type: 'Polygon',
              coordinates: [
                '@@@šlInJ„lJ„@‚„ULkJ@bmV@XUJUb‚L@UXKV@ރVbV@VVXI@bVVšKVbÞxVXnWVL@VnLV‚lX„ÒUŽVxUb°n„l@bl@„LšƒVaô҄ÒVb°b@VnLnnV@lmn@lb„U„V@„‚JœUVV‚Xkl@lUzmJ@xšXkl‚bUn„JVšUb„nU‚lb„V@nlLX@lakšV`Ub°š@XVJnU‚L²KlxnI@KV@lbUbVV„KnVl@„zlm@Uš@nŽšI@WUaVl@@mVU„@XkW@ƒnkVKVƒ„_Vw„y@knwVa‚@XalU„@šVnml@„X@V„L‚KVaÞbnnlJšI„mVKn„VVVInVlU„@„m@™mXK@UmyUI@mWUUakamw@wUwmLkakwVƒmK™w@wUam£y@am_ƒW@™UU@knmm„amU@WUa@knw@ƒUUUUV@nƒJm@mVUkKVUUUkKmwƒKULƒKUImV@lUn™nŽm@mbUK@°™bUnmbUmkkƒWUb@am@UXkK@a±@™V™@ĉř„V‚UXVxUVkLWl¯@@bULUlm@@nm`—XƒlWakIkm›VUbUL@Vm@kIƒ@@Kšm@—VaX‚I@W@aU@kUƒVU_™KƒbƒJkkǎ™b@nkKmL™wÅW@kVUUƒVU@WUIƒJmIXmma@_kyVaUUlkUm@ƒkU›x¯Lƒm@L@LUJ™UkVWXUWUL¯wVmUkƒxkL@`›bk„mVnxƒXUWUnmƒƒ@kxU@',
              ],
              encodeOffsets: [[114087, 37682]],
            },
          },
          {
            type: 'Feature',
            id: '1408',
            properties: { name: '运城市', cp: [111.1487, 35.2002], childNum: 13 },
            geometry: {
              type: 'Polygon',
              coordinates: [
                '@@„Vl„nJ˜wkaVa„XšWVLĊknmnL‚l@@bn‚V@UaVU@UVK@aXI˜KXL@bVVVbXVVblV„aVnK@¯šKVk„J@bšVVU@UVwkVƒKVwUUm@@Xk@K@kVUn@lbl@²l@UlK²VVIVV„KVLlw@VXL@b@VV@VŽXbVK‚@XbVIUW„L‚U²ÆLmaUankVKVaƒ¯@ƒnkUa„U°@„š‚n@@kWa„UVaXUW@IXKVw@U™ƒ„™WU@W@@UUƒU@mn@ƒ`m@UUULkUmJ™IUƒ@@UƒK@U@›anƒ™ak_@wmKUwmakV™kmK™V™k¯b™wƒ`kwUIÇx¯»ÇaŃmn@@™mƒmUkV@wkKW@kxmL™UkĉLÝk™xÝw¯lóVU„mV@ĀVVX¦W¤kz@`Vx°„²ĸ‚š@„Ul@x„êĸNJ°¤V„VlXLWnXxmV@nUl@„',
              ],
              encodeOffsets: [[113232, 36597]],
            },
          },
          {
            type: 'Feature',
            id: '1402',
            properties: { name: '大同市', cp: [113.7854, 39.8035], childNum: 8 },
            geometry: {
              type: 'Polygon',
              coordinates: [
                '@@²£šyl@Ȑ˜Ė@bĸŽĢbĸ„˜X„a‚KŤnn@ŎôllÈx„nVnÞDŽV@b‚nXllL°KšbVb@J@b—„‚„@ŽU„„xlKXLlKlXk„@Ulk„JlkUƒVKXUƒÇVIVm@_nǚLšašl‚w„VnU@UUwma@aƒaÝaLmUk@@Wƒ@U@@X™wVWÝUUUk@@VmLƒKV»nwUw™aUL@`mzƒJUIVƒUaUw™KUaVIlJôanÑlLVUn@ša„@VV„@@UUwVK°Vn_lJÆLœéW@UUUÅ@»lm@aÞIVwXW˜UUkkm@U@aƒU@mwU£VWU_kWmƒXwW_°yUkkK@UÇK@kkUVymóK—U@KWIƒbUak@mJ@bkbmLkŽ™UmƒkVU„W¦@lnb@„@Vƒ°ULml@nkVƒa™VmLUnk`±@—XƒWW@kbǦXŽ¯„WxI@xmbmxXlWV„„@bŎUz@J‚b@bÞb™ŽU@Wbk@ƒxk@WX¯VۙƒWÝbÝUkVUU@alI@a@akLWa™m@U¯UUmÇL@K@aU@¯VUkƒKmX@`@œkJ@nV‚Ub@lbVÆXVW„ULU`VbkLUV@XWl@bXJ˜@VbV@Vl',
              ],
              encodeOffsets: [[115335, 41209]],
            },
          },
          {
            type: 'Feature',
            id: '1404',
            properties: { name: '长治市', cp: [112.8625, 36.4746], childNum: 12 },
            geometry: {
              type: 'Polygon',
              coordinates: [
                '@@Uk™Lky@I‚JVa@mÞaWšy@_W@_WƒXVlUVwš@nw°K@m„UƒVaƒmVkU@mmmnLVUmKXa™U@IlKVUnK@UmWkX@WV_Vƒ@akU@a„KWIXyƒIUVmUn™Ua@WaXUVKVmkUWVkUƒLU@@VƒbƒKbƒIUmƒ@mbVL—x›WUUkn±V¯wƒbÅJUbmLkbmKÅKƒbVnUbƒV™KUb™KUbmLKmƒb™aƒKkUm@UŽnn‚VnxUVlUxl¼ƒk¯JUbU@Vbk@WšU@UVóI@`¯nWxkLƒK@nk`Wn@lUnƒVnm‚ƒXU`@mb@lkV@„VnklVVUblz@`nbWnnJ„IVJ@XUVV„UV@lÆXšxnKlL@mšaȍll„I„ašLV`„UlVV@@b@XJWUb@˜™n@L„@lJn@@UVKVaœUlnlJXb„k˜Wn_@mn@VkVK@a°@XklKVUUwVWUšƒĊƚ@šU²@@blLVWn@@bVa„XllVnnaVmša@¯VLnan@‚šmVm@knUVJ',
              ],
              encodeOffsets: [[116269, 37637]],
            },
          },
          {
            type: 'Feature',
            id: '1406',
            properties: { name: '朔州市', cp: [113.0713, 39.6991], childNum: 5 },
            geometry: {
              type: 'Polygon',
              coordinates: [
                '@@XXWVXVWnnlnn@èƼ@„„xlš„ŽV„nblšššVŽÈUVl‚š@„blnœL܃ĊmUkU@Ua‚—@WI@aXk@WVUlKUaV_VKXƒWUUÅka@VaU@mlI@›@_nW„LVl°UV@@b@LÈKVn°V@VšnXblK@b@bkJ@bVVlUÞVÞa„Xܚ°UXWl@„wl@XaV@šÝa@aa@IVyƍ@aƒƒXUWknwna@w‚JXw°ƒWÈ¥kI@W@kmKm™¯IUmkXWWkaƒbkImJ™UkL±aVƒb@lWXkJƒUkƒĉkƒ@UmU@a™KkƒVƒUkJlaU_™yƒ@UU@aUU¯LW`kLWnkJó™ƒbUƒbmK@aU@UVVL@VƒL@„UVULƒK@xUL@VUV@nml¯@UkmKUxmbVbUV@XƒlXVmnVbkxUbU@ƒbm@@VUlUVšb°@VX¯šm‚',
              ],
              encodeOffsets: [[114615, 40562]],
            },
          },
          {
            type: 'Feature',
            id: '1405',
            properties: { name: '晋城市', cp: [112.7856, 35.6342], childNum: 6 },
            geometry: {
              type: 'Polygon',
              coordinates: [
                '@@lV„Lšb„an‚LnKVašLVašL„UVaUm„aÆLnLlanKVaÆI„a°x²UlmVVœX˜wUKna„@Vn„J‚a„L„a@UV@@alUkKVKnkmmVwUk„w@ƒ™@kxWUXƒW@@mƒk@aUa@a¯aƒLkKmwkUm@kL@K@aWIXmƒVƒXƒWkUVakL@UVKƒw@aUK@UUKmLU@¯n™KUwVƒUIWJUWmka™@UXƒJƒk@UkmW@kLWKVƒx@bmI@VUaVU@a¯@UUmVKmX@±`kÝKVxUL±akL@V™bƒLkKmVƒ@XWVUbƒVXb@lm@@lW@@xk„lVUbnnmbUšlJ@„@L„@@V„b@‚WXš„UlkxVV@„šwn@ÜmnLlVkzƒ`UbmL@Vš@XL˜m„VnIÞ@VU°x@VnL˜x„V@LU°',
              ],
              encodeOffsets: [[115223, 36895]],
            },
          },
          {
            type: 'Feature',
            id: '1401',
            properties: { name: '太原市', cp: [112.3352, 37.9413], childNum: 5 },
            geometry: {
              type: 'Polygon',
              coordinates: [
                '@@„@VV@wVKnLVal@na°nšaVJœUlm„L°a@b„@lx@bULUlmx@Ln@lVkn„l˜@XI„w‚K„Vnƒ°aVXVx„ƒUaVU°K„nUlšUVL„KÆVš²Ģ‚lnXalLÈƘL„KUaVkUanmWU™a@WwkUWU¯y¯Ñ@anIl@@aVU„m„I„ymUƒLUUVakaU@@LmJkw±LKmVUI@W¯™VaU_l™kbW@kK@mƒUkaVƒmVaU™ƒIVmalk™W@wnIVy@klkWUU›VI@ƒƒUƒVkam@knU@mmmK@bblVUX@VkLV`@n±KU„ULƒ‚UnVVńUbÇKmV—Imbm@k¼ó@Ul™b@VmV@bXmaƒK@›UUxkV‚V@„xW„UxVnkVVJ@XnJ@XlV²LƂVbnL@lš@°',
              ],
              encodeOffsets: [[114503, 39134]],
            },
          },
          {
            type: 'Feature',
            id: '1403',
            properties: { name: '阳泉市', cp: [113.4778, 38.0951], childNum: 3 },
            geometry: {
              type: 'Polygon',
              coordinates: [
                '@@°@nb„@lb@b„b„b‚@„x²al@lb„KXU@m‚kUWkkmUUƒVwV@XUW@™naVklKXblKnL‚ƒnLVanImaXKlL„ašV@U@KUKW„alƒXK@£WKXUV@VU„ƒUUVW„_V™@W@@K„@šƒUƒƒIWmXUmƒULƒn™JkImmÝaUbLƒK@UƒWk@mn™Uƒ@kVWb@Ubmx@lƒzUxƒ`U„ULml@„XWlƒ@UV@nk@U‚Vb@X™Jm™@@Vknƒyk@ƒzƒJƒnUV@bk@mJ@b°Ò°zXVlVXx‚@šbXVmnVbUlVb',
              ],
              encodeOffsets: [[115864, 39336]],
            },
          },
        ],
        UTF8Encoding: true,
      })
      var mapFeatures = echarts.getMap(this.mapName).geoJson.features
      mapFeatures.forEach(v => {
        // 地区名称
        var name = v.properties.name
        // 地区经纬度
        this.geoCoordMap[name] = v.properties.cp
      })
      // <p>当前阶段：<span>可论证阶段</span></p>
      // <p>时间节点：<span>2021.10-2022.10</span></p>
      let option = {
        tooltip: {
          padding: 15,
          enterable: true,
          transitionDuration: 1,
          formatter: (params, ticket, callback) => {
            // 清空所有轮播
            for (var k in this.geoCoordMap) {
              myChart.dispatchAction({
                // type: 'geoUnSelect',
                type: 'downplay',
                name: k,
              })
            }
            // 如果鼠标滑动到线线上面，则返回空
            myChart.dispatchAction({
              // type: 'geoSelect',
              type: 'highlight',
              name: params.name,
            })
            if (params.componentSubType == 'lines') {
              return
            }
            if (params.componentSubType == 'scatter') {
              let tipHtml = `
              <div class="tooltip-cont">
                <p>项目数量：<span>${data[params.dataIndex].value2}个</span></p>
                <p>总投资额：<span>${params.data.value[2]}亿</span></p>
            </div>`
              callback(ticket, tipHtml)
              return tipHtml
            }
            if (params.componentSubType == 'map') {
              let tipHtml = `
              <div class="tooltip-cont">
              <p>项目数量：<span>${data[params.dataIndex].value2}个</span></p>
                <p>总投资额：<span>${params.data.value}亿</span></p>
            </div>`
              callback(ticket, tipHtml)
              return tipHtml
            }

          },
        },
        visualMap: {
          show: false,
          min: 0,
          max: 300,
          right: 0,
          bottom: 0,
          text: ['高', '低'],
          textStyle: {
            color: '#f1f1f1'
          },
          realtime: false,
          calculable: false,
          inRange: {
            color: ['lightskyblue', '#2754b7']
          }
        },
        geo: {
          show: true,
          map: 'shanxi',
          layoutCenter: ['50%', '50%'], //地图位置
          layoutSize: '100%',
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
          roam: false,
          itemStyle: {
            normal: {
              areaColor: '#1946a8',
              shadowColor: '#1946a8',
              borderWidth: 1, //设置外层边框
              borderColor: '#1946a8',
              shadowOffsetX: 10,
              shadowOffsetY: 5,
              shadowBlur: 2,
            },
            emphasis: {
              areaColor: '#1946a8',
              borderColor: '#d4bc1d',
              borderWidth: 2, //设置外层边框
            },
          },
        },
        series: [
          {
            name: '散点',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: this.convertData(data),
            symbolSize: function (val) {
              return 10
            },
            label: {
              normal: {
                formatter: '{b}',
                position: [10, 10],
                fontSize: 15,
                fontWeight: 600,
                fontStyle: 'italic',
                color: '#fff',
                show: true,
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                color: '#000',
                borderWidth: 2,
                borderColor: '#fff',
              },
            },
          },
          {
            type: 'map',
            map: this.mapName,
            geoIndex: 0,
            aspectScale: 1.5, //长宽比
            showLegendSymbol: true, // 存在legend时显示
            label: {
              normal: {
                show: true,
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: '#fff',
                },
              },
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: '#031525',
                borderColor: '#3B5077',
              },
              emphasis: {
                areaColor: '#2B91B7',
              },
            },
            animation: false,
            data: data,
          },
          {
            name: '点',
            type: 'scatter',
            coordinateSystem: 'geo',
            zlevel: 6,
          },
          {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: this.convertData(
              data
                .sort(function (a, b) {
                  return b.value - a.value
                })
                .slice(0, 5)
            ),
            symbolSize: function (val) {
              return 15
            },
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke',
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: '{b}',
                position: 'left',
                show: false,
              },
            },
            itemStyle: {
              normal: {
                color: 'yellow',
                shadowBlur: 10,
                shadowColor: 'yellow',
              },
            },
            zlevel: 1000,
          },
          {
            name: '线路',
            type: 'lines',
            zlevel: 2,
            effect: {
              show: true,
              period: 4, //箭头指向速度，值越小速度越快
              trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: 'arrow', //箭头图标
              symbolSize: 5, //图标大小
            },
            lineStyle: {
              normal: {
                color: '#00FFFF',
                width: 1,
                type: 'dashed',
                opacity: 0.5, //尾迹线条透明度
                curveness: -0.3, //尾迹线条曲直度
              },
            },
            data: moveLine.normal,
          },
        ],
      }
      let that = this
      myChart.on('click', function (params) {
        if (params.name == '太原市') {
          that.showTip = true
        }
        // window.open('https://www.baidu.com')
      })
      tools.loopShowTooltip(myChart, option, {
        interval: 2000,
        loopSeries: false,
      });
      myChart.setOption(option)
    },
    // initChartTip(){
    //   let myChart = echarts.init(this.$refs['echartTip'])
    //   let option = {
    //     tooltip: {
    //       trigger: 'item',
    //     },
    //     color: ['#6682f5', '#69c0ff', '#43ede3','#8ba2ff'],
    //     legend: {
    //       top: '0',
    //       orient: 'vertical',
    //       left: '2%',
    //       textStyle: {
    //         color: '#9DB9EB',
    //       },
    //     },
    //     series: [
    //       {
    //         name: '',
    //         type: 'pie',
    //         center: ['45%','40%'],
    //         radius: ['35%', '50%'],
    //         labelLine: {
    //           normal: {
    //             lineStyle: {
    //               width: 1,
    //             },
    //           },
    //         },
    //         data: statusList,
    //       },
    //     ],
    //   }
    //   myChart.setOption(option)
    //   tools.loopShowTooltip(myChart, option, {
    //     nterval: 2000,
    //     loopSeries: true,
    //   })
    //   myChart.on('click', function(param) {
    //     console.log(param)
    //     window.open('https://www.baidu.com')
    //   })
    // },
    initChartTip2() {
      let myChart = echarts.init(this.$refs['echartTip2'])
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
        },
        // dataZoom:[
        //  {
        //   // start: 9,//默认为@
        //   // end: 100,//黑认认为1@0
        //   type: "slider",
        //   show: true,
        //   // xAxisIndex: [0]
        //   handlesize: 0,//滑动条的 左右2个滑动条的大小
        //   startValue: 9,// 初始显示值
        //   endValue: 6,// 结束显示值
        //   height: 10,//组件高度
        //   left:"5%",
        //   right: "4%",//右边的距离
        //   bottom: "25%",//底边的距离
        //   borderColor:"#939",
        //   fillerColor:"#269cdb",
        //   borderRadius: 5,
        //   backgroundColor: "#33384b",//两边未选中的滑动条区域的额色
        //   showDataShadow: false,//是否显示数据阴影
        //   showDetail: false,//即拖拽时候是否显示详细数值信息 
        //   truerealtime: false,//是否实时更新
        //   filterMode: "filter"
        //  },{
        //   type:'inside',
        //   show: true,
        //   start: 1,
        //   end: 100
        //  }
        // ],
        grid: {
          top: '10%',
          right: '3%',
          left: '10%',
          bottom: '30%',
        },
        legend: {
          top: '1',
          right: '20',
          textStyle: {
            color: 'rgba(250,250,250,0.6)',
          },
        },
        xAxis: {
          data: tipData.map(item => item.name),
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: '#005094',
              width: 1,
            },
          },
          axisTick: {
            show: false, //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            rotate: 40,
            textStyle: {
              color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
            },
          },
        },
        yAxis: [
          {
            type: 'value',
            nameTextStyle: {
              color: '#ebf8ac',
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#68b4dd66',
                type: 'dashed',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#3D7495',
              },
            },
            axisLabel: {
              show: true,
              formatter: '{value} 亿',
              textStyle: {
                color: 'rgba(250,250,250,0.6)',
              },
            },
          },
        ],
        series: [
          {
            name: '投资金额',
            type: 'bar',
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#69c0ff',
                  },
                  {
                    offset: 1,
                    color: '#082550',
                  },
                ]),
              },
            },
            data: tipData.map(item => item.value),
          },
          // {
          //   name: '实际投资',
          //   type: 'bar',
          //   barWidth: 10,
          //   itemStyle: {
          //     normal: {
          //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //         {
          //           offset: 0,
          //           color: '#957DFF',
          //         },
          //         {
          //           offset: 1,
          //           color: '#082550',
          //         },
          //       ]),
          //     },
          //   },
          //   data: executeList.map(item=>item.value2),
          // },
        ],
      }
      myChart.on('click', function (data) {
        if (data.name == '交控集团') {
          window.location.href = './investHomeChild.html?type=1'
        }
      })
      tools.loopShowTooltip(myChart, option, {
        nterval: 2000,
        loopSeries: true,
      })
      myChart.setOption(option)
    },

    initChartTip3() {
      let myChart = echarts.init(this.$refs['echartTip3'])
      let option = {
        title: {
          //text : '产业类别',
          x: 'center',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
        },
        grid: {
          top: '15%',
          right: '3%',
          left: '10%',
          bottom: '30%',
        },
        legend: {
          top: '1',
          right: '15',
          textStyle: {
            color: 'rgba(250,250,250,0.6)',
          },
        },
        xAxis: {
          data: tipTopData.map(item => item.name),
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: '#005094',
              width: 1,
            },
          },
          axisTick: {
            show: false, //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            rotate: 30,
            textStyle: {
              color: '#fff'//color: 'rgba(255,255,255,0.6)', //X轴文字颜色
            },
          },
        },
        yAxis: [
          {
            type: 'value',
            nameTextStyle: {
              color: '#ebf8ac',
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#68b4dd66',
                type: 'dashed',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#3D7495',
              },
            },
            axisLabel: {
              show: true,
              formatter: '{value} 亿',
              textStyle: {
                color: 'rgba(250,250,250,0.6)',
              },
            },
          },
        ],
        series: [
          {
            name: '2022年投资完成额',
            type: 'line',
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#69c0ff',
                  },
                  {
                    offset: 1,
                    color: '#69c0ff',
                  },
                ]),
              },
            },
            data: tipTopData.map(item => item.value),
          },
          // {
          //   name: '实际投资',
          //   type: 'bar',
          //   barWidth: 10,
          //   itemStyle: {
          //     normal: {
          //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //         {
          //           offset: 0,
          //           color: '#957DFF',
          //         },
          //         {
          //           offset: 1,
          //           color: '#082550',
          //         },
          //       ]),
          //     },
          //   },
          //   data: executeList.map(item=>item.value2),
          // },
        ],
      }
      myChart.setOption(option)
      tools.loopShowTooltip(myChart, option, {
        nterval: 2000,
        loopSeries: true,
      })
    },

    initChartTip4() {
      let myChart = echarts.init(this.$refs['echartTip4'])
      let option = {
        title: {
          //text : '投资项目列表',
          x: 'center',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
        },
        // dataZoom:[
        //  {
        //   // start: 9,//默认为@
        //   // end: 100,//黑认认为1@0
        //   type: "slider",
        //   show: true,
        //   // xAxisIndex: [0]
        //   handlesize: 0,//滑动条的 左右2个滑动条的大小
        //   startValue: 9,// 初始显示值
        //   endValue: 6,// 结束显示值
        //   height: 10,//组件高度
        //   left:"5%",
        //   right: "4%",//右边的距离
        //   bottom: "25%",//底边的距离
        //   borderColor:"#939",
        //   fillerColor:"#269cdb",
        //   borderRadius: 5,
        //   backgroundColor: "#33384b",//两边未选中的滑动条区域的额色
        //   showDataShadow: false,//是否显示数据阴影
        //   showDetail: false,//即拖拽时候是否显示详细数值信息 
        //   truerealtime: false,//是否实时更新
        //   filterMode: "filter"
        //  },{
        //   type:'inside',
        //   show: true,
        //   start: 1,
        //   end: 100
        //  }
        // ],
        grid: {
          top: '15%',
          right: '3%',
          left: '10%',
          bottom: '20%',
        },
        legend: {
          top: '0',
          right: '20',
          textStyle: {
            color: 'rgba(250,250,250,0.6)',
          },
        },
        xAxis: {
          data: tipBottomData.map(item => item.name),
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: '#005094',
              width: 1,
            },
          },
          axisTick: {
            show: false, //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            rotate: 30,
            textStyle: {
              color: '#fff'//color: 'rgba(255,255,255,0.6)', //X轴文字颜色
            },
          },
        },
        yAxis: [
          {
            type: 'value',
            nameTextStyle: {
              color: '#ebf8ac',
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#68b4dd66',
                type: 'dashed',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#3D7495',
              },
            },
            axisLabel: {
              show: true,
              formatter: '{value} 亿',
              textStyle: {
                color: 'rgba(250,250,250,0.6)',
              },
            },
          },
        ],
        series: [
          {
            name: '2022年投资完成额',
            type: 'bar',
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#69c0ff',
                  },
                  {
                    offset: 1,
                    color: '#082550',
                  },
                ]),
              },
            },
            data: tipBottomData.map(item => item.value),
          },
        ],
      }
      myChart.on('click', function (data) {
        if (data.name == '华阳新材') {
          window.location.href = './investHomeChild.html?type=2'
        }
      })
      myChart.setOption(option)
      tools.loopShowTooltip(myChart, option, {
        nterval: 2000,
        loopSeries: true,
      })
    },
    // initChartL1() {
    //   let myChart = echarts.init(this.$refs['echartR1'])
    //   // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
    //   function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k) {
    //     // 计算
    //     let midRatio = (startRatio + endRatio) / 2;

    //     let startRadian = startRatio * Math.PI * 2;
    //     let endRadian = endRatio * Math.PI * 2;
    //     let midRadian = midRatio * Math.PI * 2;

    //     // 如果只有一个扇形，则不实现选中效果。
    //     if (startRatio === 0 && endRatio === 1) {
    //         isSelected = false;
    //     }

    //     // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
    //     k = typeof k !== 'undefined' ? k : 1 / 3;

    //     // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
    //     let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
    //     let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;

    //     // 计算高亮效果的放大比例（未高亮，则比例为 1）
    //     let hoverRate = isHovered ? 1.07 : 1;

    //     // 返回曲面参数方程
    //     return {
    //         u: {
    //             min: -Math.PI,
    //             max: Math.PI * 3,
    //             step: Math.PI / 32,
    //         },

    //         v: {
    //             min: 0,
    //             max: Math.PI * 2,
    //             step: Math.PI / 20,
    //         },

    //         x: function (u, v) {
    //             if (u < startRadian) {
    //                 return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
    //             }
    //             if (u > endRadian) {
    //                 return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
    //             }
    //             return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
    //         },

    //         y: function (u, v) {
    //             if (u < startRadian) {
    //                 return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
    //             }
    //             if (u > endRadian) {
    //                 return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
    //             }
    //             return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
    //         },

    //         z: function (u, v) {
    //             if (u < -Math.PI * 0.5) {
    //                 return Math.sin(u);
    //             }
    //             if (u > Math.PI * 2.5) {
    //                 return Math.sin(u);
    //             }
    //             return Math.sin(v) > 0 ? 1 : -1;
    //         },
    //     };
    //   }

    //   // 生成模拟 3D 饼图的配置项
    //   function getPie3D(pieData, internalDiameterRatio) {
    //     let series = [];
    //     let sumValue = 0;
    //     let startValue = 0;
    //     let endValue = 0;
    //     let legendData = [];
    //     let k =
    //         typeof internalDiameterRatio !== 'undefined'
    //             ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
    //             : 1 / 5;

    //     // 新增标签 series @20210613
    //     let labelSeries = {
    //         id: 'labelSeries',
    //         type: 'bar3D',
    //         //zlevel:-9,
    //         barSize: [0.1, 0.1],
    //         data: [],
    //         label: {
    //             show: true,
    //             formatter: function (params) {
    //                 return `${params.name}\n${params.value[3]}`;
    //             },
    //             backgroundColor: '#fff',
    //         },
    //     };

    //     // 为每一个饼图数据，生成一个 series-surface 配置
    //     for (let i = 0; i < pieData.length; i++) {
    //         sumValue += pieData[i].value;

    //         let seriesItem = {
    //             name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
    //             type: 'surface',
    //             parametric: true,
    //             wireframe: {
    //                 show: false,
    //             },
    //             pieData: pieData[i],
    //             pieStatus: {
    //                 selected: false,
    //                 hovered: false,
    //                 k: k,
    //             },
    //         };

    //         if (typeof pieData[i].itemStyle != 'undefined') {
    //             let itemStyle = {};

    //             typeof pieData[i].itemStyle.color != 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null;
    //             typeof pieData[i].itemStyle.opacity != 'undefined'
    //                 ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
    //                 : null;

    //             seriesItem.itemStyle = itemStyle;
    //         }
    //         series.push(seriesItem);
    //     }

    //     // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
    //     // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
    //     for (let i = 0; i < series.length; i++) {
    //         endValue = startValue + series[i].pieData.value;

    //         series[i].pieData.startRatio = startValue / sumValue;
    //         series[i].pieData.endRatio = endValue / sumValue;
    //         series[i].parametricEquation = getParametricEquation(
    //             series[i].pieData.startRatio,
    //             series[i].pieData.endRatio,
    //             false,
    //             false,
    //             k
    //         );

    //         startValue = endValue;

    //         legendData.push(series[i].name);

    //         // 判断增加 label 效果 @20210613
    //         if (pieData[i].label && pieData[i].label.show) {
    //             labelRadian = (series[i].pieData.startRatio + series[i].pieData.endRatio) * Math.PI;
    //             labelSeries.data.push({
    //                 name: series[i].name,
    //                 value: [Math.cos(labelRadian), Math.sin(labelRadian), 1.2, series[i].pieData.value],
    //                 itemStyle: {
    //                     opacity: 1,
    //                 },
    //             });
    //         }
    //     }

    //     // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
    //     series.push({
    //         name: 'mouseoutSeries',
    //         type: 'surface',
    //         parametric: true,
    //         wireframe: {
    //             show: false,
    //         },
    //         itemStyle: {
    //             opacity: 0,
    //         },
    //         parametricEquation: {
    //             u: {
    //                 min: 0,
    //                 max: Math.PI * 2,
    //                 step: Math.PI / 20,
    //             },
    //             v: {
    //                 min: 0,
    //                 max: Math.PI,
    //                 step: Math.PI / 20,
    //             },
    //             x: function (u, v) {
    //                 return Math.sin(v) * Math.sin(u) + Math.sin(u);
    //             },
    //             y: function (u, v) {
    //                 return Math.sin(v) * Math.cos(u) + Math.cos(u);
    //             },
    //             z: function (u, v) {
    //                 return Math.cos(v) > 0 ? 0.1 : -0.1;
    //             },
    //         },
    //     });

    //     // 将 labelSeries 添加进去 @20210613
    //     series.push(labelSeries);

    //     // 准备待返回的配置项，把准备好的 legendData、series 传入。
    //     let option = {
    //         //animation: false,
    //         legend: {
    //           data: legendData,
    //           op: '5%',
    //           //orient: 'vertical',
    //           textStyle: {
    //            color: '#fff',
    //           },
    //         },
    //         tooltip: {
    //             formatter: (params) => {
    //                 if (params.seriesName !== 'mouseoutSeries') {
    //                     return `${
    //                         params.seriesName
    //                     }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
    //                         params.color
    //                     };"></span>${option.series[params.seriesIndex].pieData.value}`;
    //                 }
    //             },
    //         },
    //         // 增加渐变色尝试（手动通过 seriesIndex 指定系列） @20211228
            
    //         xAxis3D: {
    //             min: -1,
    //             max: 1,
    //         },
    //         yAxis3D: {
    //             min: -1,
    //             max: 1,
    //         },
    //         zAxis3D: {
    //             min: -1,
    //             max: 1,
    //         },
    //         grid3D: {
    //             show: false,
    //             boxHeight: 10,
    //             //top: '30%',
    //             bottom: '50%',
    //             viewControl: {
    //               //3d效果可以放大、旋转等，请自己去查看官方配置
    //               alpha: 30, //角度
    //               distance: 150, //调整视角到主体的距离，类似调整zoom
    //               rotateSensitivity: 0, //设置为0无法旋转
    //               zoomSensitivity: 0, //设置为0无法缩放
    //               panSensitivity: 0, //设置为0无法平移
    //               autoRotate: false, //自动旋转
    //             },
    //         },
    //         series: series,
    //     };
    //     return option;
    //   }

    //   // 传入数据生成 option
    //   option = getPie3D([
    //     {
    //         name: '传统产业投资',
    //         value: 405.29,
    //         itemStyle: {
    //           color: '#6682f5'
    //         }
    //       }, {
    //         name: '战略新兴产业投资',
    //         value: 196.44,
    //         itemStyle: {
    //           color: '#69c0ff'
    //         }
    //       }, {
    //         name: '基础产业投资',
    //         value: 722.34,
    //         itemStyle: {
    //           color: '#43ede3'
    //         }
    //       }
    //   ]);
    //   myChart.setOption(option);
    //   // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
    //   let selectedIndex = '';
    //   let hoveredIndex = '';
    //   let that = this
    //   // 监听点击事件，实现选中效果（单选）
    //   myChart.on('click', function (param) {
    //     console.log(param)
    //     if (param.seriesName == '战略新兴产业投资') {
    //         that.tipTitle2 = param.seriesName
    //         that.showTip2 = true
    //     }

    //     // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
    //     // let isSelected = !option.series[params.seriesIndex].pieStatus.selected;
    //     // let isHovered = option.series[params.seriesIndex].pieStatus.hovered;
    //     // let k = option.series[params.seriesIndex].pieStatus.k;
    //     // let startRatio = option.series[params.seriesIndex].pieData.startRatio;
    //     // let endRatio = option.series[params.seriesIndex].pieData.endRatio;

    //     // // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
    //     // if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
    //     //     option.series[selectedIndex].parametricEquation = getParametricEquation(
    //     //         option.series[selectedIndex].pieData.startRatio,
    //     //         option.series[selectedIndex].pieData.endRatio,
    //     //         false,
    //     //         false,
    //     //         k
    //     //     );
    //     //     option.series[selectedIndex].pieStatus.selected = false;
    //     // }

    //     // // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
    //     // option.series[params.seriesIndex].parametricEquation = getParametricEquation(
    //     //     startRatio,
    //     //     endRatio,
    //     //     isSelected,
    //     //     isHovered,
    //     //     k
    //     // );
    //     // option.series[params.seriesIndex].pieStatus.selected = isSelected;

    //     // // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
    //     // isSelected ? (selectedIndex = params.seriesIndex) : null;

    //     // // 使用更新后的 option，渲染图表
    //     // myChart.setOption(option);
    //   });

    //   let i = 0
    //   this.timeOut = setInterval(function() {
    //       console.log(i)
    //       let startRatio = option.series[i].pieData.startRatio;
    //       let endRatio = option.series[i].pieData.endRatio;
    //       let isSelected = option.series[i].pieStatus.selected;
    //       let k = option.series[i].pieStatus.k;
    //       if(i == 0){
    //         let startRatio2 = option.series[2].pieData.startRatio;
    //         let endRatio2 =   option.series[2].pieData.endRatio;
    //         let isSelected2 = option.series[2].pieStatus.selected;
    //         let k2 =  option.series[2].pieStatus.k;
    //         option.series[2].parametricEquation = getParametricEquation(startRatio2, endRatio2, isSelected2, false, k2)
          
    //       } else {
    //         let startRatio3 = option.series[i-1].pieData.startRatio;
    //         let endRatio3 =   option.series[i-1].pieData.endRatio;
    //         let isSelected3 = option.series[i-1].pieStatus.selected;
    //         let k3 =  option.series[i-1].pieStatus.k;
    //         option.series[i-1].parametricEquation = getParametricEquation(startRatio3, endRatio3, isSelected3, false, k3)
    //       }
    //       option.series[i].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, true, k)
    //       myChart.setOption(option);
    //       i ++
    //       if(i == 3) {
    //         i = 0
    //       }
    //   }, 3000);
    //   // 监听 mouseover，近似实现高亮（放大）效果
    //   myChart.on('mouseover', function (params) {
    //     // 准备重新渲染扇形所需的参数
    //     let isSelected;
    //     let isHovered;
    //     let startRatio;
    //     let endRatio;
    //     let k;

    //     // 如果触发 mouseover 的扇形当前已高亮，则不做操作
    //     if (hoveredIndex === params.seriesIndex) {
    //         return;

    //         // 否则进行高亮及必要的取消高亮操作
    //     } else {
    //         // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
    //         if (hoveredIndex !== '') {
    //             // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
    //             isSelected = option.series[hoveredIndex].pieStatus.selected;
    //             isHovered = false;
    //             startRatio = option.series[hoveredIndex].pieData.startRatio;
    //             endRatio = option.series[hoveredIndex].pieData.endRatio;
    //             k = option.series[hoveredIndex].pieStatus.k;

    //             // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
    //             option.series[hoveredIndex].parametricEquation = getParametricEquation(
    //                 startRatio,
    //                 endRatio,
    //                 isSelected,
    //                 isHovered,
    //                 k
    //             );
    //             option.series[hoveredIndex].pieStatus.hovered = isHovered;

    //             // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
    //             hoveredIndex = '';
    //         }

    //         // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
    //         if (params.seriesName !== 'mouseoutSeries') {
    //             // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
    //             isSelected = option.series[params.seriesIndex].pieStatus.selected;
    //             isHovered = true;
    //             startRatio = option.series[params.seriesIndex].pieData.startRatio;
    //             endRatio = option.series[params.seriesIndex].pieData.endRatio;
    //             k = option.series[params.seriesIndex].pieStatus.k;

    //             // 对当前点击的扇形，执行高亮操作（对 option 更新）
    //             option.series[params.seriesIndex].parametricEquation = getParametricEquation(
    //                 startRatio,
    //                 endRatio,
    //                 isSelected,
    //                 isHovered,
    //                 k
    //             );
    //             option.series[params.seriesIndex].pieStatus.hovered = isHovered;

    //             // 记录上次高亮的扇形对应的系列号 seriesIndex
    //             hoveredIndex = params.seriesIndex;
    //         }

    //         // 使用更新后的 option，渲染图表
    //         myChart.setOption(option);
    //     }
    //   });

    //   // 修正取消高亮失败的 bug
    //   myChart.on('globalout', function () {
    //     if (hoveredIndex !== '') {
    //         // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
    //         isSelected = option.series[hoveredIndex].pieStatus.selected;
    //         isHovered = false;
    //         k = option.series[hoveredIndex].pieStatus.k;
    //         startRatio = option.series[hoveredIndex].pieData.startRatio;
    //         endRatio = option.series[hoveredIndex].pieData.endRatio;

    //         // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
    //         option.series[hoveredIndex].parametricEquation = getParametricEquation(
    //             startRatio,
    //             endRatio,
    //             isSelected,
    //             isHovered,
    //             k
    //         );
    //         option.series[hoveredIndex].pieStatus.hovered = isHovered;

    //         // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
    //         hoveredIndex = '';
    //     }

    //     // 使用更新后的 option，渲染图表
    //     myChart.setOption(option);
    //   });

    //   // 新增监听图例事件，同步显示隐藏对应 label @20210613
    //   myChart.on('legendselectchanged', function (params) {
    //     let seriesLength = option.series.length;
    //     console.log(option.series[seriesLength - 1].data);
    //     for (let i = 0; i < option.series[seriesLength - 1].data.length; i++) {
    //         console.log(option.series[seriesLength - 1].data[i]);
    //         if (option.series[seriesLength - 1].data[i].name == params.name) {
    //             console.log(option.series[seriesLength - 1].data[i]);
    //             params.selected[params.name]
    //                 ? (option.series[seriesLength - 1].data[i].itemStyle.opacity = 1)
    //                 : (option.series[seriesLength - 1].data[i].itemStyle.opacity = 0);
    //         }
    //     }
    //     myChart.setOption(option);
    //   });

    //   console.log('66', myChart);
    // },
    initChartL1 () {
      let myChart = echarts.init(this.$refs['echartR1'])
      let option = {
        tooltip: {
          trigger: 'item',
          //position: ['65%', '42%'],
          position: (point,params,dom,rect,size) => {
            if(params.name == '传统产业'){
              return ['55%','25%']
            } else if (params.name == '战略新兴产业') {
              return ['55%','65%']
            } else if (params.name == '基础产业') {
              return ['18%','35%']
            }
    },
          formatter: params => {
            return `<span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> ${params.name}：${params.percent}% <br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> 金额：${params.value}亿`
          },  //+ '<br/>'+ '{a1}：{c1}' + '%',
          axisPointer: {
            type: 'cross',
          },
        },
        color: ['#6682f5', '#69c0ff', '#43ede3', '#8ba2ff'],
        legend: {
          left: '2%',
          bottom: '2%',
          orient: 'vertical',
          //right: '2%',
          textStyle: {
            color: '#9DB9EB',
          },
        },
        series: [

          // {
          //   hoverOffset: 0,
          //   startAngle: 90,
          //   type: "pie",
          //   radius: [48, 55],
          //   center: ["50%", "50%"],
          //   itemStyle: {
          //     normal: {
          //         borderColor: 'rgba(1,31,6,0.7)',
          //         borderWidth: 4
          //     }
          //   },
          //   tooltip: {
          //     show: false
          //   },
          //   labelLine: {
          //     show: false
          //   },
          //   label: {
          //     show: false
          //   },
          //   data: industryList
          // },
          {
            name: '',
            type: 'pie',
            radius: ['50%', '75%'],
            center: ["50%", "50%"],
            label:{
              show: false,
            },
            itemStyle: {
              normal: {
                borderColor: 'rgba(1,31,64,0.7)',
                borderWidth: 6
              }
            },
            labelLine: {
              show: false,
            },
            data: industryList,
          },
        ],
      }
      let that = this
      myChart.on('click', function (param) {
        if (param.name == '战略新兴产业') {
          that.tipTitle2 = param.name
          that.showTip2 = true
        }

      })
      myChart.setOption(option)
      tools.loopShowTooltip(myChart, option, {
        nterval: 2000,
        loopSeries: true,
      })
    },
    initChartL2() {
      let myChart = echarts.init(this.$refs['echartL2'])
      let option = {
        tooltip: {
          formatter: data => {            
            return `${data[0].name}<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[0].color.colorStops[0].color}"></span> ${data[0].seriesName}：${data[0].value}亿 <br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[1].color.colorStops[0].color}"></span> ${data[1].seriesName}：${data[1].value}亿`
          },
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
        },
        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
         }
        ],
        grid: {
          top: '16%',
          right: '3%',
          left: '10%',
          bottom: '23%',
        },
        legend: {
          top: '1',
          right: '10',
          textStyle: {
            color: 'rgba(250,250,250,0.6)',
          },
        },
        xAxis: {
          data: executeList.map(item => item.name),
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: '#005094',
              width: 1,
            },
          },
          axisTick: {
            show: false, //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            rotate: 40,
            textStyle: {
              color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
            },
          },
        },
        yAxis: [
          {
            type: 'value',
            name: '亿元',
            nameTextStyle: {
              color: 'rgba(255,255,255,0.6)',
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#68b4dd66',
                type: 'dashed',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#3D7495',
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: 'rgba(250,250,250,0.6)',
              },
            },
          },
        ],
        series: [
          {
            name: '计划投资',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#69c0ff',
                  },
                  {
                    offset: 1,
                    color: '#082550',
                  },
                ]),
              },
            },
            data: executeList.map(item => item.value),
          },
          {
            name: '实际投资',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#957DFF',
                  },
                  {
                    offset: 1,
                    color: '#082550',
                  },
                ]),
              },
            },
            data: executeList.map(item => item.value2),
          },
        ],
      }
      myChart.setOption(option)
      tools.loopShowTooltip(myChart, option, {
        nterval: 2000,
        loopSeries: true,
      })
      let arr =  executeList.map(item => item.value2)
      this.timeOut = setInterval(function () {
       
        let startValue = myChart.getModel().option.dataZoom[0].startValue;
        let endValue = myChart.getModel().option.dataZoom[0].endValue;
        let start = myChart.getModel().option.xAxis[0].data[startValue];//起始X轴
        let end = myChart.getModel().option.xAxis[0].data[endValue];//结束X轴
        // 每次向后滚动一个，最后一个从头开始。
        // console.log(option.dataZoom[0].endValue);
        
        if (option.dataZoom[0].endValue >= 12) {
          option.dataZoom[0].endValue = 5
          option.dataZoom[0].startValue = 0
        } else {
            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
        }

        // myChart.dispatchAction({
        //   type: 'showTip',
        //   seriesIndex: 0,
        //   dataIndex: startValue +1,
        // });
        myChart.setOption(option);
      }, 12000);
      
    },
    initChartR1() {
      let myChart = echarts.init(this.$refs['echartL1'])
      let option = {
        tooltip: {
          trigger: 'axis',
          formatter: '{a0}：{c0}' + '亿元',  //+ '<br/>'+ '{a1}：{c1}' + '%',
          axisPointer: {
            type: 'cross',
          },
        },
        grid: {
          top: '16%',
          right: '10%',
          left: '10%',
          bottom: '22%',
        },
        // legend: {
        //   top: '1',
        //   textStyle: {
        //     color: 'rgba(250,250,250,0.6)',
        //   },
        // },
        xAxis: {
          data: statusList.map(item => item.name),
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: '#005094',
              width: 1,
            },
          },
          axisTick: {
            show: false, //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            rotate: 20,
            textStyle: {
              color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
            },
          },
        },
        yAxis: [
          {
            type: 'value',
            name: '亿元',
            nameTextStyle: {
              color: 'rgba(255,255,255,0.6)',
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#68b4dd66',
                type: 'dashed',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#3D7495',
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: 'rgba(250,250,250,0.6)',
              },
            },
          },
          {
            type: 'value',
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              formatter: '{value} %',
              textStyle: {
                color: 'rgba(250,250,250,0.6)',
              },
            },
          },
        ],
        series: [
          {
            type: 'bar',
            name: '投资金额',
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#69c0ff',
                  },
                  {
                    offset: 1,
                    color: '#082550',
                  },
                ]),
              },
            },
            data: statusList.map(item => item.value),
          },
        ],
      }
      myChart.setOption(option)
      tools.loopShowTooltip(myChart, option, {
        nterval: 2000,
        loopSeries: true,
      })

    },

    initChartR2() {
      let myChart = echarts.init(this.$refs['echartR2'])
      let option = {
        tooltip: {
          trigger: 'item',
          position: (point,params,dom,rect,size) => {
                  if(params.name == '新建'){
                    return ['55%','45%']
                  } else {
                    return ['15%','40%']
                  }
          },
          formatter: params => {
            return `<span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> ${params.name}：${params.value}个 <br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> 投资完成额：${params.data.value2}亿`
          },  //+ '<br/>'+ '{a1}：{c1}' + '%',
          axisPointer: {
            type: 'cross',
          },
        },
        color: [ '#43ede3', '#8ba2ff'],
        legend: {
          left: '5%',
          bottom: '2%',
          orient: 'vertical',
          //right: '2%',
          textStyle: {
            color: '#9DB9EB',
          },
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['50%', '75%'],
            center: ["50%", "50%"],
            label:{
              show: false,
            },
            itemStyle: {
              normal: {
                borderColor: 'rgba(1,31,64,0.7)',
                borderWidth: 6
              }
            },
            labelLine: {
              show: false,
            },
            data: chartDateR2,
          },
        ],
      }
      myChart.setOption(option)
      tools.loopShowTooltip(myChart, option, {
        nterval: 10000,
        loopSeries: true,
      })
    },
    initProjectList() {
      let dataList = []
      projectList.map(item => {
        dataList.push([item.office,item.name,  item.value + '亿'])
      })
      this.storageRecordConfig = {
        header: ['企业集团', '项目名称',  '投资金额'],
        headerBGC: '#05507b33',
        oddRowBGC: '#05507b33',
        evenRowBGC: '',
        headerHeight: '40',
        rowNum: 5,
        columnWidth: [100, 350],
        align: ['center', 'center', 'center'],
        data: dataList,
      }
    }
  },
})