经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Echarts » 查看文章
vue+echarts5实现中国地图的示例代码
来源:jb51  时间:2022/1/18 11:29:48  对本文有异议

使用echarts5.0版本实现中国地图,E charts在5.0版本之后,地图不能直接引入了,需要自己去下载。

地图文件下载地址:
下载地址
(http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.772340792178525&lng=103.94573258937584&zoom=9.5)

注意: 将下载后的json文件放置/public目录下

map类型的地图

  1. <template>
  2. <div>
  3. <div ref="mapEcharts" class="map-echart"></div>
  4. </div>
  5. </template>
  6.  
  7. <script>
  8. import * as echarts from 'echarts'
  9. import axios from 'axios'
  10.  
  11. export default {
  12. name: "Map",
  13. data() {
  14. return {
  15. timer: null,
  16. seriesData: [
  17. {name: '天津市', value: 20057.34},
  18. {name: '北京市', value: 15477.48},
  19. {name: '上海市', value: 31686.1},
  20. {name: '河北省', value: 6992.6},
  21. {name: '山东省', value: 44045.49},
  22. {name: '山西省', value: 4045.49},
  23. ],
  24. map: null
  25. }
  26. },
  27. created() {
  28. },
  29. mounted(){
  30. this.initMapEcharts();
  31. },
  32. methods: {
  33. initMapEcharts() {
  34. // 获取地图数据
  35. // 将下载后的json文件放置/public目录下
  36. axios.get('/china.json').then(res => {
  37. console.log(res);
  38. // 使用数据注册地图
  39. echarts.registerMap('china', res.data)
  40. this.$nextTick(() => {
  41. // 初始化地图
  42. this.map = echarts.init(this.$refs['mapEcharts'])
  43. // 设置基础配置项
  44. const option = {
  45. // 标题
  46. title: {
  47. text:"中国地图",
  48. left: 'center',
  49. subtext: "下载链接",
  50. sublink: "http://datav.aliyun.com/tools/atlas/#&lat=30.772340792178525&lng=103.94573258937584&zoom=9.5"
  51. },
  52. // 悬浮窗
  53. tooltip: {
  54. trigger: 'item',
  55. formatter: function(params) {
  56. return `${params.name}: ${params.value || 0}`
  57.  
  58. }
  59. },
  60. // 图例
  61. visualMap: {
  62. min: 800,
  63. max: 50000,
  64. text: ['High', 'Low'],
  65. realtime: false,
  66. calculable: true,
  67. inRange: {
  68. color: ['lightskyblue', 'yellow', 'orangered']
  69. }
  70. },
  71. // 要显示的散点数据
  72. series: [
  73. {
  74. type: 'map',
  75. map: 'china',
  76. // 这是要显示的数据
  77. data: this.seriesData,
  78. // 自定义命名映射,不设置的话,label默认是使用 geoJson中的name名
  79. nameMap: {
  80. '北京市': "北京重命名",
  81. "天津市": '天津重命名'
  82. },
  83. },
  84. ]
  85. }
  86. // 将配置应用到地图上
  87. this.map.setOption(option)
  88. // 设置定时器,自动循环触发tooltip悬浮窗事件
  89. this.setTimer()
  90. let that = this;
  91. // 当鼠标在地图上时,停止自动tooltip事件
  92. this.map.on('mouseover', {series: 0,}, function(params) {
  93. that.clearTimer()
  94. })
  95. // 当鼠标移出地图后,再自动tooltip
  96. this.map.on('mouseout', {series: 0}, function(params) {
  97. that.setTimer()
  98. })
  99. })
  100. })
  101. },
  102. setTimer() {
  103. // 当前选中区域的下标
  104. let curIndex = -1;
  105. this.timer && clearInterval(this.timer)
  106. this.timer = setInterval(() => {
  107. const len = this.seriesData.length;
  108. // dispatchAction是主动去触发echarts事件,取消高亮当前的数据图形
  109. this.map.dispatchAction({
  110. type: 'downplay',
  111. seriesIndex: 0,
  112. dataIndex: curIndex
  113. })
  114. // 下一个选中区域的下标
  115. curIndex = (curIndex + 1) % len;
  116. // 高亮下一个数据图形
  117. this.map.dispatchAction({
  118. type: 'highlight',
  119. seriesIndex: 0,
  120. dataIndex: curIndex
  121. })
  122. // 显示tooltip
  123. this.map.dispatchAction({
  124. type: 'showTip',
  125. seriesIndex:0,
  126. dataIndex: curIndex
  127. })
  128. }, 1000)
  129. },
  130. clearTimer() {
  131. this.timer && clearInterval(this.timer)
  132. },
  133. },
  134. beforeDestroy() {
  135. this.clearTimer()
  136. }
  137. }
  138. </script>
  139.  
  140. <style>
  141. .map-echart {
  142. height: 900px;
  143. width: 900px;
  144. }
  145. </style>

在这里插入图片描述

geo类型地图

  1. <template>
  2. <div>
  3. <div ref="geoEcharts" class="geo-echart"></div>
  4. </div>
  5. </template>
  6.  
  7. <script>
  8. import * as echarts from 'echarts'
  9. import axios from 'axios'
  10. import { color } from 'echarts'
  11.  
  12. export default {
  13. name: "Geo",
  14. data() {
  15. return {
  16. timer: null,
  17. seriesData: [
  18. {name: '天津市', value: 20057.34},
  19. {name: '北京市', value: 15477.48},
  20. {name: '上海市', value: 31686.1},
  21. {name: '河北省', value: 6992.6},
  22. {name: '山东省', value: 44045.49},
  23. {name: '山西省', value: 4045.49},
  24. ],
  25. map: null
  26. }
  27. },
  28. created() {
  29. },
  30. mounted(){
  31. this.initGeoEcharts();
  32. },
  33. methods: {
  34. initGeoEcharts() {
  35. axios.get('/china.json').then(res => {
  36. echarts.registerMap('china', res.data)
  37. this.$nextTick(() => {
  38. const map = echarts.init(this.$refs['geoEcharts'], null, {renderer:'svg'})
  39. const option = {
  40. title: {
  41. text:"中国地图",
  42. left: 'center',
  43. subtext: "下载链接",
  44. sublink: "http://datav.aliyun.com/tools/atlas/#&lat=30.772340792178525&lng=103.94573258937584&zoom=9.5"
  45. },
  46. // 悬浮窗
  47. tooltip: {
  48. trigger: 'item',
  49. formatter: function(params) {
  50. console.log(2222, params);
  51. return `${params.name}: ${params.value || 0}`
  52.  
  53. }
  54. },
  55. // 图例
  56. visualMap: {
  57. min: 800,
  58. max: 50000,
  59. text: ['High', 'Low'],
  60. realtime: false,
  61. calculable: true,
  62. inRange: {
  63. color: ['lightskyblue', 'yellow', 'orangered']
  64. }
  65. },
  66. geo: {
  67. map: 'china',
  68. zoom: 1,
  69. roam: 'move',
  70. nameMap: {
  71. '新疆维吾尔自治区': "新疆",
  72. "西藏自治区": '西藏',
  73. "甘肃省": "甘肃",
  74. "宁夏回族自治区": "宁夏",
  75. "广西壮族自治区": "广西",
  76. "内蒙古自治区": "内蒙古",
  77. "香港特别行政区": "香港",
  78. "澳门特别行政区": "澳门"
  79. },
  80. label: {
  81. show: true,
  82. color: 'black',
  83. position: "inside",
  84. distance: 0,
  85. fontSize: 10,
  86. rotate:45
  87. },
  88. // 所有地图的区域颜色
  89. itemStyle: {
  90. areaColor: 'rgba(0,60,153,0.8)',
  91. borderColor: '#02c0ff'
  92. },
  93. emphasis: {
  94. itemStyle: {
  95. areaColor: 'rgba(0,60,153,0.5)',
  96. shadowColor: 'rgba(0,0,0,0.8)',
  97. shadowBlur: 5,
  98. shadowOffsetY: 5
  99. }
  100. },
  101. // 针对某些区域做一些特别的样式
  102. // regions: [{
  103. // name: '广东省',
  104. // itemStyle: {
  105. // areaColor: 'yellow',
  106. // color: 'black',
  107. // borderColor: 'pink'
  108. // }
  109. // }]
  110. },
  111. // 数据
  112. series: [
  113. {
  114. type: 'scatter',
  115. coordinateSystem: 'geo',
  116. data: [
  117. {name: '江苏省', value:[120.15, 31.99, 9]}, // 值为,经纬度,数据
  118. {name: '湖北省', value: [111, 31.89, 15477]},
  119. {name: '四川省', value: [102.15, 31.89, 31686]},
  120. {name: '浙江省', value: [120.15, 29.89, 6992]},
  121. {name: '山东省', value: [118.15, 36.9, 44045]}
  122. ],
  123. SymbolSize: 4
  124. },
  125. {
  126. type: 'lines',
  127. coordinateSystem: 'geo',
  128. data: [
  129. {coords: [[121.15,38], [111, 31.89], [100.15, 31.89],[121.15, 29.89], [105.15, 30.89]]}
  130. ],
  131. polyline: true, // 是否是多段线
  132. lineStyle: {
  133. color: {
  134. type: 'radial',
  135. x: 0.5,
  136. y: 0.5,
  137. r: 0.5,
  138. colorStops: [{
  139. offset: 0, color: 'red' // 0% 处的颜色
  140. }, {
  141. offset: 1, color: 'blue' // 100% 处的颜色
  142. }],
  143. global: false, // 缺省为 false
  144. shadowColor: 'rgba(0, 0, 0, 0.5)',
  145. shadowBlur: 10,
  146. curveness: 1
  147. },
  148. opacity: 0.3,
  149. width: 2,
  150. },
  151. // 线特效的配置
  152. effect: {
  153. show: true,
  154. period: 5, // 特效动画的时间,单位为 s
  155. trailLength: 1, //特效尾迹长度[0,1]值越大,尾迹越长重
  156. // symbol: 'image://' + require('@/echartsMap/money.png'), // 自定义动画图标
  157. symbolSize: 15, //图标大小
  158. color:"red"
  159. }
  160. }
  161. ]
  162. }
  163. map.setOption(option)
  164. })
  165. })
  166. }
  167. },
  168. }
  169. </script>
  170.  
  171. <style>
  172. .geo-echart{
  173. height: 900px;
  174. width: 900px;
  175. }
  176. </style>

在这里插入图片描述

 到此这篇关于vue+echarts5实现中国地图的示例代码的文章就介绍到这了,更多相关vue echarts5中国地图内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号