echarts加载世界地图并展示个人数据
需求
之前基于GDELT抓取过部分一带一路沿线国家的新闻数据，对各个国家的新闻数据量进行了统计，打算做一张图进行直观的显示。
解决方案
懒得用ArcGIS来做了，想要磨练下代码水平，因此选择Javascript，调用Echarts进行绘制
由于之前调用Echarts的代码无法使用，所以这次不打算在线调用Echarts js文件，避免更新后原有代码无法使用的问题，因此将echarts.js下载到本地，此外，下载了jquery.js文件(点击下载)、world.json文件(显示世界地图用，点击下载)。
由于Chrome浏览器下加载本地文件会有跨域问题，因此基于参考文献(见文末)，采用Jsonp方式加载文件解决问题。
首先将world.json文件备份，然后打开world.json文件进行修改：
geoWorldData()，其中geoWorldData为函数名，在加载文件时会用到，将world.json文件内容置于geoWorldData函数括号中。
即 'geoWorldData(' + 文件内容 + ')'
由于我设置了显示国家名称，那些没有数据的国家也会显示其名称，而且还是英文的，搞得图中很乱，因此从world.json中挑选出代码中涉及到的国家，删除了其他无关国家，使图更为精简，文末有示例截图。
代码
<html>
<head>
<title>沿线国家新闻事件空间分布图title>
head>
<body>
<div id="main" style="width: 1500px;height: 1000px;">div>
body>
<script type="text/javascript" src="js/echarts/echarts.js">script>
<script type="text/javascript" src="js/jquery.js">script>
<script type="text/javascript">
function geoWorldData(data) {
var myChart = echarts.init(document.getElementById("main"));
echarts.registerMap('world', data);
option = {
title: {
text: '“一带一路”沿线国家时空新闻全文数据集-空间分布图',
left: 'center'
},
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.name + ': ' + value;
}
},
visualMap: {
left: 'right',
top: 'center',
min: 10000,
max: 2000000,
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: 'Count of news of Countries',
type: 'map',
map: 'world',
roam: true,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
//进行设置，显示国家名称时同时显示其新闻数量
data:[
{name: '巴林', value: 90999, label: {normal: {show: true,formatter: function (params) {return params.name + "\n" + params.value}}}},
{name: '孟加拉', value: 267328, label: {normal: {show: true,formatter: function (params) {return params.name + "\n" + params.value}}}},
{name: '缅甸', value: 82251, label: {normal: {show: true,formatter: function (params) {return params.name + "\n" + params.value}}}},
{name: '文莱', value: 62649, label: {normal: {show: true,formatter: function (params) {return params.name + "\n" + params.value}}}},
{name: '柬埔寨', value: 90932, label: {normal: {show: true,formatter: function (params) {return params.name + "\n" + params.value}}}},
{name: '斯里兰卡', value: 199552, label: {normal: {show: true,formatter: function (params) {return params.name + "\n" + params.value}}}},
{name: '朝鲜', value: 174404, label: {normal: {show: true,formatter: function (params) {return params.name + "\n" + params.value}}}},
{name: '黎巴嫩', value: 222165, label: {normal: {show: true,formatter: function (params) {return params.name + "\n" + params.value}}}},
{name: '阿曼', value: 55353, label: {normal: {show: true,formatter: function (params) {return params.name + "\n" + params.value}}}},
{name: '巴基斯坦', value: 276990, label: {normal: {show: true,formatter: function (params) {return params.name + "\n" + params.value}}}},
{name: '菲律宾', value: 508735, label: {normal: {show: true,formatter: function (params) {return params.name + "\n" + params.value}}}},
{name: '沙特', value: 158430, label: {normal: {show: true,formatter: function (params) {return params.name + "\n" + params.value}}}},
{name: '新加坡', value: 234291, label: {normal: {show: true,formatter: function (params) {return params.name + "\n" + params.value}}}},
{name: '塔吉克斯坦', value: 26984, label: {normal: {show: true,formatter: function (params) {return params.name + "\n" + params.value}}}},
{name: '土耳其', value: 614145, label: {normal: {show: true,formatter: function (params) {return params.name + "\n" + params.value}}}},
{name: '土库曼斯坦', value: 22968, label: {normal: {show: true,formatter: function (params) {return params.name + "\n" + params.value}}}},
{name: '乌兹别克斯坦', value: 13991, label: {normal: {show: true,formatter: function (params) {return params.name + "\n" + params.value}}}},
{name: '越南', value: 261792, label: {normal: {show: true,formatter: function (params) {return params.name + "\n" + params.value}}}},
{name: '巴勒斯坦', value: 100938, label: {normal: {show: true,formatter: function (params) {return params.name + "\n" + params.value}}}},
{name: '印度', value: 2208392, label: {normal: {show: true,formatter: function (params) {return params.name + "\n" + params.value}}}}
],
// 自定义名称映射，以显示中文标注
nameMap: {
'Bahrain': '巴林',
'Bangladesh': '孟加拉',
'Myanmar': '缅甸',
'Brunei': '文莱',
'Cambodia': '柬埔寨',
'Sri Lanka': '斯里兰卡',
'Iran': '伊朗',
'Israel': '以色列',
'Iraq': '伊拉克',
'Dem. Rep. Korea': '朝鲜',
'Korea': '韩国',
'Kuwait': '科威特',
'Lao PDR': '老挝',
'Lebanon': '黎巴嫩',
'Oman': '阿曼',
'Pakistan': '巴基斯坦',
'Philippines': '菲律宾',
'Saudi Arabia': '沙特',
'Singapore': '新加坡',
'Tajikistan': '塔吉克斯坦',
'Turkey': '土耳其',
'Turkmenistan': '土库曼斯坦',
'Uzbekistan': '乌兹别克斯坦',
'Vietnam': '越南',
'Palestine': '巴勒斯坦',
'Yemen': '也门',
'India': '印度',
'Syria': '叙利亚',
'Jordan': '约旦',
'Afghanistan': '阿富汗',
'China': '中国',
'Japan': '日本',
'Kyrgyzstan': '吉尔吉斯斯坦',
'Nepal': '尼泊尔',
'Bhutan': '不丹',
'Malaysia': '马来西亚',
'Indonesia': '印度尼西亚',
'Thailand': '泰国',
'Kazakhstan': '哈萨克斯坦',
'Siachen Glacier': '克什米尔',
'United Arab Emirates': '阿联酋',
}
}
]
};
myChart.setOption(option);
}
script>
<script type="text/javascript" src="data/world_SilkRoad.json?callback=geoWorldData">script>
html>
参考文献：
- 通过Ajax读取本地json文件，提示跨域的原因和解决方法
- js读取本地json/txt/xml存在跨越问题，可以用jsonp 读取本地json文件