<script setup> import { $c } from "ayin-color"; const { proxy } = getCtx(); import symbol from "./map/symbol.json" import counter from "./map/map-counter.vue" const state=reactive({ map:{}, colors:{ pin_A:$c.cyl6, pin_B:$c.cbl6, font:$c.cbl3, fontHov:$c.wh, mapBG_A: $c.blA13, mapBG_B: $c.blA18, mapBG_hov_A: $c.cbA10, mapBG_hov_B: $c.blA15, mapBD_A: $c.cbA12, mapBD_B: $c.cbA13, mapGlow: $c.cbl7, visualMap:[$c.fade("cbA13",.7),$c.fade("blA19",.7)], }, chartData:{ alladcode:[], geoJson:{}, dept:[{code:0,name:"liaoningMap"}, ], mapData:[], pointData:[], pinData:[], circleData:[], warningData:[], dangerData:[], sum:0, maxData:1000, minData:0, maxPin:90, minPin:20, layoutCenter:['50%', '53%'], layoutSize:"90%", visualMapPos:{ right:"26.5%", bottom:"5%" } }, chartInstance:"", chartOption:{update:false}, clickData:{ show:false, area:"北京", data:"325", info:"文字信息", x:120, y:120 } }) const {colors,chartData,chartOption}=state; const initChart=()=>{ state.chartData.geoJson.code=0 state.chartData.geoJson.name="liaoningMap" echarts.registerMap("liaoningMap", state.chartData.geoJson); state.chartInstance = echarts.init(proxy.$refs.map); getMapData(); } const getMapData=()=>{ let mapData = [],pointData=[] ,pinData = [], circleData = [],warningData = [],dangerData = [], sum = 0, topIndex=[12,8,6,7,11,14],warnIndex=[13,5],dangerIndex=[3]; state.chartData.geoJson.features.forEach((geo,i) => { if(geo.properties.name){ let value = proxy.randomNumber(1,chartData.maxData/3) let maxValue = proxy.randomNumber(chartData.maxData/2,chartData.maxData) if(geo.properties.center){ if(topIndex.includes(i)){ let pin={ name: geo.properties.name, value: [geo.properties.center[0], geo.properties.center[1], maxValue], cityCode: parseInt(geo.properties.adcode) } pinData.push(pin) pointData.push(pin) }else if(warnIndex.includes(i)){ warningData.push({ name: geo.properties.name, value: [geo.properties.center[0], geo.properties.center[1], 'warning',"区域数据触发异常告警"], cityCode: parseInt(geo.properties.adcode) }) }else if(dangerIndex.includes(i)){ dangerData.push({ name: geo.properties.name, value: [geo.properties.center[0], geo.properties.center[1], 'danger',"区域数据触发危急告警"], cityCode: parseInt(geo.properties.adcode) }) }else{ if(value<100){ value=0 } let circle={ name: geo.properties.name, value: [geo.properties.center[0], geo.properties.center[1], value], cityCode: parseInt(geo.properties.adcode) } pointData.push(circle) circleData.push(circle) } } sum += value } }) state.chartData.mapData=mapData; state.chartData.pointData=pointData; state.chartData.pinData=pinData; state.chartData.circleData=circleData; state.chartData.warningData=warningData; state.chartData.dangerData=dangerData; state.chartData.sum=sum; processOption() } const processOption=(current)=>{ current=state.chartData.dept[0] const {visualMapPos,layoutCenter,layoutSize}=state.chartData let tempOption={ title: { show:false, text: current.name, left: 'center' }, geo:{ type: 'map', map: current.name, roam: true, scaleLimit: { min: .5, max: 3 }, //zoom :1.2, layoutCenter:layoutCenter, layoutSize:layoutSize, zlevel:1, label: { show: true, color:colors.font, fontSize: 12, formatter: p => { return p.name; }, //offset:[0,10], }, itemStyle: { borderColor: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: colors.mapBD_A }, { offset: 1, color: colors.mapBD_B } ], false), borderWidth: 2, shadowColor: colors.mapGlow, shadowOffsetY: 0, shadowBlur: 10, areaColor: { x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: $c.fade(colors.mapBG_A,.5) }, { offset: 1, color: $c.fade(colors.mapBG_B,.5) } ], }, }, select:{ label: { show:true, color:colors.fontHov, fontSize: 14, }, itemStyle: { areaColor: { x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: $c.lighten(colors.mapBG_hov_A,.2) }, { offset: 1, color: $c.lighten(colors.mapBG_hov_B,.2) } ], }, } }, emphasis: { label: { color:colors.fontHov, fontSize: 14, show: true }, itemStyle: { areaColor: { x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: $c.fade(colors.mapBG_hov_A,.5) }, { offset: 1, color: $c.fade(colors.mapBG_hov_B,.5) } ], }, } }, }, series: [ ] } // tempOption.visualMap={ // type: "continuous", // right:visualMapPos.right, // bottom:visualMapPos.bottom, // min:0, // max:chartData.maxData, // seriesIndex:0, // orient:"horizontal", // // backgroundColor: 'red', // inRange:{ // color:colors.visualMap, // }, // textStyle:{ // color:colors.font, // }, // calculable: true // } for(let a in tempOption){ state.chartOption[a]=tempOption[a] } processMapData(current) } const processMapData=(current)=>{ const {mapData,pointData,pinData,circleData,warningData,dangerData,sum,dept,maxData,minData,maxPin,minPin}=chartData // let currentDept=dept[dept.length-1] // let seriesData=convertData(circleData['code'+currentDept.code],currentDept) let mapD=[] mapD.push( { data: pointData, geoIndex: 0, type:'map', }, { symbolSize: 5, label: { position: 'center', align:"center", show: false, color: colors.font, fontSize: 12, formatter: function(para) {return para.data.name }, }, emphasis: { label: { show:false, fontSize: 14, color:colors.fontHov, fontWeight:"bold", } }, symbolOffset: [0, 0], itemStyle: { color: '#fff' }, name: 'light', type: 'scatter', coordinateSystem: 'geo', zlevel: 2, data: pointData, }, { type: 'scatter', symbol: 'circle', coordinateSystem: 'geo', symbolOffset: [0, 0], large:true, label: { show: false, }, emphasis: { label: { fontSize: 14, color:colors.fontHov, fontWeight:"bold", } }, itemStyle: { color: colors.pin_A, }, symbolSize:20, data: circleData, zlevel: 2, }, { type: 'scatter', symbol: 'pin', // type: 'effectScatter', // symbol: 'circle', coordinateSystem: 'geo', // rippleEffect: { brushType: 'stroke' }, // showEffectOn: 'render', symbolOffset: [0, 0], large:true, label: { show: true, position:"inside", //offset:[0 ,5], align:"center", color: $c.wh, fontSize: 14, formatter: p => { if(p.data.value[2].toString().length>4){ return (p.data.value[2]/10000).toFixed(0)+"万" }else{ return p.data.value[2] } }, // rich: { val:{ padding:[20,0,20,0], fontSize: 12, color:$c.re, }, cnNum: { fontSize: 12, color:$c.wh, } }, }, emphasis: { label: { fontSize: 18, color:colors.fontHov, fontWeight:"bold", // formatter: function(para) { return para.data.value[2] },//para.data.name +" : " + } }, itemStyle: { color:{ type: 'radial', x: 0.3, y: 0.3, r: 0.5, colorStops: [ { offset: 0, color: colors.pin_A }, { offset: 1, color: colors.pin_B } ], global: false // 缺省为 false } }, symbolSize: (val)=> { var a = (maxPin - minPin) / (maxData - minData); var b = maxPin - a * minData; b = maxPin - a * maxData; return a * val[2] + b * 1.3; }, data: pinData, zlevel: 2, }, { type: "scatter", symbol: symbol.icon, coordinateSystem: 'geo', symbolOffset: [0, -10], label: { show: false, }, itemStyle: { color: { type: 'radial', x: 0.3, y: 0.3, r: 0.5, colorStops: [ { offset: 0, color: $c.yel1}, { offset: 1, color: $c.yel6} ], global: false // 缺省为 false }, }, symbolSize: 24, emphasis: { scale:1.5,}, data: warningData, zlevel: 2, }, { type: "scatter", symbol: symbol.icon, coordinateSystem: 'geo', symbolOffset: [0, -10], label: { show: false, }, itemStyle: { color: { type: 'radial', x: 0.3, y: 0.3, r: 0.5, colorStops: [ { offset: 0, color: $c.rel3}, { offset: 1, color: $c.rel5} ], global: false // 缺省为 false }, }, symbolSize: 24, emphasis: { scale:1.5,}, data: dangerData, zlevel: 2, } ) state.chartOption.series=mapD state.chartInstance.setOption(state.chartOption,true); } onMounted(()=>{ getFetchEcharts({url:"/static/maps/",params:"shenyangHK.json"}).then((res)=>{ console.log("mapRes",res); state.chartData.alladcode=res; state.chartData.geoJson=res; initChart() }) }) </script> <template> <div class="mapC-wrap"> <counter></counter> <div ref="map" class="full-map"></div> </div> </template> <style scoped lang="less"> .mapC-wrap{.poa; .fullbox; .full-map{.poa; .fullbox; z-index: 5; .bgc(@tr);} } </style>