微信小程序使用Echarts 实现世界地图（其它地图同理）

做这个地图翻遍了百度谷歌没找到有用的方法，后来灵机一动尝试了一下原来跟在pc端和移动端实现并没有什么区别（自己蠢哭）。
wxml页面中

<ec-canvas id="mychart-dom-area" canvas-id="mychart-area" ec="{{ ec }}"></ec-canvas>

json 页面

{"usingComponents": {"ec-canvas": "../../../ec-canvas/ec-canvas"}
}

小程序中首先下载Echarts.js、word.js（世界地图的js文件）然后再需要的js页面引入

import * as echarts from '../../../ec-canvas/echarts';
import '../../../ec-canvas/wordmap.js'

然后同echarts 在小程序中渲染其他图表的方法

import utils from '../../../utils/util.js'
import * as echarts from '../../../ec-canvas/echarts';
import '../../../ec-canvas/wordmap.js'let chart = null;
function initChart(canvas, width, height) {const chart = echarts.init(canvas, null, {width,height});disableTouch: true,canvas.setChart(chart);const option = {backgroundColor:  "#fff",title:  {text:  "海外留学国家分布",subtext:  "",x:  "center"},dataRange:  {show:  true,min:  0,max:  1000000,text:  ["High",  "Low"],realtime:  true,calculable:  true,color:  ["#9FB5EA",  "#74E2CA"]},tooltip:  {trigger:  "item"},geo:  {map:  "world",label:  {emphasis:  {show:  false}},roam:  false,silent:  true,itemStyle:  {normal:  {areaColor:  "#37376e",borderColor:  "#000"},emphasis:  {areaColor:  "#2a333d"}}},//配置属性series:  [{name:  "数据",type:  "map",mapType:  "world",roam:  false,label:  {normal:  {show:  false //省份名称},emphasis:  {show:  false}},data:  [{  name:  "Afghanistan",  value:  28397.812  },{  name:  "Angola",  value:  19549.124  },{  name:  "Albania",  value:  3150.143  },{  name:  "United Arab Emirates",  value:  8441.537  },{  name:  "Argentina",  value:  40374.224  },{  name:  "Armenia",  value:  2963.496  },{  name:  "French Southern and Antarctic Lands",  value:  268.065  },{  name:  "Australia",  value:  22404.488  },{  name:  "Austria",  value:  8401.924  },{  name:  "Azerbaijan",  value:  9094.718  },{  name:  "Burundi",  value:  9232.753  },{  name:  "Belgium",  value:  10941.288  },{  name:  "Benin",  value:  9509.798  },{  name:  "Burkina Faso",  value:  15540.284  },{  name:  "Bangladesh",  value:  151125.475  },{  name:  "Bulgaria",  value:  7389.175  },{  name:  "The Bahamas",  value:  66402.316  },{  name:  "Bosnia and Herzegovina",  value:  3845.929  },{  name:  "Belarus",  value:  9491.07  },{  name:  "Belize",  value:  308.595  },{  name:  "Bermuda",  value:  64.951  },{  name:  "Bolivia",  value:  716.939  },{  name:  "Brazil",  value:  195210.154  },{  name:  "Brunei",  value:  27.223  },{  name:  "Bhutan",  value:  716.939  },{  name:  "Botswana",  value:  1969.341  },{  name:  "Central African Republic",  value:  4349.921  },{  name:  "Canada",  value:  34126.24  },{  name:  "Switzerland",  value:  7830.534  },{  name:  "Chile",  value:  17150.76  },{  name:  "China",  value:  1359821.465  },{  name:  "Ivory Coast",  value:  60508.978  },{  name:  "Cameroon",  value:  20624.343  },{  name:  "Democratic Republic of the Congo",  value:  62191.161  },{  name:  "Republic of the Congo",  value:  3573.024  },{  name:  "Colombia",  value:  46444.798  },{  name:  "Costa Rica",  value:  4669.685  },{  name:  "Cuba",  value:  11281.768  },{  name:  "Northern Cyprus",  value:  1.468  },{  name:  "Cyprus",  value:  1103.685  },{  name:  "Czech Republic",  value:  10553.701  },{  name:  "Germany",  value:  83017.404  },{  name:  "Djibouti",  value:  834.036  },{  name:  "Denmark",  value:  5550.959  },{  name:  "Dominican Republic",  value:  10016.797  },{  name:  "Algeria",  value:  37062.82  },{  name:  "Ecuador",  value:  15001.072  },{  name:  "Egypt",  value:  78075.705  },{  name:  "Eritrea",  value:  5741.159  },{  name:  "Spain",  value:  46182.038  },{  name:  "Estonia",  value:  1298.533  },{  name:  "Ethiopia",  value:  87095.281  },{  name:  "Finland",  value:  5367.693  },{  name:  "Fiji",  value:  860.559  },{  name:  "Falkland Islands",  value:  49.581  },{  name:  "France",  value:  63230.866  },{  name:  "Gabon",  value:  1556.222  },{  name:  "United Kingdom",  value:  62066.35  },{  name:  "Georgia",  value:  4388.674  },{  name:  "Ghana",  value:  24262.901  },{  name:  "Guinea",  value:  10876.033  },{  name:  "Gambia",  value:  1680.64  },{  name:  "Guinea Bissau",  value:  10876.033  },{  name:  "Equatorial Guinea",  value:  696.167  },{  name:  "Greece",  value:  11109.999  },{  name:  "Greenland",  value:  56.546  },{  name:  "Guatemala",  value:  14341.576  },{  name:  "French Guiana",  value:  231.169  },{  name:  "Guyana",  value:  786.126  },{  name:  "Honduras",  value:  7621.204  },{  name:  "Croatia",  value:  4338.027  },{  name:  "Haiti",  value:  9896.4  },{  name:  "Hungary",  value:  10014.633  },{  name:  "Indonesia",  value:  240676.485  },{  name:  "India",  value:  12054.648  },{  name:  "Ireland",  value:  4467.561  },{  name:  "Iran",  value:  240676.485  },{  name:  "Iraq",  value:  30962.38  },{  name:  "Iceland",  value:  318.042  },{  name:  "Israel",  value:  7420.368  },{  name:  "Italy",  value:  60508.978  },{  name:  "Jamaica",  value:  2741.485  },{  name:  "Jordan",  value:  6454.554  },{  name:  "Japan",  value:  127352.833  },{  name:  "Kazakhstan",  value:  15921.127  },{  name:  "Kenya",  value:  40909.194  },{  name:  "Kyrgyzstan",  value:  5334.223  },{  name:  "Cambodia",  value:  14364.931  },{  name:  "South Korea",  value:  51452.352  },{  name:  "Kosovo",  value:  97.743  },{  name:  "Kuwait",  value:  2991.58  },{  name:  "Laos",  value:  6395.713  },{  name:  "Lebanon",  value:  4341.092  },{  name:  "Liberia",  value:  3957.99  },{  name:  "Libya",  value:  6040.612  },{  name:  "Sri Lanka",  value:  20758.779  },{  name:  "Lesotho",  value:  2008.921  },{  name:  "Lithuania",  value:  3068.457  },{  name:  "Luxembourg",  value:  507.885  },{  name:  "Latvia",  value:  2090.519  },{  name:  "Morocco",  value:  31642.36  },{  name:  "Moldova",  value:  103.619  },{  name:  "Madagascar",  value:  21079.532  },{  name:  "Mexico",  value:  117886.404  },{  name:  "Macedonia",  value:  507.885  },{  name:  "Mali",  value:  13985.961  },{  name:  "Myanmar",  value:  51931.231  },{  name:  "Montenegro",  value:  620.078  },{  name:  "Mongolia",  value:  2712.738  },{  name:  "Mozambique",  value:  23967.265  },{  name:  "Mauritania",  value:  3609.42  },{  name:  "Malawi",  value:  15013.694  },{  name:  "Malaysia",  value:  28275.835  },{  name:  "Namibia",  value:  2178.967  },{  name:  "New Caledonia",  value:  246.379  },{  name:  "Niger",  value:  15893.746  },{  name:  "Nigeria",  value:  159707.78  },{  name:  "Nicaragua",  value:  5822.209  },{  name:  "Netherlands",  value:  16615.243  },{  name:  "Norway",  value:  4891.251  },{  name:  "Nepal",  value:  26846.016  },{  name:  "New Zealand",  value:  4368.136  },{  name:  "Oman",  value:  2802.768  },{  name:  "Pakistan",  value:  173149.306  },{  name:  "Panama",  value:  3678.128  },{  name:  "Peru",  value:  29262.83  },{  name:  "Philippines",  value:  93444.322  },{  name:  "Papua New Guinea",  value:  6858.945  },{  name:  "Poland",  value:  38198.754  },{  name:  "Puerto Rico",  value:  3709.671  },{  name:  "North Korea",  value:  1.468  },{  name:  "Portugal",  value:  10589.792  },{  name:  "Paraguay",  value:  6459.721  },{  name:  "Qatar",  value:  1749.713  },{  name:  "Romania",  value:  21861.476  },{  name:  "Russia",  value:  21861.476  },{  name:  "Rwanda",  value:  10836.732  },{  name:  "Western Sahara",  value:  514.648  },{  name:  "Saudi Arabia",  value:  27258.387  },{  name:  "Sudan",  value:  35652.002  },{  name:  "South Sudan",  value:  9940.929  },{  name:  "Senegal",  value:  12950.564  },{  name:  "Solomon Islands",  value:  526.447  },{  name:  "Sierra Leone",  value:  5751.976  },{  name:  "El Salvador",  value:  6218.195  },{  name:  "Somaliland",  value:  9636.173  },{  name:  "Somalia",  value:  9636.173  },{  name:  "Republic of Serbia",  value:  3573.024  },{  name:  "Suriname",  value:  524.96  },{  name:  "Slovakia",  value:  5433.437  },{  name:  "Slovenia",  value:  2054.232  },{  name:  "Sweden",  value:  9382.297  },{  name:  "Swaziland",  value:  1193.148  },{  name:  "Syria",  value:  7830.534  },{  name:  "Chad",  value:  11720.781  },{  name:  "Togo",  value:  6306.014  },{  name:  "Thailand",  value:  66402.316  },{  name:  "Tajikistan",  value:  7627.326  },{  name:  "Turkmenistan",  value:  5041.995  },{  name:  "East Timor",  value:  10016.797  },{  name:  "Trinidad and Tobago",  value:  1328.095  },{  name:  "Tunisia",  value:  10631.83  },{  name:  "Turkey",  value:  72137.546  },{  name:  "United Republic of Tanzania",  value:  44973.33  },{  name:  "Uganda",  value:  33987.213  },{  name:  "Ukraine",  value:  46050.22  },{  name:  "Uruguay",  value:  3371.982  },{  name:  "United States of America",  value:  312247.116  },{  name:  "Uzbekistan",  value:  27769.27  },{  name:  "Venezuela",  value:  236.299  },{  name:  "Vietnam",  value:  89047.397  },{  name:  "Vanuatu",  value:  236.299  },{  name:  "West Bank",  value:  13.565  },{  name:  "Yemen",  value:  22763.008  },{  name:  "South Africa",  value:  51452.352  },{  name:  "Zambia",  value:  13216.985  },{  name:  "Zimbabwe",  value:  13076.978  }]}]}chart.setOption(option);return chart;
}
Page({/*** 页面的初始数据*/data: {ec: {onInit: initChart}},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

其他地图同理，只不过需要把word.js 换成你需要的地图的js文件并把 option 中 geo{ map：你引入的城市 }

微信小程序使用Echarts 实现世界地图（其它地图同理）相关推荐

微信小程序给echarts图表动态赋值
微信小程序给echarts图表动态赋值接上一篇:微信小程序引入echart图表直接上例子(运行需要结合上一篇,拉至文章顶部进入): import * as echarts from '../../ ...
微信小程序利用echarts实现中国任意行政区域地图
微信小程序利用echarts实现中国任意行政区域地图前言实现克隆代码集成点击事件点击跳转代码改造尾巴前言最近微信小程序中需要绘制地图,然后点击地图可以跳转到下一层级.研究了一番,选 ...
微信小程序使用echarts绘画动态图表
微信小程序使用echarts绘画动态图表首先我们从官网下载echarts插件,路径是https://github.com/ecomfe/echarts-for-weixin,把echarts文件放到 ...
微信小程序使用echarts实时更新数据以及常见bug
** 微信小程序使用echarts实时更新数据以及常见bug ** 参考echarts官方文档:https://echarts.apache.org/zh/tutorial.html 下载小程序ech ...
微信小程序使用echarts图表，与延迟加载图表，解决echarts文件过大
微信小程序使用echarts图表,与延迟加载图表,解决echarts文件过大引入echarts组件展示echarts图表数据延迟加载图表如何解决echarts文件过大引入echarts组件 ...
微信小程序使用Echarts真机调试报错，Echarts占内存过大解决方法
Echarts真机调试报错解决办法:给组件添加force-use-old-canvas="true"属性就可以在真机调试里展示. 重点:发布线上时,一定要将这句去掉,现在只是不支 ...
UNIAPP微信小程序使用Echarts
UNIAPP微信小程序使用Echarts 1. 前言最近要在uniapp做的小程序中使用echarts,网上搜了很多教程都很麻烦,这里提供一种简便快捷CV方案. 先说下图表选型的问题,如果你 ...
微信小程序使用echarts不显示的问题
前几天在微信小程序中用echarts发现不显示,主要有一下几个可能一.没配置好json,应配置如下 {"usingComponents": {"ec-canvas&qu ...
微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题
微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题 1.微信小程序使用echarts,首先下载echarts并导入小程序项目中,因小程序后期上线对文件大小有要求,所以建议进行定制下载导入可减 ...
微信小程序使用Echarts绘制K线图与双曲线图以及实现tab切换
在微信小程序中使用Echarts需要下载相应的文件,可在这下载ec-canvas,该github里也有很多很好的例子,可自行调试学习. 本例子的目录结构: 微信小程序使用Echarts的步骤在需要引 ...

微信小程序使用Echarts 实现世界地图（其它地图同理）

微信小程序使用Echarts 实现世界地图（其它地图同理）

微信小程序使用Echarts 实现世界地图（其它地图同理）相关推荐

最新文章

热门文章