let app = new Vue({ el: '#app', data () { return { time: '', timer: '', companyList: [ { name: '核心人力-1' }, { name: '核心人力-2' }, { name: '内部人才市场' }, { name: '薪酬福利' }, { name: '培训' } ], mapName: 'shanxi', geoCoordMap: {}, } }, created () { this.time = formatDate() this.timer = setInterval(() => { this.time = formatDate() }, 1000) }, beforeDestroy () { if (this.timer) { clearInterval(this.timer); } }, mounted () { setTimeout(() => { this.budgetECharts(); this.aiQualityECharts() this.aiQualityECharts2() 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 }, budgetECharts () { let chart = echarts.init(document.getElementById("budget")); let option = { grid: { top: 35, right: 20, left: 40, bottom: 50, }, tooltip: { show: true, trigger: "axis", axisPointer: { lineStyle: { color: "#ddd", }, }, }, legend: { textStyle: { // 图列内容样式 color: "#fff", // 字体颜色 // fontSize: "10", }, right: 30, icon: "roundRect", // 小图标的宽高 itemHeight: 5 }, xAxis: { type: "category", data: ["首席技师", "特级技师", "高级技师", "技师", '高级工', '中级工', '初级工', '学徒工'], boundaryGap: false, splitLine: { show: false, interval: "auto", }, axisTick: { show: false, }, axisLine: { lineStyle: { color: "#7ECEF4", }, }, axisLabel: { interval: 0, rotate: 40, margin: 10, textStyle: { // fontSize: 10, color: "#fff", }, }, }, yAxis: { type: "value", splitLine: { show: true, lineStyle: { color: "#204561", width: 1, type: "dotted", }, }, axisTick: { show: false, }, axisLine: { lineStyle: { color: "#7ECEF4", }, }, axisLabel: { margin: 10, textStyle: { fontSize: 10, color: "#fff", }, }, }, series: [ { name: "", type: "line", smooth: false, showSymbol: true, // 节点长显 symbol: 'image://' + 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAiCAYAAADRcLDBAAAAAXNSR0IArs4c6QAACZtJREFUWEftl3tw1NUVx8+59/fY3ezmQULAJDzygATD0JGEirQwUWwDhdBOkTi+RkCL+KhTam2tf7Sh2rGO7dhRO7UqD1GrBoaOoqil0kQw+CAGi1GRkBAgQF6bxya7+/v97r2nczcNBhKEGf2zv5nd3+vecz+/8z33nHsRLvKoJuI5bVDGmFpMhHMBIR8IUgGBA0EvILQA0Eek2G4geG3eJIxdpGnACzXcf5ICLsEdRLQOANoA8FUCeBcUHPIkhEPdIJ0cSAMB+UjwbWK0GAjmANAmbrJH5k7A9guN8ZUQe47TIgJ6EgA+AMAHF0zC/1zIoH5f20aTUKl7AfBaQPztghzUNs57jAlBRFh7TFUR4GoCXHnVFHz7YgY/t83uVipGpM1EdAQVW3llLsbHsjMKQgP8q1U9QYil5GFFeQF2DHdcUU08LAYzFJgZgBhUgBYCcAXgckGDLome5N629jfunuYM99l5mGzTUs8C4YS4hUsqsjB6LsgoiDePyPXAsBz9uLB8Ig4mOlRVsbKCX2YBM6cSgQkgzuMYAxiC8kgejw18crz+tlIv0Z2IXd6ithBhYHEeLkdEGmngLIjXmuhKAniOcShdkoundcPFjx22B9KmFDMmU/Q9SYGkZKKfnYoTwMIkp0M163tkPGEcuUGARlzEej9595bxEf2supEsvwV7kMGLS/Pxz2NCaLfFiQ4S4Lrl0/F13ai4qtHKLJx2mVIyMDw4KZEAMJJhop1s5ulrEXXb452qGfkQBDNslQBhhsBwT0PNnZkD+vkrTVQgFe0THEsq8/HYMMgZT7z8Oa1FoIrKIrZkWIIFhfd/C5VM1QBKOIykRCWizEwzJ1ghngAYPlRMtsc6vWZmBJSGQWaQ9gwavljXF1/UN1YVuwmPfCYfIoTUa4v47aMgnv9Ufc4U3nr9TNyrPVr2fDSbEKcpz2H665UXZVoGI0leYqVYeVIpBKWG7DAGnDESLpx2O9xmNCzFzIAaBmGGdbLmevuQVvPvhyhDSWpCgbk3zMKehHz6b8NBKmUIL6yaiYX62YoV1ayzYtEVOvq1BxIAwmU8SVxihKw8Uh5TQqB/fHoR99npkWPH67ipJeCkHHYq2hVrNo2A4nZIahBmcjUwEHm//rYsnUVp40H5MiDbtXomPnMG4umP6X5ClbFmFv+5hrj86fZM2w4UjwIIsnzhxjlIgb7xGUXB7JylgMjj4e66gWOte4GZSsMoF07FwuLIMIiOEaFka93KVB3A9NQBukkxtXTtLH7tGYgnGtR2BvjiHZfhVg2xYEukiJTM0lLoGOB+J8tINvJFPMqlF+VJ4ycUBidNWaIBhnWNd3Xs62tt2csNS3ErSWoQ0cubhqXhltlXe2PKft3+yQYqEERv3TWbJeIqIcej9eqAUrjqnjl4QN9/Z0tvCQqRqmXgfjeLJ7F84QwYQwCZhcFJU88CGAViBqThC0gtjdeLTVoWMG2x99XVe2DrVlVdTawtDwb7IhCsuhKHptvDH6hWYjj/vlI8nvDEc/1zlecGWCCeZfpVgXBjXMYHuS89bca5Hhg5Q/S19sjAiRN7uB0QzEqS6LFTTo/ZxExbhY/+c09jVaVOYPTwBxRWDuT/ej72JCAe2KdahcT56787BDF/c/gK5XkBFnSyjQDkiWjEEG7ECGRkXhqaPPUHgHjewhfv6vywr7W5hmtv2EEBZJx2wtDEjYDsObb7nWGIB/dRmIsREL95Vx0gxFUPzEvIgfM2dZWAG01z3Qi3kzEbTZGvpaBoxPBn58xIyS0sHwsk2t5W33O4cY9hJQnuSxakjHYvLA8bdooHZkDUbbnmHaipkSuqic3IgkHmjZDjvlq1HRi++If5uC3hiY3dRdIbzNEQKt5vWEHIwQDmaggp4zyQNaUobdrM740EGTh1/KNwY30d9wWEhkBpnY72ek2GFfIsX6pgptW3d/VEHZjq3loqYAhvPbwAvwzMe2rofgRI/2MZ/kJDlDz66QRfMH2mciPciXaa0okYRhLm8CRzKrkRQzoOD00tmJ42fdbVGmTwZGtD98H9ddy2pZZBSdYeDztNhp3iMl+ysKyQlOS1vL82/4iOh3tq6EYAWPqnMvxyit71bypFBS88vhCLEhBr1nBr7vp54MR9brzXkLFe03P7DDPIs82gNRWEyxIgudOnWckp6d0ff/geGoZipl+Cpzpi3dFmw5fiMDtN2L4UQX6/6Onc//6hX/1QV2W6+216CQB2PbZwRLLSwbl2F30upPjJM4tMnbbZvCeac8A0CjWEcge5HOg1pddvWGn+LB6yp2gQJYeqKdOFi1lKxmVnrKu/2bRDHveleDouTCskEWRb3e0Fn2mAVTsj6bYZPOxJyNuwCMNn8oS+WP0mrUWEig3luDSRP0pK+BW3br0MANMS3nAihkr8BrgxLnCJlRyazKQ3NEsYAxl3Owfa+1o0ADMDktnJCS8gZ9GjH23Zf/KpKr3QUbe8JX8PwMZtKMe1owrYT3eS3QdwUCm57vmlxhsaJGtNlT2p5KbZTFDQifcZyhvkFBvkimLcSgtNtFKSJmtDMu50RU/1tjDDkgkA0yd1LJimz+0/Xd/QWFXZp71w4yvxPGZa+0hgyXPLxijl2th1O+kqkLRFxKKlWyuDHVAGrPjSKl/o0puLBUXH6SJGIs6UF+ekPLTSkyZybvijHT2tjNkSuanQ8Ctm+aTJrWh/R8PBxprKfqgBtfixw2Zqbn4tMXz5pSX46MgkNyrprHhNridJ5eiEr95amRnVIOAv4HMWbMqGUGYuScfWJV3DnJUtmUXMMBU3/MKNdZ9or9149GTkKRdqgFZUVwPay59VwALblsFy+KrlXcIoEf7oVfgLKJqNNLjsHz8OdSVAIoBZWRVm6uy7M/ypmRkG4ynEuEVKITJwpYwNSncwPPDxtvamA4/HYTwoDVC2qcVMTZ28EZFlCw6Ld1RcxEJ3GGTZdvU7AFwpQa56fbm5OxGsZYDQCQwcQBDnbJwMILCBwAcE9aBXO1S+zZlhobmZEI+iCTePBXDW7Di3EOn78u20iEn6GyG9J53YQ7tuCOrNzxCMPiL/O4dgaPVcM3S+6oWeHNtOXkeE1yFi1RvX4F/Hsj9qdpyvUcUOCjgxdScB/gwAThDRDibdOldFv3A6DnX395+Q46eUjUPTl8/tpDkMsBz0dhBoswfskZrKoVX714IY7qw3Pt0IC1Gp7+saRwh5qDfEAHqJrcvxUSBqUIrejht8x77Kb3BDfKGv+CbeX3BX/k0MciEb/4cY9tB/AY2/0F+RNSoUAAAAAElFTkSuQmCC', symbolSize: 30, data: ["1100", "400", "608", "811", '358', '698', '125', '765'], areaStyle: { normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: "#40A9FF", }, { offset: 1, color: "#051F41", }, ], false ), }, }, itemStyle: { normal: { color: "#40A9FF", }, }, lineStyle: { normal: { width: 2, }, }, } ], }; chart.setOption(option); tools.loopShowTooltip(chart, option, { nterval: 2000, loopSeries: true, }); }, aiQualityECharts2 () { let chart = echarts.init(document.getElementById("aiQuality2")); let option = { grid: { top: 55, right: 0, left: 40, bottom: 40, }, tooltip: { show: true, trigger: "axis", axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: "shadow", // 默认为直线,可选为:'line' | 'shadow' }, }, xAxis: { data: ["回采", "掘进", "开拓工人", "运输", "机电", "通风安全", "安拆", "露天", '其他'], axisTick: { show: false, }, // x轴的字体颜色 axisLabel: { rotate: 40, textStyle: { color: "white", }, }, //y轴线的颜色以及宽度 axisLine: { show: true, lineStyle: { color: "#1E5389", width: 1, type: "solid", }, }, }, yAxis: { name: '单位:人数', nameTextStyle: {//y轴上方单位的颜色 color: '#fff', }, axisTick: { lineStyle: { color: "#18416F", }, }, // y轴的字体颜色 axisLabel: { textStyle: { color: "white", }, }, splitLine: { show: false, lineStyle: { color: "#204561", width: 1, type: "dotted", }, }, //y轴线的颜色以及宽度 axisLine: { show: true, lineStyle: { color: "#1E5389", width: 1, type: "solid", }, }, }, series: [ { name: "", type: "bar", data: [1200, 680, 562, 268, 717, 843, 987, 126, 723, 569], showBackground: false, backgroundStyle: { color: "#18416F", }, barWidth: "15%", itemStyle: { barBorderRadius: [10, 10, 0, 0], color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ { offset: 0, color: "#132543", }, //柱图渐变色 { offset: 1, color: "#00B3FE", }, ]), }, } ], legend: { data: [""], textStyle: { // 图列内容样式 color: "#fff", // 字体颜色 // fontSize: "10", }, right: 30, icon: "roundRect", // 小图标的宽高 itemHeight: 5, }, }; chart.setOption(option); tools.loopShowTooltip(chart, option, { interval: 2000, loopSeries: true, }); }, aiQualityECharts () { let chart = echarts.init(document.getElementById("aiQuality")); let option = { grid: { top: 35, right: 10, left: 50, bottom: 25, }, tooltip: { show: true, trigger: "axis", axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: "shadow", // 默认为直线,可选为:'line' | 'shadow' }, }, xAxis: { data: ["管理序列", "技术序列", "操作序列"], axisTick: { show: false, }, // x轴的字体颜色 axisLabel: { textStyle: { color: "white", }, }, //y轴线的颜色以及宽度 axisLine: { show: true, lineStyle: { color: "#1E5389", width: 1, type: "solid", }, }, }, yAxis: { name: '单位:人数', nameTextStyle: {//y轴上方单位的颜色 color: '#fff', }, axisTick: { lineStyle: { color: "#18416F", }, }, // y轴的字体颜色 axisLabel: { textStyle: { color: "white", }, }, splitLine: { show: false, lineStyle: { color: "#204561", width: 1, type: "dotted", }, }, //y轴线的颜色以及宽度 axisLine: { show: true, lineStyle: { color: "#1E5389", width: 1, type: "solid", }, }, }, series: [ { name: "", type: "bar", data: [1200, 680, 562, 268, 717, 843, 987, 126, 723, 569], showBackground: false, backgroundStyle: { color: "#18416F", }, barWidth: "15%", itemStyle: { barBorderRadius: [10, 10, 0, 0], color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ { offset: 0, color: "#132543", }, //柱图渐变色 { offset: 1, color: "#00B3FE", }, ]), }, } ], legend: { data: [""], textStyle: { // 图列内容样式 color: "#fff", // 字体颜色 // fontSize: "10", }, right: 30, icon: "roundRect", // 小图标的宽高 itemHeight: 5, }, }; chart.setOption(option); tools.loopShowTooltip(chart, option, { interval: 2000, loopSeries: true, }); }, initChartR1 () { let myChart = echarts.init(this.$refs['echartR1']) let option = { tooltip: { trigger: 'item', }, legend: { top: 'center', orient: 'vertical', left: '80%', textStyle: { color: '#9DB9EB', }, }, graphic: { elements: [{ type: 'image',//需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group, // style: { // image: './images/pie-back.png', //这里添加图片地址 // width: 180, // height: 180 // }, left: 'center',// top: 'middle' //配置图片居中 }] // type: "text", // left: "center", // top: "45%", // style: { // text: "总人数2530", // textAlign: "center", // fill: "#fff", // fontSize: 20, // fontWeight: 700 // } }, series: [ { label: { normal: { position: 'inner' } }, name: '', type: 'pie', radius: ['0%', '60%'], labelLine: { normal: { lineStyle: { width: 1, }, }, }, data: [ { value: 1048, name: '教授' }, { value: 735, name: '副教授' }, { value: 580, name: '助教' }, { value: 484, name: '讲师' }, ], itemStyle: { normal: { color: function (colors) { var colorList = [ '#00DCFF', '#116CFD', '#8BA2FF', '#FFC200' ]; return colorList[colors.dataIndex]; } }, } }, ], } myChart.setOption(option) tools.loopShowTooltip(myChart, option, { nterval: 2000, loopSeries: true, }); }, 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 }) //

当前阶段:可论证阶段

//

时间节点:2021.10-2022.10

let option = { tooltip: { padding: 15, enterable: true, transitionDuration: 1, formatter: (params, ticket, callback) => { let tipHtml = `

新开工:工程建设项目

总投资额:${params.data.value}亿

` 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, }, ], } myChart.setOption(option) }, }, })