center-map.vue 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358
  1. <template>
  2. <div class="centermap">
  3. <div class="mapwrap" v-if="pageflag">
  4. <dv-border-box-12>
  5. <div class="loading" v-if="loading"><a-spin /></div>
  6. <div class="quanguo" @click="getData('china')" v-if="code !== 'china'">
  7. 返回
  8. </div>
  9. <Echart id="CenterMap" :options="options" ref="CenterMap" />
  10. </dv-border-box-12>
  11. </div>
  12. <Reacquire v-else @onclick="getData('china')" style="line-height:200px" />
  13. </div>
  14. </template>
  15. <script>
  16. import xzqCode from '@/utils/map/xzqCode'
  17. import * as echarts from 'echarts'
  18. import { GETNOBASE } from '@/utils/request'
  19. import { queryMapSaleData } from '@/api/bigScreen.js'
  20. export default {
  21. data () {
  22. return {
  23. options: {},
  24. code: 'china', // china 代表中国 其他地市是行政编码
  25. echartBindClick: false,
  26. isSouthChinaSea: false, // 是否要展示南海群岛 修改此值请刷新页面
  27. pageflag: true,
  28. timer: null,
  29. loading: false
  30. }
  31. },
  32. created () {},
  33. mounted () {
  34. this.getData('china')
  35. },
  36. beforeDestroy () {
  37. this.clearData()
  38. },
  39. methods: {
  40. clearData () {
  41. if (this.timer) {
  42. clearInterval(this.timer)
  43. this.timer = null
  44. }
  45. },
  46. // 轮询
  47. switper () {
  48. if (this.timer) {
  49. return
  50. }
  51. const looper = (a) => {
  52. this.getData('china')
  53. }
  54. this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime)
  55. },
  56. getData (code) {
  57. this.loading = true
  58. queryMapSaleData().then((res) => {
  59. console.log('地图', res)
  60. if (res.status == 200) {
  61. this.getGeojson('china', res.data.dataList)
  62. // this.mapclick()
  63. this.$emit('onData', res.data)
  64. this.switper()
  65. } else {
  66. this.$Message.warning(res.msg)
  67. }
  68. this.loading = false
  69. })
  70. },
  71. /**
  72. * @description: 获取geojson
  73. * @param {*} name china 表示中国 其他省份行政区编码
  74. * @param {*} mydata 接口返回列表数据
  75. * @return {*}
  76. */
  77. async getGeojson (name, mydata) {
  78. this.code = name
  79. // 如果要展示南海群岛并且展示的是中国的话
  80. let geoname = name
  81. if (this.isSouthChinaSea && name == 'china') {
  82. geoname = 'chinaNanhai'
  83. }
  84. // 如果有注册地图的话就不用再注册 了
  85. let mapjson = echarts.getMap(name)
  86. if (mapjson) {
  87. mapjson = mapjson.geoJSON
  88. } else {
  89. mapjson = await GETNOBASE(`../../map-geojson/${geoname}.json`).then((res) => {
  90. return res
  91. })
  92. echarts.registerMap(name, mapjson)
  93. }
  94. const cityCenter = {}
  95. const arr = mapjson.features
  96. console.log(mapjson)
  97. // 根据geojson获取省份中心点
  98. arr.map((item) => {
  99. cityCenter[item.properties.name] =
  100. item.properties.centroid || item.properties.center
  101. })
  102. const newData = []
  103. const retData = []
  104. mydata.map((item) => {
  105. if (cityCenter[item.provinceName]) {
  106. newData.push({
  107. name: item.provinceName,
  108. value: cityCenter[item.provinceName].concat(item.resultAmount)
  109. })
  110. }
  111. retData.push({
  112. name: item.provinceName,
  113. value: item.resultAmount
  114. })
  115. })
  116. this.init(name, retData, newData)
  117. },
  118. init (name, data, data2) {
  119. // console.log(data2);
  120. const top = 45
  121. const zoom = 1.05
  122. const option = {
  123. backgroundColor: 'rgba(0,0,0,0)',
  124. tooltip: {
  125. show: false
  126. },
  127. legend: {
  128. show: false
  129. },
  130. visualMap: {
  131. left: 20,
  132. bottom: 20,
  133. pieces: [
  134. { gte: 10000000, label: '1000万元以上' }, // 不指定 max,表示 max 为无限大(Infinity)。
  135. { gte: 5000000, lte: 9999999, label: '500万元-1000万元' },
  136. { gte: 1000000, lte: 4999999, label: '100万元-500万元' },
  137. { gte: 500000, lte: 999999, label: '50万元-100万元' },
  138. { gte: 50000, lte: 499999, label: '5万元-50万元' },
  139. { lte: 49999, label: '1-5万元' } // 不指定 min,表示 min 为无限大(-Infinity)。
  140. ],
  141. inRange: {
  142. // 渐变颜色,从小到大
  143. color: [
  144. '#255a7e',
  145. '#3483b4',
  146. '#43a9e8',
  147. '#0389ff',
  148. '#ffaa00',
  149. '#ff5500'
  150. ]
  151. },
  152. textStyle: {
  153. color: '#fff'
  154. }
  155. },
  156. geo: {
  157. map: name,
  158. roam: false,
  159. selectedMode: false, // 是否允许选中多个区域
  160. zoom: zoom,
  161. top: top,
  162. // aspectScale: 0.78,
  163. show: false
  164. },
  165. series: [
  166. {
  167. name: 'MAP',
  168. type: 'map',
  169. map: name,
  170. // aspectScale: 0.78,
  171. data: data,
  172. selectedMode: false, // 是否允许选中多个区域
  173. zoom: zoom,
  174. geoIndex: 1,
  175. top: top,
  176. tooltip: {
  177. show: true,
  178. formatter: function (params) {
  179. if (params.data) {
  180. return params.name + ':' + (params.data['value'] / 10000).toFixed(2) + '万元'
  181. } else {
  182. return params.name
  183. }
  184. },
  185. backgroundColor: 'rgba(0,0,0,.6)',
  186. borderColor: 'rgba(147, 235, 248, .8)',
  187. textStyle: {
  188. color: '#FFF'
  189. }
  190. },
  191. label: {
  192. show: false,
  193. color: '#000',
  194. formatter: function (val) {
  195. // console.log(val)
  196. if (val.data !== undefined) {
  197. return val.name.slice(0, 2)
  198. } else {
  199. return ''
  200. }
  201. },
  202. rich: {}
  203. },
  204. emphasis: {
  205. label: {
  206. show: false
  207. },
  208. itemStyle: {
  209. areaColor: '#389BB7',
  210. borderWidth: 1
  211. }
  212. },
  213. itemStyle: {
  214. borderColor: 'rgba(147, 235, 248, .8)',
  215. borderWidth: 1,
  216. areaColor: {
  217. type: 'radial',
  218. x: 0.5,
  219. y: 0.5,
  220. r: 0.8,
  221. colorStops: [
  222. {
  223. offset: 0,
  224. color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
  225. },
  226. {
  227. offset: 1,
  228. color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
  229. }
  230. ],
  231. globalCoord: false // 缺为 false
  232. },
  233. shadowColor: 'rgba(128, 217, 248, .3)',
  234. shadowOffsetX: -2,
  235. shadowOffsetY: 2,
  236. shadowBlur: 10
  237. }
  238. },
  239. {
  240. data: data2,
  241. type: 'effectScatter',
  242. coordinateSystem: 'geo',
  243. symbolSize: function (val) {
  244. return 4
  245. },
  246. legendHoverLink: true,
  247. showEffectOn: 'render',
  248. rippleEffect: {
  249. // period: 4,
  250. scale: 6,
  251. color: 'rgba(255,255,255, 1)',
  252. brushType: 'fill'
  253. },
  254. tooltip: {
  255. show: true,
  256. formatter: function (params) {
  257. if (params.data) {
  258. return params.name + ':' + params.data['value'][2]
  259. } else {
  260. return params.name
  261. }
  262. },
  263. backgroundColor: 'rgba(0,0,0,.6)',
  264. borderColor: 'rgba(147, 235, 248, .8)',
  265. textStyle: {
  266. color: '#FFF'
  267. }
  268. },
  269. label: {
  270. formatter: (param) => {
  271. return param.name.slice(0, 2)
  272. },
  273. fontSize: 11,
  274. offset: [0, 2],
  275. position: 'bottom',
  276. textBorderColor: '#fff',
  277. textShadowColor: '#000',
  278. textShadowBlur: 10,
  279. textBorderWidth: 0,
  280. color: '#FFF',
  281. show: true
  282. },
  283. // colorBy: "data",
  284. itemStyle: {
  285. color: 'rgba(255,255,255,1)',
  286. borderColor: 'rgba(2255,255,255,2)',
  287. borderWidth: 4,
  288. shadowColor: '#000',
  289. shadowBlur: 10
  290. }
  291. }
  292. ]
  293. // 动画效果
  294. // animationDuration: 1000,
  295. // animationEasing: 'linear',
  296. // animationDurationUpdate: 1000
  297. }
  298. this.options = option
  299. },
  300. mapclick () {
  301. if (this.echartBindClick) return
  302. // 单击切换到级地图,当mapCode有值,说明可以切换到下级地图
  303. this.$refs.CenterMap.chart.on('click', (params) => {
  304. // console.log(params);
  305. const xzqData = xzqCode[params.name]
  306. if (xzqData) {
  307. this.getData(xzqData.adcode)
  308. } else {
  309. this.$message.info('暂无下级地市!')
  310. }
  311. })
  312. this.echartBindClick = true
  313. }
  314. }
  315. }
  316. </script>
  317. <style lang="less" scoped>
  318. .centermap {
  319. .mapwrap {
  320. height: 508px;
  321. width: 100%;
  322. // padding: 0 0 10px 0;
  323. box-sizing: border-box;
  324. position: relative;
  325. .quanguo {
  326. position: absolute;
  327. right: 20px;
  328. top: 15px;
  329. width: 80px;
  330. height: 28px;
  331. border: 1px solid #00aaff;
  332. border-radius: 10px;
  333. color: #00aaff;
  334. text-align: center;
  335. line-height: 26px;
  336. letter-spacing: 6px;
  337. cursor: pointer;
  338. box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5), 0 0 6px rgba(0, 237, 237, 0.4);
  339. z-index: 10000;
  340. }
  341. .loading{
  342. position:absolute;
  343. z-index: 1000;
  344. left:0;
  345. top:0;
  346. width:100%;
  347. height:100%;
  348. background:rgba(0,0,0,0.5);
  349. display:flex;
  350. align-items: center;
  351. justify-content: center;
  352. }
  353. }
  354. }
  355. </style>