1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211 |
- let app = new Vue({
- el: "#app",
- data() {
- return {
- leftEcharts1: "",
- leftEcharts2: "",
- leftEcharts3: "",
- leftEcharts4: "",
- leftEcharts5: "",
- leftEcharts6: "",
- leftEcharts7: "",
- leftEcharts8: "",
- shanxiMap: "", // 山西地图
- industryProportion: 1, // 主辅业占比轮播
- industryLayout: 0, //产业布局分析
- time1: "", // 4秒定时器
- time2: "", // 针对投前产业布局分析的定时器
- meansList: [
- {
- label: "初步设计",
- value: "106",
- },
- {
- label: "详细设计",
- value: "103",
- },
- {
- label: "施工",
- value: "62",
- },
- {
- label: "完工",
- value: "35",
- },
- {
- label: "验收",
- value: "42",
- },
- {
- label: "结算",
- value: "33",
- },
- ],
- stockRightList: [
- {
- label: "前期准备",
- value: "66",
- },
- {
- label: "工商变更登记",
- value: "77",
- },
- ],
- 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",
- },
- ],
- },
- riskData: {
- x: [
- { name: "大地控股", value: [14, 13, 6, 15, 13, 4] },
- { name: "云时代", value: [15, 12, 12, 10, 24, 6] },
- { name: "华舰体育", value: [14, 13, 6, 15, 13, 4] },
- { name: "神农科技", value: [14, 13, 6, 15, 13, 4] },
- { name: "山西焦煤", value: [14, 13, 6, 15, 13, 4] },
- { name: "晋能控股", value: [14, 13, 6, 15, 13, 4] },
- { name: "华阳新材", value: [14, 13, 6, 15, 13, 4] },
- { name: "潞安化工", value: [14, 13, 6, 15, 13, 4] },
- { name: "华新燃气", value: [14, 13, 6, 15, 13, 4] },
- { name: "太重集团", value: [14, 13, 6, 15, 13, 4] },
- { name: "国际能源", value: [14, 13, 6, 15, 13, 4] },
- { name: "华远陆港", value: [14, 13, 6, 15, 13, 4] },
- { name: "水控集团", value: [14, 13, 6, 15, 13, 4] },
- { name: "文旅集团", value: [14, 13, 6, 15, 13, 4] },
- { name: "交控集团", value: [14, 13, 6, 15, 13, 4] },
- { name: "航产集团", value: [14, 13, 6, 15, 13, 4] },
- { name: "山西建投", value: [14, 13, 6, 15, 13, 4] },
- { name: "汾酒集团", value: [14, 13, 6, 15, 13, 4] },
- ],
- y1: [
- 120, 110, 200, 220, 123, 345, 323, 123, 233, 234, 123, 143, 120, 110,
- 20, 220, 123, 345,
- ],
- y2: [
- 120, 110, 210, 220, 123, 345, 323, 123, 233, 234, 123, 143, 120, 110,
- 20, 220, 123, 345,
- ],
- y3: [
- 120, 110, 230, 220, 123, 345, 323, 123, 233, 234, 123, 143, 120, 110,
- 20, 220, 123, 345,
- ],
- },
- inner: 0,
- innerDeg: 0,
- timer: null,
- witchs: 0,
- topIndex: 0,
- echartR1Fd1: true,
- echartR2Fd2: true,
- r3Index: 0,
- riskData1: {
- x: [
- "大地控股",
- "云时代",
- "华舰体育",
- "神农科技",
- "山西焦煤",
- "晋能控股",
- "华阳新材",
- "潞安化工",
- "华新燃气",
- "太重集团",
- "国际能源",
- "华远陆港",
- "水控集团",
- "文旅集团",
- "交控集团",
- "航产集团",
- "山西建投",
- "汾酒集团",
- ],
- y1: [
- 100, 45, 67, 110, 108, 34, 100, 45, 67, 110, 108, 34, 100, 45, 67,
- 110, 108, 34,
- ],
- y2: [
- 100, 45, 67, 110, 108, 34, 100, 45, 67, 110, 108, 34, 100, 45, 67,
- 110, 108, 34,
- ],
- y3: [
- 100, 45, 67, 110, 108, 34, 100, 45, 67, 110, 108, 34, 100, 45, 67,
- 110, 108, 34,
- ],
- y4: [
- 100, 45, 67, 110, 108, 34, 100, 45, 67, 110, 108, 34, 100, 45, 67,
- 110, 108, 34,
- ],
- y5: [
- 100, 45, 67, 110, 108, 34, 100, 45, 67, 110, 108, 34, 100, 45, 67,
- 110, 108, 34,
- ],
- },
- };
- },
- created() {},
- beforeDestroy() {
- clearInterval(this.timer);
- },
- 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.chinaEchartsFun();
- this.initChartR1();
- this.initChartR2();
- this.initChartR4();
- });
- },
- methods: {
- initChartR1() {
- let that = this;
- let sumA = 42;
- let right5 = [
- [
- ["山西焦煤", 43.8],
- ["晋能控股", 49.8],
- ["华阳新材", 46],
- ["潞安化工", 53.8],
- ["华新燃气", 59],
- ["太重集团", 57],
- ["国际能源", 44],
- ["华远陆港", 46],
- ["万家寨水控", 57],
- ["文旅集团", 62.8],
- ["山西交控", 55.8],
- ["航产集团", 44.2],
- ["山西建投", 49.6],
- ["汾酒集团", 66.65],
- ["大地控股", 45.6],
- ["云时代", 63.9],
- ["华舰体育", 70.6],
- ["神农科技", 45.6],
- ],
- [
- ["山西焦煤", 25.8],
- ["晋能控股", 25.8],
- ["华阳新材", 38],
- ["潞安化工", 37.8],
- ["华新燃气", 28],
- ["太重集团", 38],
- ["国际能源", 28],
- ["华远陆港", 38],
- ["万家寨水控", 35.8],
- ["文旅集团", 22.8],
- ["山西交控", 25.8],
- ["航产集团", 24.2],
- ["山西建投", 23.6],
- ["汾酒集团", 26.65],
- ["大地控股", 25.6],
- ["云时代", 30.9],
- ["华舰体育", 38.6],
- ["神农科技", 35.6],
- ],
- [
- ["山西焦煤", 15.8],
- ["晋能控股", 15.8],
- ["华阳新材", 8],
- ["潞安化工", 17.8],
- ["华新燃气", 18],
- ["太重集团", 18],
- ["国际能源", 8],
- ["华远陆港", 5.8],
- ["万家寨水控", 5.8],
- ["文旅集团", 2.8],
- ["山西交控", 5.8],
- ["航产集团", 12.2],
- ["山西建投", 13.6],
- ["汾酒集团", 16.65],
- ["大地控股", 15.6],
- ["云时代", 13.9],
- ["华舰体育", 18.6],
- ["神农科技", 15.6],
- ],
- ];
- // 所有在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) => {
- console.log(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: right5[0].map((item) => item[0]),
- 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"]);
- that.right1Chart.on("showTip", (params) => {
- that.r3Index = params.dataIndex;
- that.initChartR3();
- console.log(that.r3Index);
- // 如果是7或者15并且满足防抖则切换
- if (
- (params.dataIndex == 5 || params.dataIndex == 11) &&
- that.echartR1Fd1
- ) {
- that.echartR1Fd1 = false;
- setTimeout(() => {
- option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6;
- option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6;
- that.right1Chart.setOption(option);
- // 防止勿刷新做的防抖
- setTimeout(() => {
- that.echartR1Fd1 = true;
- }, 2000);
- }, 1900);
- // 如果是17表示到了最后一个,那么重新来一遍
- } else if (params.dataIndex == 17 && that.echartR1Fd1) {
- that.echartR1Fd1 = false;
- setTimeout(() => {
- option.dataZoom[0].endValue = 0;
- option.dataZoom[0].startValue = 5;
- that.right1Chart.setOption(option);
- // 防止勿刷新做的防抖
- setTimeout(() => {
- that.echartR1Fd1 = true;
- }, 2000);
- }, 1900);
- }
- });
- 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
- },
- ],
- 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: {
- top: 10,
- right: 10,
- textStyle: {
- fontSize: 20,
- color: "#fff",
- fontFamily: "Microsoft YaHei",
- },
- itemStyle: {
- borderCap: "round",
- },
- },
- tooltip: {
- trigger: "item",
- show: true,
- position: "top",
- 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", // 文字字体大小
- },
- formatter: function (p) {
- console.log(p);
- return p.name + "<br/>" + p.marker + p.seriesName + ": " + p.value;
- },
- },
- grid: {
- left: "3%",
- right: "4%",
- bottom: "3%",
- containLabel: true,
- },
- xAxis: [
- {
- type: "category",
- data: that.riskData.x.map((item) => item.name),
- 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: that.riskData.y1,
- },
- {
- name: "中风险",
- type: "bar",
- barWidth: 14,
- stack: "Ad",
- itemStyle: {
- barBorderRadius: [15, 15, 15, 15],
- },
- emphasis: {
- focus: "series",
- },
- data: that.riskData.y2,
- },
- {
- name: "高风险",
- type: "bar",
- barWidth: 14,
- stack: "Ad",
- itemStyle: {
- barBorderRadius: [15, 15, 15, 15],
- },
- emphasis: {
- focus: "series",
- },
- data: that.riskData.y3,
- },
- ],
- };
- that.right1Chart.setOption(option);
- tools.loopShowTooltip(that.right1Chart, option, {
- interval: 2000,
- loopSeries: true,
- });
- },
- 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",
- label: {
- show: true,
- formatter: function (params) {
- return params.value;
- },
- fontSize: 24,
- color: "#68BDFF",
- },
- data: [
- {
- value: that.riskData.x[that.r3Index].value,
- 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"]);
- that.right4Chart.on("showTip", (params) => {
- // 如果是7或者15并且满足防抖则切换
- if (
- (params.dataIndex == 5 || params.dataIndex == 11) &&
- that.echartR2Fd2
- ) {
- that.echartR2Fd2 = false;
- setTimeout(() => {
- option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6;
- option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6;
- that.right4Chart.setOption(option);
- // 防止勿刷新做的防抖
- setTimeout(() => {
- that.echartR2Fd2 = true;
- }, 2000);
- }, 1900);
- // 如果是17表示到了最后一个,那么重新来一遍
- } else if (params.dataIndex == 17 && that.echartR2Fd2) {
- that.echartR2Fd2 = false;
- setTimeout(() => {
- option.dataZoom[0].endValue = 0;
- option.dataZoom[0].startValue = 5;
- that.right4Chart.setOption(option);
- // 防止勿刷新做的防抖
- setTimeout(() => {
- that.echartR2Fd2 = true;
- }, 2000);
- }, 1900);
- }
- });
- let option = {
- 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, //鼠标滚轮触发滚动
- },
- ],
- title: {
- text: "企业后评价执行情况",
- left: "center",
- textStyle: {
- color: "#fff",
- fontSize: 32,
- },
- },
- tooltip: {
- trigger: "item",
- show: true,
- position: "top",
- 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", // 文字字体大小
- },
- formatter: function (p) {
- console.log(p);
- return p.name + "<br/>" + p.marker + p.seriesName + ": " + p.value;
- },
- },
- legend: {
- show: true,
- textStyle: {
- fontSize: 24,
- color: "rgba(255, 255, 255, .6)",
- },
- inactiveColor: "#fff",
- itemHeight: 20,
- top: "15%",
- backgroundColor: "transparent",
- data: [
- {
- name: "应首评项目数",
- icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAWdJREFUOE+N0k8og3EYB/Dvs8P8CSlTxJGD8u+yTYmNm0gJQznIQRxMoV2cXWSKCznIQdk7SkmOEomNg41y4EjURkLZFI/ed3vX+5v82nt4357n9/s8Pe/v9xCST6+fzVHGKAMDAKqT6WsCNi2ElS0Xfak5Ul+tfi77YewBqNcLpH0vTYSOAxc9kFo5wghINus2lJMPOzl8PE6EpX8qC2lmuMmp8CmABn3FVgJ4bIloLggEnwRzRg6F4wSY9fR2J1CUnYieY0DPrgDiUvASA7pF8PGnJXsp4LEC3wx4L4DAY1pLLQq7GVjM5KcJmKC2fc76fNeOtU6GmBDOzYMt04sLmQjt2sUZRyMCjAEYBKNKyxNuAGwUA8vCaBhbcSrMxviwj1JFU7Nk3NC49iqAk+FCObAu3AngfLJCDmpmjgVwNdskB5UjPgHcrvbLQXmXVwD3O1NyYGmeFkD0aF4OCmqHBPAWXhfAL4WqeuKVsFKCAAAAAElFTkSuQmCC",
- },
- {
- name: "已完成首评项目数",
- icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAXFJREFUOE+V0kFLAkEUB/D/G9eW3UN1sFPYNaJAu2R0Coog8mq0fQH1kEVBhz5Ah6CoLhrdE/LqKQo6VZ7SKCKChKRTBRmhbq47oabsZC22h1nem/k93jCP8P0F+E2HQ1dD4NAAGqqn+TUI8YpciCVo8LOaoeoSKOR6GTOSxOFtFLD+OSFtmpI/obqfqFqZ6Wrqr8NNyJHJK4aPtNLDAue0+1vlnzkiHqG5YvYcwGhj08MUhJyuWhgrvyBjFq3uogp0AB2NbFR2o5sctfCNVxDWc1ag/xPQR0tLXqYg6HTBBMd++RXplpZK2Qg4dtq5NAiLNM3v5a6ilALBY4s4rvKKMdLWw4EjU4E0U3s462gwXQ3DMLeJsfpgmCYgsSVTLkSF0bC24r9NcWucHPA1izZnyXpg8vRIAMfjU/ZgLH4ogDNt1h4Mb8YEcLkSsgf9y+sCuNtaswd92qoAHuMb9qBnIiiA55M9e9DpnRfAe/pAAF9gqJXUYWdYUwAAAABJRU5ErkJggg==",
- },
- {
- name: "应再评项目数",
- icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAV5JREFUOE+V0j8oxGEYwPHvo/wMjgyUslAWcTFhMRiEsHLKYDzFKZRBSskgR7mUG29QjpX86QaDwdlwLotiUYpB/gyHPDru9HsPP+c3vL+e530/T8/b+wipb31KrYJ8vAi9QE0qfYqy+vBEsHtKnpM5SS4bC1qW+8amQl26gP0vcPSSQ2fXiFxJsnKhi8PfDtvgsVo0yJZfhwQCP1XOzCn4ZNuvB0BjerO4HNxtn1FsB24vDRZNggRgpdPNXsjL/4wST7AXNEDiv+DxW0slFVDTCvoG8QjcXGS2NKc+hMVsLo0yLFsBzZNnDoHaP9CJWtRn9XDA8WsOHR8PZx+NQhcDqvQhVH3klTMRVu4fWTZGw97Ktl/VHrePyVfRr1myHwhP3xnAM1nkDJbGzw0wOFvpDCa8+waYCTY5g/6esAFCax5n0NI6b4DI7qgzcDeOGSAW9TuD0up+A1zHQwZ4B2JrgI9r4uMDAAAAAElFTkSuQmCC",
- },
- {
- name: "已完成再评项目数",
- icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAWBJREFUOE9jZICC/1e12Rh4uDIY/jNGMjAw6ECFrzAw/l/O8OXbDEbtq79AYowg4v9jS2mGv3+3MDAwGMAMQKMvMDAz+zDKHn/KCDaZm/skHsUwvRcZfr8zZ/z/0CyX4T/DJBwmowozMuQx/n9gdpyBgcECLsNpycAgXAPhvm1hYPgOkoaDEyANPxkYGNjgQjJbGRiYRSDcv28YGJ54I2v4SUDDWwaGJ17IGr5gcZIV1El/GRjetjMwfD+G5qSHpnkM/xknEufp//mM/2+rsDOwCoGCVZ+ApksMv9+ZERtxFxmYmb3BEYeaNHgyGf7/j2FgYNCEil9nYGRcwvDly3SUpIHslP8PzP4j8xkVTsENhaclZAWvLligaBAzOIFfw9ld1igajN2O4tewar49ioawxIP4NbQ0OqNoqKnfi19DXIoHioZFc3bg12Dt6YOi4ej2Lfg1yBn7o2h4dHYjigYAb0t88hVwEBYAAAAASUVORK5CYII=",
- },
- {
- name: "再评达标项目数",
- icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAWBJREFUOE+V0k8og2EcwPHvkzVZLLm6KItEzWlclIPbdhGKcsCJwzZFdtgOK+8OimIXTjgoSrisXByUgz8nE4mmXFwlZmuaPXr3r/eZ9sZ7eN9+v/f5/J6n3/MTFJ9wWFpTFqYFjAFdxfSthF1blo1wWHzpOaG/gppszkIM6C4VqPheW8ATCYkXoVdOW7g0WVyy8ZSdHhFYlF4E0SqV1bTEJwKaPAd6S3/aWmHEU4j2Y/D4pJgLHWQAaykd9ENDfSH6SEJkTQGZ/4LkryO1O2DYDbkcHB7DQ6LiSAua9AlQN67SAQl+4Y3KWtt7vq1Os04JuPm04/rrxcUt4M5fnHE00jXMIBgHOor5eyQ7dd+sK6NhPEpAk9IYL4VEuWh5lowLfKE3BUS1RnMwOZtQwNaqwxwMTp0p4Gizzxz0D+0p4PRg1Bw4B1YUED+ZMwctrnkFPF8tm4OmzgkFvN5tK+AHKZh4TU8krdoAAAAASUVORK5CYII=",
- },
- ],
- },
- grid: {
- top: "30%",
- left: "3%",
- right: "4%",
- bottom: "3%",
- containLabel: true,
- },
- xAxis: {
- data: that.riskData1.x,
- type: "category",
- splitLine: {
- show: false,
- },
- alignTicks: true,
- axisLine: {
- show: true,
- lineStyle: {
- color: "rgba(0, 80, 148, .8)",
- },
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- color: "#fff",
- fontSize: 22,
- rotate: 20,
- },
- },
- yAxis: {
- type: "value",
- splitLine: {
- show: true,
- lineStyle: {
- color: "rgba(104, 180, 221, .2)",
- type: "dashed",
- },
- },
- axisLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- color: "#fff",
- fontSize: 22,
- },
- },
- series: [
- {
- type: "bar",
- name: "应首评项目数",
- barWidth: 4,
- barGap: "600%",
- data: that.riskData1.y1,
- label: {
- show: true,
- position: "top",
- formatter: " ",
- width: 6,
- height: 6,
- borderRadius: 50,
- borderWidth: 6,
- borderColor: "#40A9FF",
- backgroundColor: "#fff",
- },
- itemStyle: {
- color: {
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0,
- color: "#40A9FF", // 0% 处的颜色
- },
- {
- offset: 1,
- color: "#092351", // 100% 处的颜色
- },
- ],
- },
- },
- },
- {
- type: "bar",
- name: "已完成首评项目数",
- barGap: "600%",
- barWidth: 4,
- data: that.riskData1.y2,
- label: {
- show: true,
- position: "top",
- formatter: " ",
- width: 6,
- height: 6,
- borderRadius: 50,
- borderWidth: 6,
- borderColor: "#58F7DF",
- backgroundColor: "#fff",
- },
- itemStyle: {
- color: {
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0,
- color: "#58F7DF", // 0% 处的颜色
- },
- {
- offset: 1,
- color: "#092351", // 100% 处的颜色
- },
- ],
- },
- },
- },
- {
- type: "bar",
- name: "应再评项目数",
- barGap: "600%",
- barWidth: 4,
- data: that.riskData1.y3,
- label: {
- show: true,
- position: "top",
- formatter: " ",
- width: 6,
- height: 6,
- borderRadius: 50,
- borderWidth: 6,
- borderColor: "#B78CFF",
- backgroundColor: "#fff",
- },
- itemStyle: {
- color: {
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0,
- color: "#B78CFF", // 0% 处的颜色
- },
- {
- offset: 1,
- color: "#092351", // 100% 处的颜色
- },
- ],
- },
- },
- },
- {
- type: "bar",
- name: "已完成再评项目数",
- barGap: "600%",
- barWidth: 4,
- data: that.riskData1.y4,
- label: {
- show: true,
- position: "top",
- formatter: " ",
- width: 6,
- height: 6,
- borderRadius: 50,
- borderWidth: 6,
- borderColor: "#FFE036",
- backgroundColor: "#fff",
- },
- itemStyle: {
- color: {
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0,
- color: "#FFE036", // 0% 处的颜色
- },
- {
- offset: 1,
- color: "#092351", // 100% 处的颜色
- },
- ],
- },
- },
- },
- {
- type: "bar",
- name: "再评达标项目数",
- barGap: "600%",
- barWidth: 4,
- data: that.riskData1.y5,
- label: {
- show: true,
- position: "top",
- formatter: " ",
- width: 6,
- height: 6,
- borderRadius: 50,
- borderWidth: 6,
- borderColor: "#7784FF",
- backgroundColor: "#fff",
- },
- itemStyle: {
- color: {
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0,
- color: "#7784FF", // 0% 处的颜色
- },
- {
- offset: 1,
- color: "#092351", // 100% 处的颜色
- },
- ],
- },
- },
- },
- ],
- };
- that.right4Chart.setOption(option);
- tools.loopShowTooltip(that.right4Chart, option, {
- interval: 2000,
- loopSeries: true,
- });
- },
- clickItem(index) {
- console.log(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;
- },
- 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() {
- 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),
- });
- }
- }
- 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: '#404a59',
- 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,
- },
- },
- tooltip: {
- trigger: "item",
- formatter: function (params) {
- console.log(params, "??????????");
- },
- },
- roam: false,
- itemStyle: {
- normal: {
- // borderColor: 'rgba(147, 235, 248, 1)',
- 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,
- },
- },
- 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, // 不超出当前表
- formatter: function (params) {
- console.log(params);
- 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;">26<span style="font-size:20px" class="fn">个</span></span></div>
- <div class="blueIcon flex items-center">投资总额:<span class="fb" style="color:#68BDFF">180<span style="font-size:20px" class="fn">亿</span></span></div>
- </div>`;
- },
- },
- 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",
- coordinateSystem: "geo",
- data: convertedData[0],
- symbolSize: function (val) {
- return Math.max(val[2] / 500, 8);
- },
- showEffectOn: "render",
- rippleEffect: {
- brushType: "stroke",
- },
- hoverAnimation: true,
- label: {
- normal: {
- formatter: "{b}",
- position: "right",
- show: true,
- fontSize: "30",
- color: "#fff",
- },
- },
- itemStyle: {
- normal: {
- color: "#ffc809",
- shadowBlur: 50,
- shadowColor: "#ffc809",
- fontSize: "500",
- },
- },
- zlevel: 1,
- },
- ],
- };
- 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;
- }
- let that = this;
- // 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,
- });
- this.shanxiMap.setOption(option);
- },
- },
- });
|