pc_kingdee_large_screen/investment/js/investHome.js

let app = new Vue({
  el: '#app',
  data() {
    return {
      year: '2022',
      mapName: 'shanxi',
      geoCoordMap: {},
      config1: {
        number: [100],
        content: '{nt}个',
      },
      storageRecordConfig: {
        header: ['项目名称', '投资金额', '所属产业', '项目进度', '完成比例'],
        headerBGC: '#05507b33',
        oddRowBGC: '#69c0ff0f',
        evenRowBGC: '',
        headerHeight: '40',
        rowNum: 4,
        align: ['center'],
        data: [
          ['工程建设项目', '21.2亿', '煤炭', '终止', '2.3%'],
          ['工程建设项目', '21.2亿', '煤炭', '退出', '2.3%'],
          ['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
          ['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
          ['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
          ['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
        ],
      },
      storageRecordConfig2: {
        header: ['项目名称', '投资金额', '所属产业', '项目进度', '完成比例'],
        headerBGC: '#05507b33',
        oddRowBGC: '#05507b33',
        evenRowBGC: '',
        headerHeight: '40',
        rowNum: 4,
        align: ['center'],
        data: [
          ['工程建设项目', '21.2亿', '煤炭', '终止', '2.3%'],
          ['工程建设项目', '21.2亿', '煤炭', '退出', '2.3%'],
          ['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
          ['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
          ['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
          ['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
        ],
      },
      companyList: [
        { name: '山西焦煤' },
        { name: '晋能控股' },
        { name: '华新燃气' },
        { name: '山西建投' },
        { name: '潞安化工' },
        { name: '华远陆港' },
        { name: '航产集团' },
        { name: '大地控股' },
        { name: '国新能源' },
        { name: '汾酒集团' },
        { name: '云时代' },
        { name: '神农科技' },
        { name: '华阳新材' },
        { name: '华舰体育' },
        { name: '交控集团' },
        { name: '文旅集团' },
        { name: '水控集团' },
        { name: '太重集团' },
      ],
    }
  },
  mounted() {
    // 左侧图表
    this.initChartL1()
    this.initChartL2()
    this.initChartR1()
    this.initChinaChart()
  },
  methods: {
    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: 150 },
        { name: '大同市', value: 190 },
        { name: '忻州市', value: 140 },
        { name: '朔州市', value: 160 },
        { name: '晋中市', value: 100 },
        { name: '太原市', value: 300 },
        { name: '临汾市', value: 190 },
        { name: '长治市', value: 100 },
        { name: '晋城市', value: 280 },
        { name: '运城市', value: 180 },
        { name: '阳泉市', value: 110 },
      ]

      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
      })

      myChart.setOption({
        tooltip: {
          padding: 15,
          enterable: true,
          transitionDuration: 1,
          formatter: (params, ticket, callback) => {
            let tipHtml = `
              <div class="tooltip-cont">
                <p>新开工：<span>工程建设项目</span></p>
                <p>总投资额：<span>21.455亿</span></p>
                <p>当前阶段：<span>可论证阶段</span></p>
                <p>时间节点：<span>2021.10-2022.10</span></p>
            </div>`
            return tipHtml
          },
        },
        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: '#54c5e0',
              shadowOffsetX: 10,
              shadowOffsetY: 5,
              shadowBlur: 3,
            },
            emphasis: {
              areaColor: '#0b0098',
              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: 0.75, //长宽比
            showLegendSymbol: false, // 存在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: 1,
          },
          {
            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,
          },
        ],
      })
    },
    initChartL1() {
      let myChart = echarts.init(this.$refs['echartL1'])
      let option = {
        grid: {
          left: '10%',
          top: '18%',
          bottom: '12%',
          right: '8%',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        xAxis: {
          data: ['2018年', '2019年', '2020年', '2021年', '2022年', '2023年'],
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: '#3D7495',
              width: 1,
            },
          },
          axisTick: {
            show: false, //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: 'rgba(255,255,255,0.6)', //X轴文字颜色
            },
          },
        },
        yAxis: [
          {
            type: 'value',
            name: '亿元',
            nameTextStyle: {
              color: '#FFF',
            },
            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: [
          {
            type: 'pictorialBar',
            barCategoryGap: '0%',
            symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
            label: {
              show: true,
              position: 'top',
              distance: 5,
              color: '#08DFFE',
              fontSize: 12,
            },
            itemStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#9A11FF',
                    },
                    {
                      offset: 1,
                      color: '#08DFFE',
                    },
                  ],
                  global: false, //  缺省为  false
                },
              },
              emphasis: {
                opacity: 1,
              },
            },
            data: [123, 60, 25, 18, 12, 9],
          },
        ],
      }

      myChart.setOption(option)
    },
    initChartL2() {
      let myChart = echarts.init(this.$refs['echartL2'])
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          top: '16%',
          right: '3%',
          left: '10%',
          bottom: '10%',
        },
        legend: {
          top: '1',
          right: '10',
          textStyle: {
            color: 'rgba(250,250,250,0.6)',
          },
        },
        xAxis: {
          data: ['山西焦煤', '山西文旅', '潞安化工', '晋能控股', '山西建投'],
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: '#005094',
              width: 1,
            },
          },
          axisTick: {
            show: false, //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            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: 15,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#69c0ff',
                  },
                  {
                    offset: 1,
                    color: '#082550',
                  },
                ]),
              },
            },
            data: [900, 600, 500, 450, 500],
          },
          {
            name: '实际投资',
            type: 'bar',
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#957DFF',
                  },
                  {
                    offset: 1,
                    color: '#082550',
                  },
                ]),
              },
            },
            data: [500, 900, 600, 800, 450],
          },
        ],
      }
      myChart.setOption(option)
    },
    initChartR1() {
      let myChart = echarts.init(this.$refs['echartR1'])
      let option = {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          top: 'center',
          orient: 'vertical',
          right: '2%',
          textStyle: {
            color: '#9DB9EB',
          },
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['55%', '80%'],
            labelLine: {
              normal: {
                lineStyle: {
                  width: 1,
                },
              },
            },
            data: [
              { value: 1048, name: '煤炭' },
              { value: 735, name: '火电' },
              { value: 580, name: '焦化' },
              { value: 484, name: '风电' },
            ],
          },
        ],
      }
      myChart.setOption(option)
    },
  },
})