Echarts美国地图

这里主要对这个官网案例进行讲解：

https://echarts.apache.org/examples/en/editor.html?c=map-usa

完整项目包文件下载（包含echarts.min.js与USA.json文件；注意如果用自己的echarts文件，需要地图组件才可以绘制出来）

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"/><title>USA Map</title>
</head>
<script src="js/echarts.min.js"></script>
<script src="js/jquery-3.2.1.js"></script>
<body>
<div id="USAMap" style="width: 1600px;height:800px;"></div>
</body><script>// 美国地图USAMap();function USAMap() {var myChart = echarts.init(document.getElementById("USAMap"));// 开启加载loading的动画myChart.showLoading();// jquery读取json文件$.get('geo/USA.json', function (usaJson) {// 隐藏loading的动画myChart.hideLoading();echarts.registerMap('USA', usaJson, {// 把阿拉斯加移到美国主大陆左下方Alaska: {left: -131,top: 25,width: 15},// 夏威夷Hawaii: {left: -110,top: 28,width: 5},// 波多黎各（因为名字有空格，所以写为字符串的形式）'Puerto Rico': {left: -76,top: 26,width: 2}});option = {title: {text: 'USA Population Estimates (2012)',subtext: 'Data from www.census.gov',sublink: 'http://www.census.gov/popest/data/datasets.html',left: 'right'},// 提示框组件tooltip: {trigger: 'item',// 浮层显示的延迟showDelay: 0,// 提示框浮层的移动动画过渡时间transitionDuration: 0.2,// 按要求的格式显示提示框formatter: function (params) {var value = (params.value + '').split('.');value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');return params.seriesName + '<br/>' + params.name + ': ' + value;}},// 可视映射visualMap: {left: 'right',min: 500000,max: 38000000,// 颜色区间inRange: {color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']},// 文本，默认为数值文本text: ['High', 'Low'],// 显示拖拽用的手柄calculable: true},// 工具盒toolbox: {show: true,//orient: 'vertical',left: 'left',top: 'top',feature: {// 数据视图dataView: {readOnly: false},// 还原restore: {},// 保存为图片saveAsImage: {}}},series: [{name: 'USA PopEstimates',type: 'map',// 开启鼠标缩放和平移漫游roam: true,map: 'USA',// 显示标签emphasis: {label: {show: true}},// 文本位置修正textFixed: {Alaska: [20, -20]},data: [{name: 'Alabama', value: 4822023},{name: 'Alaska', value: 731449},{name: 'Arizona', value: 6553255},{name: 'Arkansas', value: 2949131},{name: 'California', value: 38041430},{name: 'Colorado', value: 5187582},{name: 'Connecticut', value: 3590347},{name: 'Delaware', value: 917092},{name: 'District of Columbia', value: 632323},{name: 'Florida', value: 19317568},{name: 'Georgia', value: 9919945},{name: 'Hawaii', value: 1392313},{name: 'Idaho', value: 1595728},{name: 'Illinois', value: 12875255},{name: 'Indiana', value: 6537334},{name: 'Iowa', value: 3074186},{name: 'Kansas', value: 2885905},{name: 'Kentucky', value: 4380415},{name: 'Louisiana', value: 4601893},{name: 'Maine', value: 1329192},{name: 'Maryland', value: 5884563},{name: 'Massachusetts', value: 6646144},{name: 'Michigan', value: 9883360},{name: 'Minnesota', value: 5379139},{name: 'Mississippi', value: 2984926},{name: 'Missouri', value: 6021988},{name: 'Montana', value: 1005141},{name: 'Nebraska', value: 1855525},{name: 'Nevada', value: 2758931},{name: 'New Hampshire', value: 1320718},{name: 'New Jersey', value: 8864590},{name: 'New Mexico', value: 2085538},{name: 'New York', value: 19570261},{name: 'North Carolina', value: 9752073},{name: 'North Dakota', value: 699628},{name: 'Ohio', value: 11544225},{name: 'Oklahoma', value: 3814820},{name: 'Oregon', value: 3899353},{name: 'Pennsylvania', value: 12763536},{name: 'Rhode Island', value: 1050292},{name: 'South Carolina', value: 4723723},{name: 'South Dakota', value: 833354},{name: 'Tennessee', value: 6456243},{name: 'Texas', value: 26059203},{name: 'Utah', value: 2855287},{name: 'Vermont', value: 626011},{name: 'Virginia', value: 8185867},{name: 'Washington', value: 6897012},{name: 'West Virginia', value: 1855413},{name: 'Wisconsin', value: 5726398},{name: 'Wyoming', value: 576412},{name: 'Puerto Rico', value: 3667084}]}]};myChart.setOption(option);});}</script></html>

附上一张最后的效果图（需要使用开发工具运行在本地服务器上，不然直就是一直loading）：

Echarts美国地图相关推荐

echarts美国地图 usa.json文件
从echarts官网中使用与美国地图相关工具,需要长时间加载在线资源,处于loading状态.下载此文件,将echarts资源中的usa.json资源路径换成本地文件,即可快速打开 usa.json文 ...
R语言使用ggplot2包和maps包可视化美国地图、使用北美犯罪率数据为不同区域的地图渲染（颜色深浅区分犯罪率高低、US map colored by violent crime rates）
R语言使用ggplot2包和maps包可视化美国地图.使用北美犯罪率数据为不同区域的地图渲染(颜色深浅区分犯罪率高低.US map colored by violent crime rates) 目录
地图统计_博客城市访问量统计并且通过Echarts+百度地图展示
本篇讲解一下如何在Vue 中使用 Echarts + 百度地图统计博客访问量并且通过QQWry 解析 ip 地址利用Echarts 展示出来效果图如下: 1.纯真Ip地址库 QQWry 这 ...
java echarts 散点图,echarts在地图上绘制散点图（任意点）
项目需求:在省份地图上绘制散点图,散点位置不一定是哪个城市或哪个区县,即任意点通过查询官网文档,找到一个与需求类似的Demo:https://www.echartsjs.com/gallery/ed ...
ECharts 实现地图散点图上（转载）
转载来源:https://efe.baidu.com/blog/echarts-map-tutorial/ ECharts 实现地图散点图(上) 小红 2016-04-28 ECharts, 教 ...
基于ECharts+百度地图开发散点扩散图
基于ECharts+百度地图开发散点扩散图用ECharts和百度地图,开发散点扩散图,显示TOP5的点. 1.引入Echarts3.2.3 js文件下载地址为:http://echarts.bai ...
echarts实现地图飞线
echarts实现地图飞线 echarts画地图 echarts画地图由于地图需要省市区经纬度,需要geoJSON数据,我们使用aliyun官方的JSON数据,以中国地图为例(链接: link.). ...
html 网页地图集制作ECHARTS,在页面使用echarts的地图（解决地图不完整）
测试环境:IDEA+Tomcat7 谷歌浏览器创建好web工程,编写jsp页面,在自己编写的JSP页面上导包现在echarts停止了在其网站上下载地图脚本,直接通过src引用网站上的china.j ...
Echarts中国地图各省份区域设置不同的颜色
摘要: 接着<Echarts引入中国地图>续写,我们的项目需求是要求地图的背景颜色要各省份不同.看了文档同时也看了相关官网例子,写出来总结下吧,以便以后需要. 实现: 1.在series中 ...
记录下echarts Map3D地图渐变
#记录下echarts Map3D地图底纹渐变的option echarts-gl模式下itemStyle.color: new echarts.graphic.LinearGradient实测渐变没 ...

Echarts美国地图

Echarts美国地图相关推荐

最新文章

热门文章