12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029303030313032303330343035303630373038303930403041304230433044304530463047304830493050305130523053305430553056305730583059306030613062306330643065306630673068306930703071307230733074307530763077307830793080308130823083308430853086308730883089309030913092309330943095309630973098309931003101310231033104310531063107310831093110311131123113311431153116311731183119312031213122312331243125312631273128312931303131313231333134313531363137313831393140314131423143314431453146314731483149315031513152315331543155315631573158315931603161316231633164316531663167316831693170317131723173317431753176317731783179318031813182318331843185318631873188318931903191319231933194319531963197319831993200320132023203320432053206320732083209321032113212321332143215321632173218321932203221322232233224322532263227322832293230323132323233 |
- let app = new Vue({
- el: "#app",
- data () {
- return {
- count: 0, //重点项目两线指标轮到哪个
- list: [], //重点项目两线指标数组
- countType: 0,//重点项目两线指标数组
- leftEcharts1: "",
- leftEcharts2: "",
- leftEcharts3: "",
- leftEcharts4: "",
- leftEcharts5: "",
- leftEcharts6: "",
- leftEcharts7: "",
- leftEcharts8: "",
- leftEcharts9: '',
- leftEcharts10: '',
- leftEcharts11: '',
- shanxiMap: "", // 山西地图
- industryProportion: 1, // 主辅业占比轮播
- industryLayout: 0, //产业布局分析
- time1: "", // 4秒定时器
- time2: "", // 针对投前产业布局分析的定时器
- storageRecordConfig: {
- waitTime: '2000',
- hoverPause: true,
- header: ['企业集团', '项目名 ', '投资总额'],
- headerHeight: 80,
- headerBGC: '#092853',
- oddRowBGC: '#001c42',
- evenRowBGC: '#001c42',
- // oddRowBGC: '#05507b33',
- rowNum: 6,
- columnWidth: [150, 450, 150],
- align: ['center', 'center', 'center'],
- data: [
- ['国际能源', '娄烦县120MW智慧光伏发电项目+10%储能', "6.78亿元"],
- ['国际能源', '平朔矿区150MW农光储氢一体化项目', "7.84亿元"],
- ['汾酒集团', '汾酒2030技改原酒产储能扩建项目(一期)', "91.02亿元"],
- ['大地控股', '山西大地控股忻州新店矿业有限公司投资建设年产800万吨精品砂石骨料项目', "8.67亿元"],
- ['潞安化工', '分布式光伏发电项目', "2.01亿元"],
- ['太重集团', '设立太重(大同)新能源产业投资公司', "0.30亿元"],
- ['大地控股', '山西大地宏翔环保科技有限公司电厂固废资源化综合利用建设项目', "3.60亿元"],
- ['大地控股', '山西大地海科环保科技有限公司电厂固废资源化综合利用建设项目', "3.11亿元"],
- ['汾酒集团', '保健酒园区新增原酒产能项目', "4.98亿元"],
- ['汾酒集团', '白玉酒厂改扩建项目', "4.96亿元"],
- ['华阳新材', '5GW高效光伏组件制造项目', "4.82亿元"],
- ['华新燃气', '吉县—延长输气管道项目(一期工程)', "3.54亿元"],
- ['太重集团', '建设液压挖掘机配套油缸项目', "2.60亿元"],
- ['华远陆港', '物产集团参股设立项目公司投资建设山西物产万科(太原)综合物流产业园项目', "6.60亿元"],
- ['太重集团', '设立昔阳县晶能新能源有限公司', "0.50亿元"],
- ['山西建投', '设立山西低碳环保产业集团有限公司', "30.00亿元"],
- ['山西建投', '设立山西省太忻经济一体化发展投资集团有限公司', "30.00亿元"],
- ['华新燃气', '设立山西华新液化天然气集团有限公司', "3.00亿元"],
- ['交控集团', '设立山西交控新能源发展有限公司', "3.00亿元"]
- ],
- },
- meansList: [
- {
- label: "初步设计",
- value: "106",
- },
- {
- label: "详细设计",
- value: "103",
- },
- {
- label: "施工",
- value: "62",
- },
- {
- label: "完工",
- value: "35",
- },
- {
- label: "验收",
- value: "42",
- },
- {
- label: "结算",
- value: "33",
- },
- ],
- costList: [
- {
- num: 160,
- value: 284,
- status: "正偏差",
- },
- {
- num: 280,
- value: 129,
- status: "容差内",
- },
- {
- num: 103,
- value: 1082,
- status: "负偏差",
- },
- ],
- investData: {
- investList: [
- {
- name: "大地控股",
- yse: "26.79",
- yqhte: "9.64",
- czrde: "121.59",
- jse: "120.13",
- fke: "36.4",
- url: "./img/logos/logo15.png",
- },
- {
- name: "云时代",
- yse: "21.79",
- yqhte: "9.64",
- czrde: "121.59",
- jse: "120.13",
- fke: "36.4",
- url: "./img/logos/logo16.png",
- },
- {
- name: "华舰体育",
- yse: "26.79",
- yqhte: "9.64",
- czrde: "121.59",
- jse: "120.13",
- fke: "36.4",
- url: "./img/logos/logo17.png",
- },
- {
- name: "神农科技",
- yse: "26.79",
- yqhte: "9.64",
- czrde: "121.59",
- jse: "120.13",
- fke: "36.4",
- url: "./img/logos/logo18.png",
- },
- {
- name: "山西焦煤",
- yse: "26.79",
- yqhte: "9.64",
- czrde: "121.59",
- jse: "120.13",
- fke: "36.4",
- url: "./img/logos/logo1.png",
- },
- {
- name: "晋能控股",
- yse: "26.79",
- yqhte: "9.64",
- czrde: "121.59",
- jse: "120.13",
- fke: "36.4",
- url: "./img/logos/logo2.png",
- },
- {
- name: "华阳新材",
- yse: "26.79",
- yqhte: "9.64",
- czrde: "121.59",
- jse: "120.13",
- fke: "36.4",
- url: "./img/logos/logo3.png",
- },
- {
- name: "潞安化工",
- yse: "26.79",
- yqhte: "9.64",
- czrde: "121.59",
- jse: "120.13",
- fke: "36.4",
- url: "./img/logos/logo4.png",
- },
- {
- name: "华新燃气",
- yse: "26.79",
- yqhte: "9.64",
- czrde: "121.59",
- jse: "120.13",
- fke: "36.4",
- url: "./img/logos/logo5.png",
- },
- {
- name: "太重集团",
- yse: "26.79",
- yqhte: "9.64",
- czrde: "121.59",
- jse: "120.13",
- fke: "36.4",
- url: "./img/logos/logo6.png",
- },
- {
- name: "国际能源",
- yse: "26.79",
- yqhte: "9.64",
- czrde: "121.59",
- jse: "120.13",
- fke: "36.4",
- url: "./img/logos/logo7.png",
- },
- {
- name: "华远陆港",
- yse: "26.79",
- yqhte: "9.64",
- czrde: "121.59",
- jse: "120.13",
- fke: "36.4",
- url: "./img/logos/logo8.png",
- },
- {
- name: "水控集团",
- yse: "26.79",
- yqhte: "9.64",
- czrde: "121.59",
- jse: "120.13",
- fke: "36.4",
- url: "./img/logos/logo9.png",
- },
- {
- name: "文旅集团",
- yse: "26.79",
- yqhte: "9.64",
- czrde: "121.59",
- jse: "120.13",
- fke: "36.4",
- url: "./img/logos/logo10.png",
- },
- {
- name: "交控集团",
- yse: "26.79",
- yqhte: "9.64",
- czrde: "121.59",
- jse: "120.13",
- fke: "36.4",
- url: "./img/logos/logo11.png",
- },
- {
- name: "航产集团",
- yse: "26.79",
- yqhte: "9.64",
- czrde: "121.59",
- jse: "120.13",
- fke: "36.4",
- url: "./img/logos/logo12.png",
- },
- {
- name: "山西建投",
- yse: "26.79",
- yqhte: "9.64",
- czrde: "121.59",
- jse: "120.13",
- fke: "36.4",
- url: "./img/logos/logo13.png",
- },
- {
- name: "汾酒集团",
- yse: "26.79",
- yqhte: "9.64",
- czrde: "121.59",
- jse: "120.13",
- fke: "36.4",
- url: "./img/logos/logo14.png",
- },
- ],
- },
- inner: 0,
- innerDeg: 0,
- timer: null,
- witchs: 0,
- topIndex: 0,
- };
- },
- created () { },
- beforeDestroy () {
- clearInterval(this.timer);
- clearInterval(this.time1);
- clearInterval(this.time2);
- },
- mounted () {
- this.time4s();
- this.timeNs();
- this.filterLpData();
- this.lpRotate();
- setTimeout(() => {
- this.leftEcharts1Fun();
- this.leftEcharts2Fun();
- this.leftEcharts3Fun();
- this.leftEcharts4Fun();
- this.leftEcharts5Fun();
- this.leftEcharts6Fun();
- this.leftEcharts7Fun();
- this.leftEcharts8Fun();
- this.leftEcharts9Fun();
- this.leftEcharts10Fun();
- this.leftEcharts11Fun();
- this.chinaEchartsFun();
- this.initChartR1();
- this.initChartR2();
- this.initChartR3();
- this.initChartR4();
- });
- },
- methods: {
- initChartR1 () {
- let that = this;
- let sumA = 42;
- let right5 = [[1, 2, 3, 4, 5, 6]];
- let commonCompany = [
- "山西焦煤",
- "山西焦煤",
- "山西焦煤",
- "山西焦煤",
- "山西焦煤",
- "山西焦煤",
- ];
- // 所有在100范围外的全部变成0,其他值相应增加/减少sumA
- // right5.forEach((item) => {
- // item.forEach((item2) => {
- // if (Number(item2[1]) < 0) {
- // item2[1] = that.$set(item2, 1, Number(that.numSub(item2[1], sumA)));
- // } else if (Number(item2[1]) > 0) {
- // item2[1] = that.$set(item2, 1, Number(item2[1]) + sumA);
- // }
- // if (Number(item2[1]) < -100 - sumA) {
- // item2[1] = that.$set(item2, 1, 0);
- // item2[1] = that.$set(item2, 2, 0);
- // } else if (Number(item2[1]) > 100 + sumA) {
- // item2[1] = that.$set(item2, 1, 0);
- // item2[1] = that.$set(item2, 2, 0);
- // }
- // });
- // });
- const itemStyle = {
- // opacity: 0.8,
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowOffsetY: 0,
- shadowColor: "rgba(0,0,0,0.3)",
- };
- that.right2Chart = echarts.init(this.$refs["echartR1"]);
- that.right2Chart.on("showTip", (params) => {
- // 如果是7或者15并且满足防抖则切换
- if (
- (params.dataIndex == 5 || params.dataIndex == 11) &&
- that.echartR2Fd
- ) {
- that.echartR2Fd = false;
- setTimeout(() => {
- option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6;
- option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6;
- that.right2Chart.setOption(option);
- // 防止勿刷新做的防抖
- setTimeout(() => {
- that.echartR2Fd = true;
- }, 2000);
- }, 1900);
- // 如果是17表示到了最后一个,那么重新来一遍
- } else if (params.dataIndex == 17 && that.echartR2Fd) {
- that.echartR2Fd = false;
- setTimeout(() => {
- option.dataZoom[0].endValue = 0;
- option.dataZoom[0].startValue = 5;
- that.right2Chart.setOption(option);
- // 防止勿刷新做的防抖
- setTimeout(() => {
- that.echartR2Fd = true;
- }, 2000);
- }, 1900);
- }
- });
- let option = {
- color: ["#04635E", "#697143", "#4A3042"],
- dataZoom: [
- {
- // start: 9,//默认为@
- // end: 100,//黑认认为1@0
- type: "slider",
- show: false,
- // xAxisIndex: [0]
- handlesize: 0, //滑动条的 左右2个滑动条的大小
- startValue: 5, // 初始显示值
- endValue: 0, // 结束显示值
- height: 10, //组件高度
- left: "5%",
- right: "4%", //右边的距离
- bottom: "25%", //底边的距离
- borderColor: "#939",
- fillerColor: "#269cdb",
- borderRadius: 5,
- backgroundColor: "#33384b", //两边未选中的滑动条区域的额色
- showDataShadow: false, //是否显示数据阴影
- showDetail: false, //即拖拽时候是否显示详细数值信息
- truerealtime: true, //是否实时更新
- filterMode: "filter",
- },
- {
- type: "inside",
- show: true,
- start: 1,
- end: 100,
- zoomOnMouseWheel: false, //滚轮是否触发缩放
- moveOnMouseMove: false, //鼠标滚轮触发滚动
- },
- ],
- legend: {
- selectedMode: false,
- top: 10,
- right: "6%",
- data: ["正偏差", "容差", "负偏差"],
- textStyle: {
- fontSize: 20,
- color: "#fff",
- fontFamily: "Microsoft YaHei",
- },
- },
- textStyle: {
- color: "#fff",
- },
- // tooltip: {
- // show: true,
- // trigger: "axis",
- // textStyle: {
- // color: "#FFF", // 文字的颜色
- // fontSize: "20", // 文字字体大小
- // fontFamily: "Microsoft YaHei",
- // },
- // formatter: (data) => {
- // return `${
- // data[0].value[0]
- // }<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${
- // data[0].color
- // }"></span> ${data[0].seriesName}:${that.numFormat(
- // data[0].data[2]
- // )}亿<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${
- // data[1].color
- // }"></span> ${data[1].seriesName}:${that.numFormat(
- // data[1].data[2]
- // )}亿<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${
- // data[2].color
- // }"></span> ${data[2].seriesName}:${that.numFormat(
- // data[2].data[2]
- // )}亿`;
- // },
- // axisPointer: {
- // // // type: 'cross',',
- // },
- // },
- grid: {
- top: "10%",
- right: "7%",
- left: "7%",
- bottom: "6%",
- },
- yAxis: {
- min: -101 - sumA,
- max: 101 + sumA,
- maxInterval: 1,
- splitLine: {
- show: false,
- // interval:,
- lineStyle: {
- color: "#68b4dd66",
- type: "dashed",
- },
- },
- axisLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- show: true,
- // formatter: '{value}',
- formatter (data) {
- if (data == 100 + sumA) {
- return "100%";
- } else if (data == -100 - sumA) {
- return "-100%";
- } else if (data == -5 - sumA) {
- return "-5%";
- } else if (data == 5 + sumA) {
- return "5%";
- }
- },
- textStyle: {
- color: "#fff",
- fontSize: "20",
- fontFamily: "Microsoft YaHei",
- },
- },
- nameTextStyle: {
- color: "#fff",
- fontSize: 20,
- fontFamily: "Microsoft YaHei",
- },
- },
- xAxis: {
- data: commonCompany,
- axisLine: {
- show: false, //隐藏X轴轴线
- lineStyle: {
- color: "#005094",
- width: 1,
- },
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: "#68b4dd66",
- type: "dashed",
- },
- },
- axisTick: {
- show: true, //隐藏X轴刻度
- },
- axisLabel: {
- show: true,
- rotate: 20,
- padding: [0, 0, 0, 0],
- textStyle: {
- color: "#fff", //X轴文字颜色
- fontSize: 22,
- fontFamily: "Microsoft YaHei",
- },
- },
- },
- series: [
- {
- name: "正偏差",
- type: "scatter",
- itemStyle: itemStyle,
- data: right5[0],
- symbolSize: function (data) {
- if ((data[2] > 0 && data[2] < 50) || data[2] == 50) {
- return 40;
- } else if ((data[2] > 50 && data[2] < 100) || data[2] == 100) {
- return 70;
- } else if (data[2] > 100) {
- return 100;
- }
- },
- markLine: {
- symbol: "none",
- data: [
- {
- name: "100%",
- yAxis: 100 + sumA,
- lineStyle: {
- // color: '#fff',
- },
- label: {
- show: false,
- formatter: "{b}",
- position: "right",
- color: "#fff",
- fontSize: 20,
- label: {
- show: false,
- },
- },
- },
- {
- name: "5%",
- yAxis: 5 + sumA,
- lineStyle: {
- // color: '#fff',
- },
- label: {
- show: false,
- formatter: "{b}",
- position: "right",
- color: "#fff",
- fontSize: 20,
- },
- },
- {
- name: "-5%",
- yAxis: -5 - sumA,
- lineStyle: {
- // color: '#fff',
- },
- label: {
- show: false,
- formatter: "{b}",
- position: "right",
- color: "#fff",
- fontSize: 20,
- },
- },
- {
- name: "100%",
- yAxis: -100 - sumA,
- lineStyle: {
- // color: '#fff',
- },
- label: {
- show: false,
- formatter: "{b}",
- position: "right",
- color: "#fff",
- fontSize: 20,
- },
- },
- ],
- },
- },
- {
- name: "容差",
- type: "scatter",
- itemStyle: itemStyle,
- data: right5[1],
- symbolSize: function (data) {
- if ((data[2] > 0 && data[2] < 50) || data[2] == 50) {
- return 40;
- } else if ((data[2] > 50 && data[2] < 100) || data[2] == 100) {
- return 70;
- } else if (data[2] > 100) {
- return 100;
- }
- },
- },
- {
- name: "负偏差",
- type: "scatter",
- itemStyle: itemStyle,
- data: right5[2],
- symbolSize: function (data) {
- if ((data[2] > 0 && data[2] < 50) || data[2] == 50) {
- return 40;
- } else if ((data[2] > 50 && data[2] < 100) || data[2] == 100) {
- return 70;
- } else if (data[2] > 100) {
- return 100;
- }
- },
- },
- ],
- };
- that.right2Chart.on("click", function (param) {
- if (that.versions) {
- that.rightAdd.modelName = 1;
- that.rightAdd.substraction =
- param.seriesName == "正偏差"
- ? 1
- : param.seriesName == "容差"
- ? 2
- : 3;
- that.rightAdd.projectStepCode = "";
- that.projectNum = 313;
- that.rightPenetrateTwo(
- 1,
- param.seriesName == "正偏差"
- ? 1
- : param.seriesName == "容差"
- ? 2
- : 3,
- that.findCode(param.name),
- "right"
- );
- } else {
- that.projectListTipShow = true;
- }
- });
- that.right2Chart.setOption(option);
- tools.loopShowTooltip(that.right2Chart, option, {
- interval: 2000,
- loopSeries: true,
- });
- },
- initChartR2 () {
- let that = this;
- that.right1Chart = echarts.init(this.$refs["echartR2"]);
- let option = {
- color: [
- {
- type: "linear",
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0,
- color: "#91231F", // 0% 处的颜色
- },
- {
- offset: 1,
- color: "#F98784", // 100% 处的颜色
- },
- ],
- global: false, // 缺省为 false
- },
- {
- type: "linear",
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0,
- color: "#9F7F00", // 0% 处的颜色
- },
- {
- offset: 1,
- color: "#FBE463", // 100% 处的颜色
- },
- ],
- global: false, // 缺省为 false
- },
- {
- type: "linear",
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0,
- color: "#07806E", // 0% 处的颜色
- },
- {
- offset: 1,
- color: "#79FFEB", // 100% 处的颜色
- },
- ],
- global: false, // 缺省为 false
- },
- ],
- legend: {
- top: 10,
- right: 10,
- textStyle: {
- fontSize: 20,
- color: "#fff",
- fontFamily: "Microsoft YaHei",
- },
- itemStyle: {
- borderCap: "round",
- },
- },
- grid: {
- left: "3%",
- right: "4%",
- bottom: "3%",
- containLabel: true,
- },
- xAxis: [
- {
- type: "category",
- data: [
- "山西焦煤",
- "华阳控股",
- "晋能控股",
- "潞安化工",
- "国际能源",
- "云时代",
- "航产集团",
- ],
- axisLine: {
- lineStyle: {
- color: "#005094",
- },
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- color: "#fff",
- rotate: 20,
- fontSize: 22,
- },
- },
- ],
- yAxis: [
- {
- type: "value",
- axisLabel: {
- color: "#fff",
- fontSize: 22,
- },
- splitLine: {
- lineStyle: {
- type: "dashed",
- },
- },
- },
- ],
- series: [
- {
- name: "低风险",
- type: "bar",
- stack: "Ad",
- barWidth: 14,
- emphasis: {
- focus: "series",
- },
- itemStyle: {
- barBorderRadius: [15, 15, 15, 15],
- },
- data: [120, 132, 101, 134, 90, 230, 210],
- },
- {
- name: "中风险",
- type: "bar",
- stack: "Ad",
- itemStyle: {
- barBorderRadius: [15, 15, 15, 15],
- },
- emphasis: {
- focus: "series",
- },
- data: [220, 182, 191, 234, 290, 330, 310],
- },
- {
- name: "高风险",
- type: "bar",
- stack: "Ad",
- itemStyle: {
- barBorderRadius: [15, 15, 15, 15],
- },
- emphasis: {
- focus: "series",
- },
- data: [150, 232, 201, 154, 190, 330, 410],
- },
- ],
- };
- that.right1Chart.setOption(option);
- },
- initChartR3 () {
- let that = this;
- that.right3Chart = echarts.init(this.$refs["echartR3"]);
- let option = {
- radar: {
- // shape: 'circle',
- splitNumber: 3,
- splitLine: {
- lineStyle: {
- color: ["#DD5955", "#39e1d0", "#2e3d45"],
- },
- },
- splitArea: {
- areaStyle: {
- color: [
- "rgba(88,247,223,0.2)",
- "rgba(255, 224, 54, 0.2)",
- "rgba(221,89,85,0.3)",
- ],
- },
- },
- indicator: [
- { name: "安全风险", max: 25 },
- { name: "付款风险", max: 25 },
- { name: "合同风险", max: 25 },
- { name: "结算风险", max: 25 },
- { name: "进度风险", max: 25 },
- { name: "质量风险", max: 25 },
- ],
- },
- series: [
- {
- name: "风险",
- type: "radar",
- symbol: "circle",
- data: [
- {
- value: [12, 23, 21, 17, 20, 9],
- name: "Allocated Budget",
- areaStyle: {
- color: "#112b75",
- },
- lineStyle: {
- width: 4,
- color: "#60C1FF",
- },
- label: {
- fontSize: 22,
- },
- },
- ],
- },
- ],
- };
- that.right3Chart.setOption(option);
- },
- initChartR4 () {
- let that = this;
- that.right4Chart = echarts.init(this.$refs["echartR4"]);
- let option = {
- tooltip: {
- trigger: "item",
- show: true,
- formatter: function (p) {
- console.info(p);
- return p.marker + p.name + " : " + p.value;
- },
- },
- grid: {
- left: "3%",
- right: "4%",
- bottom: "3%",
- containLabel: true,
- },
- xAxis: {
- data: ["山西焦煤", "晋能控股", "华阳新材"],
- type: "category",
- splitLine: {
- show: false,
- },
- axisLine: {
- show: true,
- lineStyle: {
- color: "#fff",
- },
- },
- axisTick: {
- show: true,
- },
- axisLabel: {
- color: "#fff",
- fontSize: 22,
- rotate: 20,
- },
- },
- yAxis: {
- type: "value",
- splitNumber: 4,
- interval: 50,
- splitLine: {
- show: true,
- lineStyle: {
- color: "#68B4DD",
- type: "dashed",
- },
- },
- axisLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- color: "#fff",
- fontSize: 22,
- },
- },
- series: [
- {
- type: "bar",
- animation: false,
- barWidth: 2,
- data: [60, 85, 110],
- tooltip: {
- show: false,
- },
- itemStyle: {
- color: {
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0,
- color: "rgba(85, 255, 237, 1)", // 0% 处的颜色
- },
- {
- offset: 1,
- color: "rgba(66, 142, 255, 0.05)", // 100% 处的颜色
- },
- ],
- },
- },
- },
- {
- type: "scatter",
- data: [60, 85, 110],
- symbolOffset: ["-120%", "0"],
- symbolSize: 8,
- itemStyle: {
- borderWidth: 0,
- opacity: 1,
- color: "rgba(85, 255, 237, 1)",
- shadowColor: "rgba(85, 255, 237, 1)",
- shadowBlur: 100,
- shadowOffsetX: 100,
- },
- },
- {
- type: "bar",
- animation: false,
- barGap: "800%",
- barWidth: 2,
- data: [60, 85, 110],
- tooltip: {
- show: false,
- },
- itemStyle: {
- color: {
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0,
- color: "rgba(214, 91, 255, 1)", // 0% 处的颜色
- },
- {
- offset: 1,
- color: "rgba(184, 91, 255, 0.05)", // 100% 处的颜色
- },
- ],
- },
- },
- },
- {
- type: "scatter",
- data: [60, 85, 110],
- symbolOffset: ["110%", "0"],
- symbolSize: 8,
- itemStyle: {
- borderWidth: 0,
- opacity: 1,
- color: "#f2fec3",
- },
- },
- ],
- };
- that.right4Chart.setOption(option);
- },
- clickItem (index) {
- const angle = 360 / this.investData.investList.length;
- this.witchs = index;
- this.inner = index;
- this.innerDeg = this.witchs * angle;
- this.lpRotate();
- },
- lpRotate () {
- const angle = 360 / this.investData.investList.length;
- clearInterval(this.timer);
- this.timer = setInterval(() => {
- this.inner++;
- this.topIndex++;
- this.topIndex = this.topIndex % this.meansList.length;
- this.witchs = this.inner % this.investData.investList.length;
- this.innerDeg = this.inner * angle;
- }, 2000);
- },
- filterLpData () {
- const angle = 360 / this.investData.investList.length;
- for (let i in this.investData.investList) {
- this.investData.investList[i].deg = i * angle;
- this.$set(this.investData.investList, i, {
- ...this.investData.investList[i],
- deg: i * angle,
- });
- }
- },
- // 4秒定时器
- time4s () {
- let that = this;
- // 4秒定时器
- this.time1 = setInterval(() => {
- that.industryProportion == 1
- ? (that.industryProportion = 2)
- : (that.industryProportion = 1);
- that.leftEcharts1.dispose();
- that.leftEcharts2.dispose();
- that.leftEcharts3.dispose();
- that.leftEcharts4.dispose();
- that.leftEcharts1Fun();
- that.leftEcharts2Fun();
- that.leftEcharts3Fun();
- that.leftEcharts4Fun();
- }, 4000);
- },
- // 针对投前产业布局分析的定时器
- timeNs () {
- let that = this;
- this.time2 = setInterval(() => {
- if (that.industryLayout < 3) {
- that.industryLayout = that.industryLayout + 1;
- } else {
- that.industryLayout = 0;
- }
- this.time2 && clearInterval(this.time2);
- this.timeNs();
- that.leftEcharts5.dispose();
- that.leftEcharts5Fun();
- }, left1[that.industryLayout].length * 2000);
- },
- // 主辅业占比点击方法
- industryProportionChange (e) {
- let that = this;
- this.industryProportion = e;
- this.time1 && clearInterval(this.time1);
- that.leftEcharts1.dispose();
- that.leftEcharts2.dispose();
- that.leftEcharts3.dispose();
- that.leftEcharts4.dispose();
- that.leftEcharts1Fun();
- that.leftEcharts2Fun();
- that.leftEcharts3Fun();
- that.leftEcharts4Fun();
- this.time4s();
- },
- // 产业布局分析点击方法
- industryLayoutChange (e) {
- this.industryLayout = e;
- this.time2 && clearInterval(this.time2);
- this.leftEcharts5.dispose();
- this.timeNs()
- this.leftEcharts5Fun();
- },
- yuanChange (value) {
- return Number((value / 100000000).toFixed(2));
- },
- // 逢三折断
- numFormat (value) {
- if (!value) return "0";
- // var intPart = Number(value).toFixed(0) // 获取整数部分
- var intPart = parseInt(value); // 获取整数部分
- var intPartFormat = intPart
- .toString()
- .replace(/(\d)(?=(?:\d{3})+$)/g, "$1,"); // 将整数部分逢三一断
- var floatPart = ".00"; // 预定义小数部分
- var value2Array = value.toString().split(".");
- // =2表示数据有小数位
- if (value2Array.length === 2) {
- floatPart = value2Array[1].toString(); // 拿到小数部分
- if (floatPart.length === 1) {
- // 补0
- return intPartFormat + "." + floatPart + "0";
- } else {
- floatPart = floatPart.slice(0, 2);
- return intPartFormat + "." + floatPart;
- }
- } else {
- return intPartFormat;
- }
- },
- leftEcharts1Fun () {
- let that = this;
- this.leftEcharts1 = echarts.init(this.$refs["leftEcharts1"]);
- option = {
- title: {
- text: that.industryProportion == 1 ? "30%" : "70%",
- x: "center",
- y: "center",
- textStyle: {
- fontWeight: "normal",
- color: "#68BDFF",
- fontSize: "20",
- },
- },
- color: ["#68BDFF", "#254F7F"],
- series: [
- {
- name: "Line 1",
- type: "pie",
- clockWise: true,
- radius: ["80%", "100%"],
- itemStyle: {
- normal: {
- label: {
- show: false,
- },
- labelLine: {
- show: false,
- },
- },
- },
- hoverAnimation: false,
- data: [
- {
- value: 80,
- name: "01",
- itemStyle: {
- normal: {
- label: {
- show: false,
- },
- labelLine: {
- show: false,
- },
- },
- },
- },
- {
- name: "02",
- value: 20,
- },
- ],
- },
- ],
- };
- //轮播
- // tools.loopShowTooltip(leftEcharts1, option, {
- // interval: 2000,
- // loopSeries: true,
- // });
- //注册
- that.leftEcharts1.setOption(option);
- },
- leftEcharts2Fun () {
- let that = this;
- this.leftEcharts2 = echarts.init(this.$refs["leftEcharts2"]);
- let nameList = ["a"];
- let valueList = that.industryProportion == 1 ? [30] : [70];
- let total = 100; // 数据总数
- var category = nameList.map((item, index) => {
- return {
- value: valueList[index],
- itemStyle: {
- color: new echarts.graphic.LinearGradient(
- 1,
- 0,
- 0,
- 1,
- [
- {
- offset: 0,
- color: "#40A9FF50",
- },
- {
- offset: 1,
- color: "#40A9FF",
- },
- ],
- false
- ),
- },
- };
- });
- var totalList = [];
- var totalBorderList = [];
- nameList.map((item, index) => {
- totalList.push({
- value: total,
- itemStyle: {
- color: "rgba(51, 147, 236, 0.29)",
- },
- });
- totalBorderList.push({
- value: total,
- itemStyle: {
- borderColor: "rgba(51, 147, 236, 0.29)",
- color: "transparent",
- },
- });
- });
- var datas = [];
- category.forEach((value) => {
- datas.push(value.value);
- });
- option = {
- // backgroundColor: 'rgb(231,238,249)',
- xAxis: {
- max: total,
- splitLine: {
- show: false,
- },
- axisLine: {
- show: false,
- },
- axisLabel: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- },
- grid: {
- left: "0%",
- top: "15%", // 设置条形图的边距
- right: "15%",
- bottom: "5%",
- },
- yAxis: [
- {
- type: "category",
- inverse: false,
- data: nameList,
- axisLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- show: false,
- },
- },
- ],
- series: [
- {
- // 内
- type: "bar",
- barWidth: 16,
- barGap: "20%",
- silent: true,
- // label: {
- // normal: {
- // formatter: (item) => {
- // return `${item['name']}:${item['value']} `;
- // },
- // textStyle: {
- // color: 'rgba(105, 120, 136, 1)',
- // fontSize: 14,
- // },
- // position: [0, '-25px'],
- // show: true,
- // },
- // },
- data: category,
- z: 1,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(
- 1,
- 0,
- 0,
- 1,
- [
- {
- offset: 0,
- color: "rgba(81, 193, 156, 1)",
- },
- {
- offset: 1,
- color: "rgba(234, 177, 100, 1)",
- },
- ],
- false
- ),
- },
- },
- animationEasing: "elasticOut",
- },
- {
- // 分隔
- type: "pictorialBar",
- itemStyle: {
- normal: {
- color: "#143362",
- },
- },
- symbolRepeat: "fixed",
- symbolMargin: 8,
- symbol: "rect",
- symbolClip: false,
- symbolSize: [4, 20],
- symbolPosition: "start",
- symbolOffset: [0, -2],
- symbolBoundingData: total,
- data: [total, total, total, total],
- z: 2,
- animationEasing: "elasticOut",
- },
- {
- // label
- type: "pictorialBar",
- symbolBoundingData: total,
- itemStyle: {
- normal: {
- color: "none",
- },
- },
- label: {
- normal: {
- formatter: (params) => {
- var text;
- text = `${((params["data"] * 100) / total).toFixed(2)}亿`;
- return text;
- },
- textStyle: {
- // 图列内容样式
- fontSize: "20",
- fontWeight: 800,
- },
- position: "right",
- offset: [0, -3],
- distance: 10, // 向右偏移位置
- show: true,
- color: "#68BDFF",
- },
- },
- data: datas,
- z: 0,
- },
- {
- name: "外框",
- type: "bar",
- barGap: "-130%", // 设置外框粗细
- data: totalBorderList,
- barWidth: 26,
- itemStyle: {
- normal: {
- // barBorderRadius: [5, 5, 5, 5],
- borderWidth: 1, // 边框宽度
- borderColor: "rgb(51, 147, 236)", // 边框色
- color: "rgb(231,238,249)",
- },
- },
- z: 0,
- },
- ],
- };
- //轮播
- // tools.loopShowTooltip(leftEcharts1, option, {
- // interval: 2000,
- // loopSeries: true,
- // });
- //注册
- that.leftEcharts2.setOption(option);
- },
- leftEcharts3Fun () {
- let that = this;
- this.leftEcharts3 = echarts.init(this.$refs["leftEcharts3"]);
- option = {
- title: {
- text: that.industryProportion == 1 ? "70%" : "30%",
- x: "center",
- y: "center",
- textStyle: {
- fontWeight: "normal",
- color: "#68BDFF",
- fontSize: "20",
- },
- },
- color: ["#5BDCC8", "#254F7F"],
- series: [
- {
- name: "Line 1",
- type: "pie",
- clockWise: true,
- radius: ["80%", "100%"],
- itemStyle: {
- normal: {
- label: {
- show: false,
- },
- labelLine: {
- show: false,
- },
- },
- },
- hoverAnimation: false,
- data: [
- {
- value: 80,
- name: "01",
- itemStyle: {
- normal: {
- label: {
- show: false,
- },
- labelLine: {
- show: false,
- },
- },
- },
- },
- {
- name: "02",
- value: 20,
- },
- ],
- },
- ],
- };
- //轮播
- // tools.loopShowTooltip(leftEcharts1, option, {
- // interval: 2000,
- // loopSeries: true,
- // });
- //注册
- that.leftEcharts3.setOption(option);
- },
- leftEcharts4Fun () {
- let that = this;
- this.leftEcharts4 = echarts.init(this.$refs["leftEcharts4"]);
- let nameList = ["a"];
- let valueList = that.industryProportion == 1 ? [70] : [30];
- let total = 100; // 数据总数
- var category = nameList.map((item, index) => {
- return {
- value: valueList[index],
- itemStyle: {
- color: new echarts.graphic.LinearGradient(
- 1,
- 0,
- 0,
- 1,
- [
- {
- offset: 0,
- color: "#5BDCC850",
- },
- {
- offset: 1,
- color: "#5BDCC8",
- },
- ],
- false
- ),
- },
- };
- });
- var totalList = [];
- var totalBorderList = [];
- nameList.map((item, index) => {
- totalList.push({
- value: total,
- itemStyle: {
- color: "rgba(51, 147, 236, 0.29)",
- },
- });
- totalBorderList.push({
- value: total,
- itemStyle: {
- borderColor: "rgba(51, 147, 236, 0.29)",
- color: "transparent",
- },
- });
- });
- var datas = [];
- category.forEach((value) => {
- datas.push(value.value);
- });
- option = {
- // backgroundColor: 'rgb(231,238,249)',
- xAxis: {
- max: total,
- splitLine: {
- show: false,
- },
- axisLine: {
- show: false,
- },
- axisLabel: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- },
- grid: {
- left: "0%",
- top: "15%", // 设置条形图的边距
- right: "15%",
- bottom: "5%",
- },
- yAxis: [
- {
- type: "category",
- inverse: false,
- data: nameList,
- axisLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- show: false,
- },
- },
- ],
- series: [
- {
- // 内
- type: "bar",
- barWidth: 16,
- barGap: "20%",
- silent: true,
- // label: {
- // normal: {
- // formatter: (item) => {
- // return `${item['name']}:${item['value']} `;
- // },
- // textStyle: {
- // color: 'rgba(105, 120, 136, 1)',
- // fontSize: 14,
- // },
- // position: [0, '-25px'],
- // show: true,
- // },
- // },
- data: category,
- z: 1,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(
- 1,
- 0,
- 0,
- 1,
- [
- {
- offset: 0,
- color: "rgba(81, 193, 156, 1)",
- },
- {
- offset: 1,
- color: "rgba(234, 177, 100, 1)",
- },
- ],
- false
- ),
- },
- },
- animationEasing: "elasticOut",
- },
- {
- // 分隔
- type: "pictorialBar",
- itemStyle: {
- normal: {
- color: "#143362",
- },
- },
- symbolRepeat: "fixed",
- symbolMargin: 8,
- symbol: "rect",
- symbolClip: false,
- symbolSize: [4, 20],
- symbolPosition: "start",
- symbolOffset: [0, -2],
- symbolBoundingData: total,
- data: [total, total, total, total],
- z: 2,
- animationEasing: "elasticOut",
- },
- {
- // label
- type: "pictorialBar",
- symbolBoundingData: total,
- itemStyle: {
- normal: {
- color: "none",
- },
- },
- label: {
- normal: {
- formatter: (params) => {
- var text;
- text = `${((params["data"] * 100) / total).toFixed(2)}亿`;
- return text;
- },
- textStyle: {
- // 图列内容样式
- fontSize: "20",
- fontWeight: 800,
- },
- position: "right",
- offset: [0, -3],
- distance: 10, // 向右偏移位置
- show: true,
- color: "#68BDFF",
- },
- },
- data: datas,
- z: 0,
- },
- {
- name: "外框",
- type: "bar",
- barGap: "-130%", // 设置外框粗细
- data: totalBorderList,
- barWidth: 26,
- itemStyle: {
- normal: {
- // barBorderRadius: [5, 5, 5, 5],
- borderWidth: 1, // 边框宽度
- borderColor: "rgb(51, 147, 236)", // 边框色
- color: "rgb(231,238,249)",
- },
- },
- z: 0,
- },
- ],
- };
- //轮播
- // tools.loopShowTooltip(leftEcharts1, option, {
- // interval: 2000,
- // loopSeries: true,
- // });
- //注册
- that.leftEcharts4.setOption(option);
- },
- leftEcharts5Fun () {
- let that = this;
- this.leftEcharts5 = echarts.init(this.$refs["leftEcharts5"]);
- let dataList = [];
- left1[that.industryLayout].forEach((item, index) => {
- dataList[index] = {
- value: item.y,
- name: item.name,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
- {
- offset: 0,
- color: commonColor2[index], //顶部颜色
- },
- {
- offset: 1,
- color: commonColor[index], // 底部颜色
- },
- ]),
- borderColor: commonColor[index],
- borderWidth: 3,
- },
- },
- };
- });
- let option = {
- tooltip: {
- trigger: "item",
- formatter: function (e) {
- return `<span style="display:inline-block;margin-right:15px;border-radius:10px;width:20px;height:20px;background-color:${e.borderColor
- };"></span>${e.name} ${e.percent}%<br>${e.value}亿 ${left1[that.industryLayout][e.seriesIndex].num
- }个`;
- },
- backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
- textStyle: {
- color: "#fff",
- fontStyle: "normal", // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)
- fontWeight: "normal", // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
- fontSize: "28", // 文字字体大小
- },
- },
- legend: {
- top: "center",
- orient: "vertical",
- left: "75%",
- textStyle: {
- color: "#fff",
- fontSize: 28,
- padding: [0, 20],
- },
- },
- graphic: {
- elements: [
- {
- type: "image", //需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
- style: {
- image: "./img/whiteCircle.png", //这里添加图片地址
- width: 80,
- height: 80,
- },
- left: "center", //
- top: "middle", //配置图片居中
- },
- ],
- },
- series: [
- {
- name: "",
- type: "pie",
- radius: ["20%", "80%"],
- labelLine: {
- normal: {
- lineStyle: {
- width: 1,
- },
- },
- },
- label: {
- normal: {
- show: false,
- textStyle: {
- fontSize: 28,
- color: "#fff",
- },
- },
- },
- roseType: "area",
- data: dataList,
- },
- {
- tooltip: {
- show: false,
- },
- type: "pie",
- radius: ["80%", "82%"],
- hoverAnimation: false,
- name: "",
- data: [
- {
- name: "",
- value: 0,
- itemStyle: {
- normal: {
- color: "#345189",
- },
- },
- },
- ],
- },
- ],
- };
- //轮播
- tools.loopShowTooltip(that.leftEcharts5, option, {
- interval: 2000,
- loopSeries: true,
- });
- //注册
- that.leftEcharts5.setOption(option);
- },
- leftEcharts6Fun () {
- let that = this;
- this.leftEcharts6 = echarts.init(this.$refs["leftEcharts6"]);
- var dataArr = 44;
- var colorSet = {
- color: "#22B95E",
- };
- var color1 = {
- type: "linear",
- x: 0,
- y: 0,
- x2: 1,
- y2: 1,
- colorStops: [
- {
- offset: 0,
- color: "rgba(255,255,255,0.1)",
- },
- {
- offset: 1,
- color: "rgba(255,255,255,0.3)",
- },
- ],
- global: false,
- };
- var color2 = {
- type: "linear",
- x: 0,
- y: 0,
- x2: 1,
- y2: 1,
- colorStops: [
- {
- offset: 0,
- color: "#30DBBA",
- },
- {
- offset: 1,
- color: "#2DE696",
- },
- ],
- global: false,
- };
- option = {
- tooltip: {
- formatter: "{a} <br/>{b} : {c}%",
- },
- series: [
- {
- name: "内部进度条",
- type: "gauge",
- // center: ['20%', '50%'],
- radius: "50%",
- splitNumber: 10,
- axisLine: {
- lineStyle: {
- color: [
- [dataArr / 100, "rgba(0,0,0,0)"],
- [1, "rgba(0,0,0,0)"],
- ],
- width: 1,
- },
- },
- axisLabel: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- splitLine: {
- show: false,
- },
- itemStyle: {
- color: "#ffffff",
- },
- detail: {
- formatter: function (value) {
- if (value !== 0) {
- var num = Math.round(value);
- return parseInt(num).toFixed(0) + "%";
- } else {
- return 0;
- }
- },
- offsetCenter: [0, 117],
- textStyle: {
- padding: [0, 0, 0, 0],
- fontSize: 60,
- color: "#58F7DF",
- },
- },
- title: {
- //标题
- show: true,
- offsetCenter: [0, 220], // x, y,单位px
- textStyle: {
- color: "#40A9FF",
- fontSize: 34, //表盘上的标题文字大小
- fontWeight: 400,
- fontFamily: "MicrosoftYaHei",
- },
- },
- data: [
- {
- name: "总额度:1,323.85亿",
- value: dataArr,
- itemStyle: {
- fontSize: "50", //y轴上方单位的大小
- color: "#FFF666",
- fontFamily: "MicrosoftYaHei",
- },
- },
- ],
- pointer: {
- show: true,
- length: "100%",
- radius: "20%",
- width: 3, //指针粗细
- },
- animationDuration: 4000,
- },
- {
- name: "内部阴影",
- type: "gauge",
- radius: "75%",
- splitNumber: 10,
- axisLine: {
- lineStyle: {
- color: [
- [
- dataArr / 100,
- new echarts.graphic.LinearGradient(0, 1, 0, 0, [
- {
- offset: 0,
- color: "#081947",
- },
- {
- offset: 0.5,
- color: "#5DF5A9",
- },
- {
- offset: 1,
- color: "#F6F16A",
- },
- ]),
- ],
- [1, "#0E4889"],
- ],
- width: 70,
- },
- },
- axisLabel: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- splitLine: {
- show: false,
- },
- itemStyle: {
- show: false,
- },
- },
- {
- name: "外部刻度",
- type: "gauge",
- // center: ['20%', '50%'],
- radius: "90%",
- min: 0, //最小刻度
- max: 100, //最大刻度
- splitNumber: 5, //刻度数量
- startAngle: 225,
- endAngle: -45,
- axisLine: {
- show: true,
- lineStyle: {
- width: 1,
- color: [[1, "rgba(0,0,0,0)"]],
- },
- }, //仪表盘轴线
- axisLabel: {
- show: false,
- color: "#ffffff",
- fontSize: 28,
- fontFamily: "SourceHanSansSC-Regular",
- fontWeight: "bold",
- // position: "top",
- distance: -45,
- formatter: function (v) {
- switch (v + "") {
- case "0":
- return "0";
- case "10":
- return "10";
- case "20":
- return "20";
- case "30":
- return "30";
- case "40":
- return "40";
- case "50":
- return "50";
- case "60":
- return "60";
- case "70":
- return "70";
- case "80":
- return "80";
- case "90":
- return "90";
- case "100":
- return "100";
- }
- },
- }, //刻度标签。
- axisTick: {
- show: true,
- splitNumber: 10,
- lineStyle: {
- color: "#3798D7", //用颜色渐变函数不起作用
- width: 1,
- },
- length: -6,
- }, //刻度样式
- splitLine: {
- show: true,
- length: -12,
- lineStyle: {
- color: "#3798D7", //用颜色渐变函数不起作用
- },
- }, //分隔线样式
- detail: {
- show: false,
- },
- },
- {
- //指针上的圆
- type: "pie",
- tooltip: {
- show: false,
- },
- hoverAnimation: false,
- legendHoverLink: false,
- radius: ["0%", "4%"],
- center: ["50%", "50%"],
- label: {
- normal: {
- show: false,
- },
- },
- labelLine: {
- normal: {
- show: false,
- },
- },
- data: [
- {
- value: 120,
- itemStyle: {
- normal: {
- color: "#ffffff",
- },
- },
- },
- ],
- },
- ],
- };
- //轮播
- // tools.loopShowTooltip(leftEcharts1, option, {
- // interval: 2000,
- // loopSeries: true,
- // });
- //注册
- that.leftEcharts6.setOption(option);
- },
- leftEcharts7Fun () {
- let that = this;
- this.leftEcharts7 = echarts.init(this.$refs["leftEcharts7"]);
- let option = {
- title: {
- text: "固定资产进度分布",
- textStyle: {
- color: "#fff",
- fontSize: 28,
- fontWeight: 500,
- fontFamily: "Microsoft YaHei",
- },
- top: "20",
- left: "220",
- },
- textStyle: {
- color: "#fff",
- },
- tooltip: {
- show: false,
- trigger: "axis",
- formatter: function (params) {
- var tip =
- params[0].axisValue +
- "<br/>" +
- params[0].marker +
- params[0].data[1] +
- ":" +
- params[0].data[2] +
- "个," +
- params[0].data[3] +
- "亿元" +
- "<br/>" +
- params[1].marker +
- params[1].data[1] +
- ":" +
- params[1].data[2] +
- "个," +
- params[1].data[3] +
- "亿元";
- return tip;
- },
- textStyle: {
- color: "#ffffff", // 文字的颜色
- fontSize: "20", // 文字字体大小
- fontFamily: "Microsoft YaHei",
- },
- axisPointer: {
- // lineStyle: {
- // type: 'dashed',
- // width: 2,
- // color: 'rgba(255,255,255,0.6)'
- // },
- animation: false,
- },
- },
- grid: {
- top: "0%",
- right: "5%",
- left: "15%",
- bottom: "-10%",
- },
- yAxis: {
- data: ["备案", "特别监管"],
- splitLine: {
- show: false,
- lineStyle: {
- color: "#68b4dd66",
- type: "dashed",
- },
- },
- axisLine: {
- show: false,
- },
- axisLabel: {
- show: true,
- formatter: "{value}",
- textStyle: {
- color: function (data) {
- if (data == "特别监管") {
- return "#40A9FF";
- } else if (data == "备案") {
- return "#5BDCC8";
- }
- },
- fontSize: 20,
- padding: [0, -10, 0, 0],
- fontFamily: "Microsoft YaHei",
- },
- },
- nameTextStyle: {
- color: "#ebf8ac",
- fontSize: 16,
- fontFamily: "Microsoft YaHei",
- },
- },
- xAxis: {
- data: ["项目储备", "项目立项", "可研论证", "投资决策"],
- axisLine: {
- show: true, //隐藏X轴轴线
- lineStyle: {
- color: "red",
- width: 1,
- },
- },
- axisTick: {
- show: false, //隐藏X轴刻度
- },
- axisLabel: {
- show: true,
- textStyle: {
- color: "#fff", //X轴文字颜色
- fontSize: 20,
- padding: [-80, 0, 0, 0],
- fontFamily: "Microsoft YaHei",
- },
- },
- },
- series: [
- {
- name: "特别监管",
- type: "scatter",
- symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
- symbolSize: function (data) {
- return Math.sqrt(data[2]) * 5;
- },
- // label: {
- // emphasis: {
- // show: true,
- // formatter: function (param) {
- // return param.data[2];
- // },
- // position: 'top'
- // }
- // },
- itemStyle: {
- normal: {
- color: "#69c0ff",
- },
- },
- // data: left13[0]
- },
- {
- name: "备案",
- type: "scatter",
- symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
- symbolSize: function (data) {
- return Math.sqrt(data[2]) * 5;
- },
- // label: {
- // emphasis: {
- // show: true,
- // formatter: function (param) {
- // return param.data[2];
- // },
- // position: 'top'
- // }
- // },
- itemStyle: {
- normal: {
- color: "#957DFF",
- },
- },
- // data: left13[1]
- },
- ],
- };
- //轮播
- // tools.loopShowTooltip(leftEcharts1, option, {
- // interval: 2000,
- // loopSeries: true,
- // });
- //注册
- that.leftEcharts7.setOption(option);
- },
- leftEcharts8Fun () {
- let that = this;
- this.leftEcharts8 = echarts.init(this.$refs["leftEcharts8"]);
- let option = {
- title: {
- text: "固定资产进度分布",
- textStyle: {
- color: "#fff",
- fontSize: 28,
- fontWeight: 500,
- fontFamily: "Microsoft YaHei",
- },
- top: "20",
- left: "220",
- },
- textStyle: {
- color: "#fff",
- },
- tooltip: {
- show: false,
- trigger: "axis",
- formatter: function (params) {
- var tip =
- params[0].axisValue +
- "<br/>" +
- params[0].marker +
- params[0].data[1] +
- ":" +
- params[0].data[2] +
- "个," +
- params[0].data[3] +
- "亿元" +
- "<br/>" +
- params[1].marker +
- params[1].data[1] +
- ":" +
- params[1].data[2] +
- "个," +
- params[1].data[3] +
- "亿元";
- return tip;
- },
- textStyle: {
- color: "#ffffff", // 文字的颜色
- fontSize: "20", // 文字字体大小
- fontFamily: "Microsoft YaHei",
- },
- axisPointer: {
- // lineStyle: {
- // type: 'dashed',
- // width: 2,
- // color: 'rgba(255,255,255,0.6)'
- // },
- animation: false,
- },
- },
- grid: {
- top: "0%",
- right: "5%",
- left: "15%",
- bottom: "-10%",
- },
- yAxis: {
- data: ["备案", "特别监管"],
- splitLine: {
- show: false,
- lineStyle: {
- color: "#68b4dd66",
- type: "dashed",
- },
- },
- axisLine: {
- show: false,
- },
- axisLabel: {
- show: false,
- formatter: "{value}",
- textStyle: {
- color: "#fff",
- fontSize: 20,
- padding: [0, -10, 0, 0],
- fontFamily: "Microsoft YaHei",
- },
- },
- nameTextStyle: {
- color: "#ebf8ac",
- fontSize: 16,
- fontFamily: "Microsoft YaHei",
- },
- },
- xAxis: {
- data: ["项目储备", "项目立项", "可研论证", "投资决策"],
- axisLine: {
- show: true, //隐藏X轴轴线
- lineStyle: {
- color: "red",
- width: 1,
- },
- },
- axisTick: {
- show: false, //隐藏X轴刻度
- },
- axisLabel: {
- show: true,
- textStyle: {
- color: "#fff", //X轴文字颜色
- fontSize: 20,
- padding: [-80, 0, 0, 0],
- fontFamily: "Microsoft YaHei",
- },
- },
- },
- series: [
- {
- name: "特别监管",
- type: "scatter",
- symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
- symbolSize: function (data) {
- return Math.sqrt(data[2]) * 5;
- },
- // label: {
- // emphasis: {
- // show: true,
- // formatter: function (param) {
- // return param.data[2];
- // },
- // position: 'top'
- // }
- // },
- itemStyle: {
- normal: {
- color: "#69c0ff",
- },
- },
- // data: left13[0]
- },
- {
- name: "备案",
- type: "scatter",
- symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
- symbolSize: function (data) {
- return Math.sqrt(data[2]) * 5;
- },
- // label: {
- // emphasis: {
- // show: true,
- // formatter: function (param) {
- // return param.data[2];
- // },
- // position: 'top'
- // }
- // },
- itemStyle: {
- normal: {
- color: "#957DFF",
- },
- },
- // data: left13[1]
- },
- ],
- };
- //轮播
- // tools.loopShowTooltip(leftEcharts1, option, {
- // interval: 2000,
- // loopSeries: true,
- // });
- //注册
- that.leftEcharts8.setOption(option);
- },
- chinaEchartsFun () {
- let that = this
- this.geoCoordMap = []
- /*获取地图数据*/
- this.shanxiMap = echarts.init(this.$refs["shanxi"]);
- // echarts.registerMap('china', china)
- echarts.registerMap("china", shanxi);
- // var mapFeatures = echarts.getMap('china').geoJson.features
- // mapFeatures.forEach(v => {
- // // 地区名称
- // var name = v.properties.name
- // // 地区经纬度
- // this.geoCoordMap[name] = v.properties.cp
- // data.push({ name: v.properties.name, value: v.properties.cp[0], value2: v.properties.cp[1] })
- // })
- // var data = [
- // { "name": "新疆", value: 29780 },
- // { "name": "西藏", value: 2186 },
- // { "name": "内蒙古", value: 1135 },
- // { "name": "青海", value: 29780 },
- // { "name": "四川", value: 2568 },
- // { "name": "黑龙江", value: 29780 },
- // { "name": "甘肃", value: 6959 },
- // { "name": "云南", value: 5632 },
- // { "name": "广西", value: 6707 },
- // { "name": "湖南", value: 29780 },
- // { "name": "陕西", value: 1894 },
- // { "name": "广东", value: 15769 },
- // { "name": "吉林", value: 8259 },
- // { "name": "河北", value: 5741 },
- // { "name": "湖北", value: 3030 },
- // { "name": "贵州", value: 4542 },
- // { "name": "山东", value: 19780 },
- // { "name": "江西", value: 3157 },
- // { "name": "河南", value: 6690 },
- // { "name": "辽宁", value: 8678 },
- // { "name": "山西", value: 5303 },
- // { "name": "安徽", value: 29780 },
- // { "name": "福建", value: 10259 },
- // { "name": "浙江", value: 3016 },
- // { "name": "江苏", value: 3202 },
- // { "name": "重庆", value: 4540 },
- // { "name": "宁夏", value: 19780 },
- // { "name": "海南", value: 8626 },
- // { "name": "台湾", value: 4361 },
- // { "name": "北京", value: 20000 },
- // { "name": "天津", value: 4080 },
- // { "name": "上海", value: 19780 },
- // { "name": "香港", value: 6991 },
- // { "name": "澳门", value: 13873 },
- // { "name": "南海诸岛", value: 0 }
- // ];
- // var geoCoordMap = {
- // "新疆": [86.9023, 41.148],
- // "西藏": [87.8695, 31.6846],
- // "内蒙古": [110.5977, 41.3408],
- // "青海": [95.2402, 35.4199],
- // "四川": [102.9199, 30.1904],
- // "黑龙江": [128.1445, 46.7156],
- // "甘肃": [102.7129, 38.166],
- // "云南": [101.0652, 24.6807],
- // "广西": [108.7813, 23.6426],
- // "湖南": [111.5332, 27.3779],
- // "陕西": [108.5996, 33.7396],
- // "广东": [113.8668, 22.8076],
- // "吉林": [126.1746, 43.5938],
- // "河北": [115.4004, 38.1688],
- // "湖北": [112.2363, 30.8572],
- // "贵州": [106.6113, 26.6385],
- // "山东": [118.2402, 36.2307],
- // "江西": [115.7156, 27.99],
- // "河南": [113.0668, 33.8818],
- // "辽宁": [123.0438, 41.0889],
- // "山西": [112.44, 37.73],
- // "安徽": [117.2461, 31.0361],
- // "福建": [118.3008, 25.9277],
- // "浙江": [120.498, 29.0918],
- // "江苏": [119.8586, 32.915],
- // "重庆": [107.7539, 29.8904],
- // "宁夏": [105.9961, 37.1096],
- // "海南": [109.9512, 19.2041],
- // "台湾": [120.8254, 23.5986],
- // "北京": [116.4551, 40.2539],
- // "天津": [117.4219, 39.4189],
- // "上海": [121.4648, 31.2891],
- // "香港": [114.6178, 22.3242],
- // "澳门": [113.5547, 21.6484],
- // '南海诸岛': [128.8254, 21.5986]
- // };
- var data = [
- { name: "大同市", value: 6035, value2: 28 },
- { name: "朔州市", value: 3361, value2: 13 },
- { name: "忻州市", value: 7335, value2: 25 },
- { name: "吕梁市", value: 10904, value2: 45 },
- { name: "太原市", value: 25167, value2: 113 },
- { name: "阳泉市", value: 2512, value2: 28 },
- { name: "晋中市", value: 14857, value2: 52 },
- { name: "临汾市", value: 13055, value2: 30 },
- { name: "长治市", value: 10300, value2: 23 },
- { name: "运城市", value: 4106, value2: 23 },
- { name: "晋城市", value: 4543, value2: 31 },
- ];
- var geoCoordMap = {
- 太原市: [112.53, 37.87],
- 大同市: [113.3, 40.12],
- 阳泉市: [113.57, 37.85],
- 长治市: [113.08, 36.18],
- 晋城市: [112.83, 35.52],
- 朔州市: [112.43, 39.33],
- 晋中市: [112.94, 37.4],
- 运城市: [110.97, 35.03],
- 忻州市: [112.53, 38.72],
- 临汾市: [111.5, 36.08],
- 吕梁市: [111.13, 37.52],
- };
- var convertData = function (data) {
- var res = [];
- for (var i = 0; i < data.length; i++) {
- var geoCoord = geoCoordMap[data[i].name];
- if (geoCoord) {
- res.push({
- name: data[i].name,
- value: geoCoord.concat(data[i].value, data[i].value2),
- });
- }
- }
- return res;
- };
- var convertedData = [
- convertData(data),
- convertData(
- data
- .sort(function (a, b) {
- return b.value - a.value;
- })
- .slice(0, 6)
- ),
- ];
- data.sort(function (a, b) {
- return a.value - b.value;
- });
- option = {
- backgroundColor: '#404a5900',
- animation: true,
- animationDuration: 1000,
- animationEasing: "cubicInOut",
- animationDurationUpdate: 1000,
- animationEasingUpdate: "cubicInOut",
- geo: {
- map: "china",
- center: [112.53, 37.67],
- zoom: 4.5,
- label: {
- emphasis: {
- show: false,
- },
- },
- roam: false,
- itemStyle: {
- normal: {
- borderColor: '#7fb3ff',
- borderWidth: 3,
- areaColor: {
- type: 'radial',
- x: 0.5,
- y: 0.5,
- r: 0.8,
- colorStops: [{
- offset: 0,
- color: '#468ff8' // 0% 处的颜色
- }, {
- offset: 1,
- color: '#0a2c6d' // 100% 处的颜色
- }],
- globalCoord: false // 缺省为 false
- },
- // shadowColor: 'rgba(128, 217, 248, 1)',
- shadowColor: '#468ff8',
- shadowOffsetX: -2,
- shadowOffsetY: 2,
- shadowBlur: 20
- },
- emphasis: {
- areaColor: {
- colorStops: [{
- offset: 0,
- color: '#3844aa' // 0% 处的颜色
- }, {
- offset: 1,
- color: '#7284fc' // 100% 处的颜色
- }],
- },
- borderColor: '#b3baff',
- borderWidth: 5
- }
- },
- tooltip: {
- trigger: "item",
- className: "custom-tooltip-box",
- confine: true, // 不超出当前表
- formatter: (params, ticket, callback) => {
- // 清空所有轮播
- for (var k in geoCoordMap) {
- that.shanxiMap.dispatchAction({
- // type: 'geoUnSelect',
- type: 'downplay',
- name: k,
- geoIndex: 0
- })
- that.shanxiMap.dispatchAction({
- // type: 'geoUnSelect',
- type: 'downplay',
- name: k,
- seriesName: params.seriesName
- })
- that.shanxiMap.dispatchAction({
- // type: 'geoUnSelect',
- type: 'downplay',
- name: k,
- seriesName: 'series\u00001'
- })
- }
- that.shanxiMap.dispatchAction({
- // type: 'geoSelect',
- type: 'highlight',
- name: params.name,
- geoIndex: 0
- })
- that.shanxiMap.dispatchAction({
- // type: 'geoSelect',
- type: 'highlight',
- name: params.name,
- seriesName: params.seriesName
- })
- that.shanxiMap.dispatchAction({
- // type: 'geoSelect',
- type: 'highlight',
- name: params.name,
- seriesName: 'series\u00001'
- })
- return `<div class="bgTooltip" style="background: url('../img/shanxi/${params.name}.png') no-repeat center center;background-size: 100% 100%;font-size:36px">
- <div class="flex items-center">
- <img src="./img/yellowArrow.png" style="width: 12px;height: 22px;margin-right:10px" alt=""><span class="fb">${params.name}</span>
- </div>
- <div class="blueIcon flex items-center">项目数量:<span class="fb" style="color:#68BDFF;">${params.value[3]}<span style="font-size:20px" class="fn">个</span></span></div>
- <div class="blueIcon flex items-center">投资总额:<span class="fb" style="color:#68BDFF">${params.value[2]}<span style="font-size:20px" class="fn">亿</span></span></div>
- </div>`
- },
- },
- regions: [
- {
- name: "太原市",
- value: 2000,
- itemStyle: {
- emphasis: {
- borderColor: "#ffe036",
- borderWidth: 5,
- areaColor: {
- type: "radial",
- x: 0.5,
- y: 0.5,
- r: 0.8,
- colorStops: [
- {
- offset: 0,
- color: "#ffe036", // 0% 处的颜色
- },
- {
- offset: 1,
- color: "#7c732a", // 100% 处的颜色
- },
- ],
- globalCoord: false, // 缺省为 false
- },
- },
- },
- },
- {
- name: "南海诸岛",
- itemStyle: {
- // 隐藏地图
- normal: {
- opacity: 0, // 为 0 时不绘制该图形
- },
- },
- label: {
- show: false, // 隐藏文字
- },
- },
- ],
- },
- tooltip: {
- trigger: "item",
- className: "custom-tooltip-box",
- confine: true, // 不超出当前表
- },
- xAxis: {
- type: "value",
- scale: true,
- position: "top",
- boundaryGap: false,
- splitLine: {
- show: false,
- },
- axisLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- margin: 2,
- textStyle: {
- color: "#aaa",
- },
- },
- },
- yAxis: {
- type: "category",
- nameGap: 16,
- axisLine: {
- show: false,
- lineStyle: {
- color: "#ddd",
- },
- },
- axisTick: {
- show: false,
- lineStyle: {
- color: "#ddd",
- },
- },
- axisLabel: {
- interval: 0,
- textStyle: {
- color: "#ddd",
- },
- },
- data: categoryData,
- },
- series: [
- {
- type: 'effectScatter',
- colorBy: 'data',
- coordinateSystem: 'geo',
- data: convertedData[0],
- symbolSize: function (val) {
- return Math.max(val[2] / 500, 8);
- },
- showEffectOn: "emphasis",
- rippleEffect: {
- brushType: "stroke",
- color: '#58F7DF'
- },
- hoverAnimation: true,
- label: {
- normal: {
- formatter: "{b}",
- position: "right",
- show: true,
- fontSize: "30",
- color: "#fff",
- },
- },
- itemStyle: {
- normal: {
- color: "#ffc809",
- shadowBlur: 50,
- shadowColor: "#ffc809",
- },
- emphasis: {
- color: '#58F7DF',
- shadowBlur: 50,
- shadowColor: '#58F7DF',
- },
- },
- zlevel: 99
- },
- {
- type: 'effectScatter',
- colorBy: 'data',
- coordinateSystem: 'geo',
- data: [
- {
- "name": "太原市",
- "value": [
- 112.53,
- 37.87,
- 25167
- ]
- }
- ],
- symbolSize: function (val) {
- return Math.max(val[2] / 500, 8);
- },
- showEffectOn: "emphasis",
- rippleEffect: {
- brushType: "stroke",
- color: '#DF62F2'
- },
- hoverAnimation: true,
- label: {
- normal: {
- formatter: "{b}",
- position: "right",
- show: true,
- fontSize: "30",
- color: "#fff",
- },
- },
- itemStyle: {
- normal: {
- color: "#ffc809",
- shadowBlur: 50,
- shadowColor: "#ffc809",
- },
- emphasis: {
- color: '#DF62F2',
- shadowBlur: 50,
- shadowColor: '#DF62F2',
- },
- },
- zlevel: 999
- }
- ]
- };
- var categoryData = [];
- var barData = [];
- var sum = 0;
- for (var i = 0; i < data.length; i++) {
- categoryData.push(data[i].name);
- barData.push(data[i].value);
- sum += data[i].value;
- }
- // this.shanxiMap.on('click', function (params) {
- // if (params.name == '山西') {
- // that.shanxiMap.dispose()
- // that.centerShow = true
- // setTimeout(() => {
- // })
- // }
- // })
- tools.loopShowTooltip(this.shanxiMap, option, {
- interval: 2000,
- loopSeries: false,
- seriesIndex: 0
- });
- this.shanxiMap.setOption(option);
- },
- leftEcharts9Fun () {
- let that = this;
- this.leftEcharts9 = echarts.init(this.$refs["leftEcharts9"]);
- // var ROOT_PATH = 'https://echarts.apache.org/examples';
- let option = {
- backgroundColor: '#00000000',
- globe: {
- globeRadius: 55,
- baseTexture: './img/3D/world1.jpg',
- heightTexture: './img/3D/world1.jpg',
- displacementScale: 0.04,
- shading: 'realistic',
- // environment: './img/3D/world2.jpg',
- realisticMaterial: {
- roughness: 0.9
- },
- postEffect: {
- enable: true
- },
- light: {
- main: {
- intensity: 3,
- shadow: true
- },
- }
- }
- };
- that.leftEcharts9.setOption(option);
- },
- leftEcharts10Fun () {
- let that = this;
- this.leftEcharts10 = echarts.init(this.$refs["leftEcharts10"]);
- option = {
- grid: {
- top: 45,
- right: 0,
- left: 80,
- bottom: 80,
- },
- tooltip: {
- show: true,
- trigger: "axis",
- formatter: data => {
- return `${data[0].name}<br /><span style="display:inline-block;border-radius:50%; width:20px;height:20px;background-color:${data[0].color}"></span> ${data[0].seriesName}:${that.numFormat(data[0].value)}亿<br/><span style="display:inline-block;border-radius:50%; width:20px;height:20px;background-color:${data[1].color.colorStops[0].color}"></span> ${data[1].seriesName}:${that.numFormat(data[1].value)}亿`
- },
- axisPointer: {
- // 坐标轴指示器,坐标轴触发有效
- type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
- },
- backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
- borderColor: "rgba(50,50,50,0.7)",
- textStyle: {
- color: "#fff",
- fontStyle: "normal", // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体)
- fontWeight: "normal", // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
- fontSize: "28", // 文字字体大小
- },
- },
- xAxis: {
- data: commonCompany,
- axisTick: {
- show: false,
- },
- // x轴的字体颜色
- axisLabel: {
- rotate: 40,
- textStyle: {
- color: "white",
- fontSize: '20',
- fontFamily: 'Microsoft YaHei'
- },
- },
- //y轴线的颜色以及宽度
- axisLine: {
- show: true,
- lineStyle: {
- color: "#1E5389",
- width: 1,
- type: "solid",
- },
- },
- },
- yAxis: {
- name: '亿',
- axisTick: {
- lineStyle: {
- color: "#18416F",
- },
- },
- // y轴的字体颜色
- axisLabel: {
- textStyle: {
- color: "white",
- fontSize: '20',
- fontFamily: 'Microsoft YaHei'
- },
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: "#68b4dd66",
- width: 1,
- type: "dashed",
- },
- },
- //y轴线的颜色以及宽度
- axisLine: {
- show: true,
- lineStyle: {
- color: "#1E5389",
- width: 1,
- type: "solid",
- },
- },
- nameTextStyle: {
- color: '#fff',
- fontSize: 20,
- fontFamily: 'Microsoft YaHei'
- },
- },
- series: [
- {
- name: "已用额度",
- type: "pictorialBar",
- symbol: 'fixed',
- symbolSize: [20, 5],
- symbolMargin: 2,
- symbolRepeat: 'repeat',
- data: [26, 36, 16, 46, 26, 36, 16, 46, 26, 36, 16, 46, 26, 36, 16, 46, 26, 36],
- showBackground: false,
- barWidth: "15",
- itemStyle: {
- color: '#40A9FF'
- },
- zlevel: 1
- },
- {
- name: "总额度",
- type: "pictorialBar",
- symbol: 'fixed',
- symbolSize: [30, 5],
- symbolMargin: 2,
- symbolRepeat: 'repeat',
- data: [390, 390, 390, 200, 390, 390, 390, 200, 390, 390, 390, 200, 390, 390, 390, 200, 390, 200],
- barGap: '-130%',
- barWidth: "25",
- itemStyle: {
- color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
- {
- offset: 0,
- color: '#b9b7c060',
- },
- {
- offset: 1,
- color: '#b9b7c060',
- },
- ]),
- },
- },
- ]
- };
- //轮播
- tools.loopShowTooltip(that.leftEcharts10, option, {
- interval: 2000,
- loopSeries: true,
- });
- //注册
- that.leftEcharts10.setOption(option);
- },
- // 重点项目两线指标轮播方法
- scrollChange (index) {
- if (index == 18) {
- this.count = -1
- } else {
- this.count = index
- }
- if (this.count > 12 && this.count != 18) {
- this.countType = 1
- } else {
- this.countType = 0
- }
- for (var i = 0; i < this.list.length; i++) {
- if (i == 2) {
- this.list[i].classList.add('light')
- } else {
- this.list[i].classList.remove('light')
- }
- }
- this.leftEcharts11 ? this.leftEcharts11.dispose() : ''
- this.leftEcharts11Fun()
- },
- leftEcharts11Fun () {
- let that = this;
- this.leftEcharts11 = echarts.init(this.$refs["leftEcharts11"]);
- option = {
- tooltip: {
- trigger: 'axis',
- formatter: '指标:' + '{c0}' + '<br/>' + '发展线:' + '{c1}' + '<br/>' + '生存线:' + '{c2}', //+ '<br/>'+ '{a1}:{c1}' + '%',
- axisPointer: {
- type: 'shadow',
- },
- },
- grid: {
- top: '10%',
- right: '5%',
- left: '15%',
- bottom: '20%',
- },
- xAxis: {
- data: ['总投资收益率', '销售利润率', '成本费用利润率', '总资产周转率', '财务内部收益率'],
- // data: left15[this.countType],
- axisLine: {
- show: true, //隐藏X轴轴线
- lineStyle: {
- color: '#005094',
- width: 1,
- },
- },
- axisTick: {
- show: true, //隐藏X轴刻度
- },
- axisLabel: {
- show: true,
- rotate: 30,
- textStyle: {
- color: '#fff', //X轴文字颜色
- fontSize: 20,
- fontFamily: 'Microsoft YaHei'
- },
- },
- },
- yAxis: [
- {
- type: 'value',
- splitLine: {
- show: true,
- lineStyle: {
- color: '#68b4dd66',
- type: 'dashed',
- },
- },
- axisLine: {
- show: false
- },
- axisLabel: {
- show: true,
- formatter: '{value}%',
- textStyle: {
- color: '#fff',
- fontSize: 20,
- fontFamily: 'Microsoft YaHei'
- },
- },
- nameTextStyle: {
- color: '#ebf8ac',
- fontSize: 16,
- fontFamily: 'Microsoft YaHei'
- },
- },
- ],
- series: [
- {
- name: '实际值',
- type: 'bar',
- barWidth: 20,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: '#69c0ff',
- },
- {
- offset: 1,
- color: '#082550',
- },
- ]),
- },
- },
- data: [70, 52, 33, 41, 52],
- // data: this.storageRecordConfig.data.length == 0 ? [] : this.storageRecordConfig.data.length == 1 ? left12[this.count][2] : left12[this.count + 1][2]
- },
- {
- name: '',
- type: 'line',
- barWidth: 15,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: '#69c0ff',
- },
- {
- offset: 1,
- color: 'green',
- },
- ]),
- },
- },
- data: [20, 30, 15, 28, 36],
- // data: this.storageRecordConfig.data.length == 0 ? [] : this.storageRecordConfig.data.length == 1 ? left12[this.count][1] : left12[this.count + 1][1]
- },
- {
- name: '',
- type: 'line',
- barWidth: 15,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: '#69c0ff',
- },
- {
- offset: 1,
- color: 'yellow',
- },
- ]),
- },
- },
- data: [15, 22, 17, 33, 14],
- // data: this.storageRecordConfig.data.length == 0 ? [] : this.storageRecordConfig.data.length == 1 ? left12[this.count][0] : left12[this.count + 1][0]
- },
- ],
- }
- //轮播
- tools.loopShowTooltip(that.leftEcharts11, option, {
- interval: 2000,
- loopSeries: true,
- });
- //注册
- that.leftEcharts11.setOption(option);
- },
- },
- });
|