let app = new Vue({
  el: '#app',
  data () {
    return {
      showTip: false,
      showTip2: false,
      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);
    }
  },
  mounted () {
    setTimeout(() => {
      // 左侧图表
      //this.initChartTip()
      this.initChartTip2()
      this.initChartTip3()
      this.initChartTip4()
      this.initChartL1()
      this.initChartL2()
      this.initChartR1()
      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 },
        { name: '朔州市', value: 33.61 },
        { name: '忻州市', value: 73.35 },
        { name: '吕梁市', value: 109.04 },
        { name: '太原市', value: 251.67 },
        { name: '阳泉市', value: 25.12 },
        { name: '晋中市', value: 148.57 },
        { name: '临汾市', value: 130.55 },
        { name: '长治市', value: 103.00 },
        { name: '运城市', value: 41.06 },
        { name: '晋城市', value: 45.43 }
      ]

      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>工程建设项目</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>工程建设项目</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) {
        console.log(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: '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: '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: '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'])
      function getParametricEquation (startRatio, endRatio, isSelected, isHovered, k, h) {

        // 计算
        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.15 : 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) * h * .1;
            }
            return Math.sin(v) > 0 ? 1 * h * .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 / 3;

        // 为每一个饼图数据，生成一个 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
            },
            labelLine: {
              color: "#f00",
              emphasis: {
                show: true
              }
            },
          };

          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;
            pieData[i].normal = {
              borderColor: 'rgba(1,31,6,0.7)',
              borderWidth: 4
            }
            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, series[i].pieData.value);

          startValue = endValue;

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

        // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
        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;
            }
          }
        });
        //console.log(pieData)  线条配置
        // series.push({
        //   name: 'pied',
        //   type: 'pie',
        //   label: {
        //     opacity: 1,
        //     fontSize: 13,
        //     lineHeight: 20,
        //     textStyle: {
        //       fontSize: 16,
        //     },
        //     // normal: {
        //     //   formatter: function (params) {
        //     //     console.log('par', params)
        //     //     return params.name
        //     //     //return `<span style="color:${params.itemStyle.color};">${params.name}:${params.value}</span>`;
        //     //   },
        //     // }
        //   },
        //   labelLine: {
        //     length: 30,
        //     length2: 18,
        //   },
        //   startAngle: -30, //起始角度，支持范围[0, 360]。
        //   clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
        //   radius: ['20%', '50%'],
        //   center: ['50%', '50%'],
        //   data: pieData,
        //   itemStyle: {
        //     opacity: 0,
        //   },
        // });

        // 准备待返回的配置项，把准备好的 legendData、series 传入。
        let option = {
          //animation: false,
          legend: {
            data: legendData,
            top: '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}`;
              }
            }
          },
          xAxis3D: {
            min: -1,
            max: 1
          },
          yAxis3D: {
            min: -1,
            max: 1
          },
          zAxis3D: {
            min: -1,
            max: 1
          },
          grid3D: {
            show: false,
            boxHeight: 0.4,
            viewControl: {//3d效果可以放大、旋转等，请自己去查看官方配置
              alpha: 40,
              // beta: 40,
              rotateSensitivity: 0,
              zoomSensitivity: 0,
              panSensitivity: 1,
              autoRotate: true
            },
            //后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
            postEffect: {//配置这项会出现锯齿，请自己去查看官方配置有办法解决 
              enable: true,
              bloom: {
                enable: true,
                bloomIntensity: 0.2
              },
              SSAO: {
                enable: true,
                quality: 'medium',
                radius: 1
              }
            }
          },
          series: series
        };
        return option;
      }

      // 传入数据生成 option
      option = getPie3D([{
        name: '传统产业投资',
        value: 405.29,
        itemStyle: {
          color: '#f77b66'
        }
      }, {
        name: '战略新兴产业投资',
        value: 196.44,
        itemStyle: {
          color: '#3edce0'
        }
      }, {
        name: '基础产业投资',
        value: 722.34,
        itemStyle: {
          color: '#f94e76'
        }
      }], 0.39);

      myChart.setOption(option);
      // tools.loopShowTooltip(myChart, option, {
      //   nterval: 2000,
      //   loopSeries: true,
      // })
      // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
      let selectedIndex = '';
      let hoveredIndex = '';

      // 监听点击事件，实现选中效果（单选）
      let that = this
      myChart.on('click', function (params) {
        if (option.series[params.seriesIndex].name == '战略新兴产业投资') {

          that.tipTitle2 = option.series[params.seriesIndex].name
          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].pieData.value);
        //   option.series[selectedIndex].pieStatus.selected = false;
        // }

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

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

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

      // 监听 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].pieData.value);
            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].pieData.value + 5);
            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].pieData.value);
          option.series[hoveredIndex].pieStatus.hovered = isHovered;

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

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

      });
      //var zrender = myChart.getZrender();
      //var elements = zrender.storage._elements;
      console.log('66', myChart);
    },
    // initChartL1 () {
    //   let myChart = echarts.init(this.$refs['echartR1'])
    //   let option = {
    //     tooltip: {
    //       trigger: 'item',
    //       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.percent}%`
    //       },  //+ '<br/>'+ '{a1}：{c1}' + '%',
    //       axisPointer: {
    //         type: 'cross',
    //       },
    //     },
    //     color: ['#6682f5', '#69c0ff', '#43ede3', '#8ba2ff'],
    //     legend: {
    //       top: 'center',
    //       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: ['55%', '80%'],
    //         itemStyle: {
    //           normal: {
    //             borderColor: 'rgba(1,31,64,0.7)',
    //             borderWidth: 6
    //           }
    //         },
    //         labelLine: {
    //           normal: {
    //             lineStyle: {
    //               width: 1,
    //             },
    //           },
    //         },
    //         data: industryList,
    //       },
    //     ],
    //   }
    //   let that = this
    //   myChart.on('click', function (param) {
    //     console.log(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: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
        },
        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: '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,
              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,
      })
    },
    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: '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,
      })
    },
    initProjectList () {
      let dataList = []
      projectList.map(item => {
        dataList.push([item.name, item.office, item.value + '亿', item.status])
      })
      this.storageRecordConfig = {
        header: ['项目名称', '企业集团', '投资金额', '项目进度'],
        headerBGC: '#05507b33',
        oddRowBGC: '#05507b33',
        evenRowBGC: '',
        headerHeight: '40',
        rowNum: 5,
        //columnWidth: [150],
        align: ['center', 'center', 'center', 'center'],
        data: dataList,
      }
    }
  },
})