经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Echarts » 查看文章
vue2?利用echarts?单独绘制省份的步骤
来源:jb51  时间:2022/1/24 10:09:35  对本文有异议

第一步:先引入所需的第三方模块

  1. import echarts from "echarts"; // 引入所需要的echarts模块
  2. import "echarts/map/js/province/shanxi"; // 引入省份的js文件
  3. import "echarts/map/json/province/shanxi.json"; // 引入省份的json文件

第二步:开始绘制

  1. // 基于准备好的dom,初始化echarts实例
  2. var myChart = echarts.init(document.getElementById("left2"));
  3.  
  4. var option = {
  5. visualMap: {
  6. show: false,
  7. min: 0,
  8. max: 100,
  9. left: "left",
  10. top: "bottom",
  11. text: ["高", "低"], // 文本,默认为数值文本
  12. calculable: true,
  13. inRange: {
  14. color: ["yellow", "lightskyblue", "orangered"],
  15. },
  16. },
  17. series: [
  18. {
  19. layoutCenter: ['30%', '30%'],
  20. type: "map",
  21. mapType: "山西",
  22. roam: true,
  23. label: {
  24. normal: {
  25. show: true,
  26. textStyle: {
  27. fontSize: 10,
  28. fontFamily: "楷体",
  29. },
  30. },
  31. emphasis: {
  32. color: "#fff",
  33. },
  34. itemStyle: {
  35. borderColor: "#389BB7",
  36. areaColor: "#fff",
  37. areaColor: "#389BB7",
  38. borderWidth: 0,
  39. animation: false,// 数据
  40. data: [
  41. {
  42. name: "大同市",
  43. value: 88,
  44. name: "朔州市",
  45. value: 96,
  46. name: "忻州市",
  47. value: 98,
  48. name: "吕梁市",
  49. value: 80,
  50. name: "太原市",
  51. name: "晋中市",
  52. value: 79,
  53. name: "阳泉市",
  54. value: 77,
  55. name: "临汾市",
  56. value: 33,
  57. name: "长治市",
  58. value: 69,
  59. name: "运城市",
  60. value: 66,
  61. name: "晋城市",
  62. value: 22,
  63. ],
  64. ],
  65. };
  66. myChart.setOption(option);

最后结果:

补充:vue2.x结合echarts2实现显示具体省份热力图

最近研究了一下VUE2.X结合ehcarts实现热力图,先看下最终:

效果话不多说,直接上代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>test</title>
  5. <meta charset="utf-8">
  6. <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
  7. <!-- <script type="text/javascript" src="./china.js"></script> -->
  8. <script type="text/javascript" src="./xinjiang.js"></script>
  9. <style type="text/css">
  10. #myChart{
  11. width: 500px;
  12. height: 500px;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <div id="myChart"></div>
  18. </body>
  19. <script type="text/javascript">
  20.  
  21. var geoCoordMap = {
  22. "乌鲁木齐":[87.68,43.77],
  23. "克拉玛依":[84.77,45.59],
  24. "石河子":[85.94,44.27],
  25. "吐鲁番":[89.19,42.91],
  26. "齐齐哈尔":[123.97,47.33],
  27. "托克逊":[88.63,42.77],
  28. "鄯善":[90.25,42.82],
  29. "哈密":[93.44,42.78],
  30. "伊吾":[94.65,43.28],
  31. "巴里坤":[93,43.6],
  32. "库尔勒":[86.06,41.68],
  33. "和静":[86.35,42.31],
  34. "和硕":[86.84,42.23],
  35. "博湖":[86.53,41.95],
  36. "尉梨":[86.24,41.36],
  37. "轮台":[84.25,41.77],
  38. "焉耆":[86.55,42.05],
  39. "和田":[79.94,37.12],
  40. "民丰":[82.63,37.07],
  41. "策勒":[80.78,37.04],
  42. "于田":[81.63,36.86],
  43. "洛浦":[80.17,37.12],
  44. "皮山":[78.29,37.06],
  45. "墨玉":[79.74,37.31],
  46. "阿克苏":[80.29,41.15],
  47. "温宿":[80.24,41.29],
  48. "拜城":[81.84,41.82],
  49. "库车":[82.97,41.68],
  50. "新和":[82.63,41.55],
  51. "沙雅":[82.9,41.25],
  52. "阿瓦提":[80.34,40.64],
  53. "柯平":[79.06,40.55],
  54. "乌什":[79.25,41.22],
  55. "咯什":[75.94,39.52],
  56. "巴楚":[78.59,39.78],
  57. "枷师":[76.78,39.46],
  58. "乐普湖":[76.67,39.23],
  59. "麦盖提":[77.62,38.95],
  60. "莎车":[77.25,38.45],
  61. "泽普":[77.26,38.2],
  62. "叶城":[77.42,37.89],
  63. "疏勒":[76.05,39.41],
  64. "英吉沙":[76.17,38.91],
  65. "疏附":[75.83,39.42],
  66. "塔什库尔干":[75.22,75.22],
  67. "阿图什":[76.12,39.73],
  68. "阿合奇":[78.42,41.91],
  69. "阿克陶":[75.94,39.14],
  70. "乌恰":[75.18,39.7],
  71. "昌吉":[87.31,44.05],
  72. "阜康":[87.94,44.14],
  73. "奇台":[89.52,44.02],
  74. "吉木萨尔":[89.14,44],
  75. "米泉":[87.68,43.97],
  76. "玛纳斯":[86.22,44.28],
  77. "呼图壁":[86.92,44.18],
  78. "木垒":[90.34,43.8],
  79. "博乐":[82.1,44.93],
  80. "精河":[82.92,44.67],
  81. "温泉":[81.08,44.95],
  82. "伊宁":[81.33,43.91],
  83. "尼勒克":[82.53,43.82],
  84. "新源":[83.27,43.41],
  85. "巩留":[82.23,43.35],
  86. "奎屯":[84.89,44.45],
  87. "特克斯":[81.81,43.23],
  88. "昭苏":[81.08,43.15],
  89. "霍城":[80.87,44.07],
  90. "察布察尔":[81.12,43.82],
  91. "塔城":[82.96,46.74],
  92. "额敏":[83.62,46.52],
  93. "乌苏":[84.62,44.45],
  94. "托里":[83.59,45.92],
  95. "裕民":[82.94,46.21],
  96. "沙湾":[85.56,44.29],
  97. "和布克赛尔":[85.13,46.78],
  98. "阿勒泰":[88.14,47.86],
  99. "青河":[90.37,46.71],
  100. "富蕴":[89.44,47.05],
  101. "福海":[87.51,47.15],
  102. "吉木乃":[85.84,47.42],
  103. "布尔津":[86.92,47.7],
  104. "哈巴河":[86.41,48.05]
  105. };
  106. var convertData = function (data) {
  107. var res = [];
  108. for (var i = 0; i < data.length; i++) {
  109. var geoCoord = geoCoordMap[data[i].name];
  110. if (geoCoord) {
  111. res.push(geoCoord.concat(data[i].value));
  112. }
  113. return res;
  114. var loadData = convertData([
  115. {name: "乌鲁木齐", value: 32112},
  116. {name: "克拉玛依", value: 44412},
  117. {name: "石河子", value: 25123},
  118. {name: "吐鲁番", value: 45612},
  119. {name: "齐齐哈尔", value: 12512},
  120. {name: "托克逊", value: 12512},
  121. {name: "鄯善", value: 25121},
  122. {name: "哈密", value: 54425},
  123. {name: "伊吾", value: 54126},
  124. {name: "巴里坤", value: 5226},
  125. {name: "库尔勒", value: 56247},
  126. {name: "和静", value: 67227},
  127. {name: "和硕", value: 35427},
  128. {name: "博湖", value: 78327},
  129. {name: "尉梨", value: 87628},
  130. {name: "轮台", value: 87629},
  131. {name: "焉耆", value: 67830},
  132. {name: "和田", value: 98730},
  133. {name: "民丰", value: 112331},
  134. {name: "策勒", value: 113331},
  135. {name: "于田", value: 132331},
  136. {name: "洛浦", value: 123231},
  137. {name: "皮山", value: 154132},
  138. {name: "墨玉", value: 56632},
  139. {name: "阿克苏", value: 23232},
  140. {name: "温宿", value: 12333},
  141. {name: "拜城", value: 22333},
  142. {name: "库车", value: 32333},
  143. {name: "新和", value: 43434},
  144. {name: "沙雅", value: 54534},
  145. {name: "阿瓦提", value: 64535},
  146. {name: "柯平", value: 65435},
  147. {name: "乌什", value: 567236},
  148. {name: "咯什", value: 567336},
  149. {name: "巴楚", value: 67836},
  150. {name: "枷师", value: 789436},
  151. {name: "乐普湖", value: 898236},
  152. {name: "麦盖提", value: 678437},
  153. {name: "莎车", value: 56737},
  154. {name: "泽普", value: 123337},
  155. {name: "叶城", value: 12337},
  156. {name: "英吉沙", value: 23437},
  157. {name: "疏附", value: 34538},
  158. {name: "阿图什", value: 34568},
  159. {name: "阿合奇", value: 12138},
  160. {name: "阿克陶", value: 32138},
  161. {name: "玛纳斯", value: 54139},
  162. {name: "哈巴河", value: 56139},
  163. {name: "布尔津", value: 67139},
  164. {name: "吉木乃", value: 78139},
  165. {name: "福海", value: 65440},
  166. {name: "富蕴", value: 32340},
  167. {name: "青河", value: 44341},
  168. {name: "阿勒泰", value: 54341},
  169. {name: "和布克赛尔", value: 23442},
  170. {name: "裕民", value: 12343},
  171. {name: "沙湾", value: 22343}
  172. ]);
  173. option = {
  174. backgroundColor: '#404a59',
  175. xAxis: {
  176. show: false
  177. },
  178. yAxis: {
  179. visualMap: {
  180. type: 'piecewise',
  181. min: 20000,
  182. max: 100000,
  183. calculable: true,
  184. realtime: false,
  185. splitNumber: 5,
  186. inRange: {
  187. color: ['#005a88', '#04a4f6', '#00943e', '#fdf40f', '#cf2d14']
  188. },
  189. right: '10%',
  190. bottom: '5%',
  191. orient:"vertical1",
  192. inverse:true, //是否反转 visualMap 组件
  193. textStyle: {
  194. color: '#fff'
  195. geo: { // 这个是重点配置区
  196. map: '新疆', // 表示中国地图
  197. roam: true,
  198. itemStyle: {
  199. normal: {
  200. areaColor: '#081832',
  201. borderColor: '#425F91'
  202. emphasis: {
  203. areaColor: "#2a333d",
  204. shadowOffsetX: 0,
  205. shadowOffsetY: 0,
  206. shadowBlur: 20,
  207. borderWidth: 0,
  208. shadowColor: 'rgba(0, 0, 0, 0.5)'
  209. },
  210. silent: true
  211. series: [{
  212. name: '',
  213. type: 'heatmap',
  214. data: loadData,
  215. coordinateSystem: 'geo',
  216. progressive: 1000,
  217. animation: false
  218. }]
  219. var lineChart = echarts.init(document.getElementById('myChart'));
  220. lineChart.setOption(option);
  221. </script>
  222. </html>

   说一下:china.js或各个省份对应的js文件在node包里面就有,是比较全面的。有的说这里没有用到VUE啊,对的,在这里没引入(那是我的项目额!),不过不用担心,因为vue里面直接引入是完全兼容的啦! 

  代码看似很简单,但是里面的坑很多。因为我是在项目中直接使用的,本来想着有node包,就没有引入china.js或者具体省份对应的js文件,造成一些问题。第二个就是关于坐标轴、网格的设置,有些设置是相关联的,要注意。第三个就是在网上自行找到新疆省份下各个区锁对应的经纬度(这个渠道很多,就不多啰嗦了)。第四个就是在visualMap中的设置,这个我也是费了很大力气才实现的,有兴趣的朋友可以自己先试试,看看怎么玩,希望大家相互学习,共同进步。最后就是该项目地址我已经放到git了,欢迎大家mark并且star!

注意是:start!!!多谢多谢git仓库地址:https://github.com/WangHao1221/vueWithEcharts.git

到此这篇关于vue2 利用echarts 单独绘制省份的文章就介绍到这了,更多相关vue绘制省份内容请搜索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号