如何简单快速的做出一个世界地图,并且显示各个省份名称数据；
用 Echarts 即可以简单快速的写出；
除导入 echarts.js 外,还需要导入 world.js（现在官方不提供下载，需要自行下载，也可以留言获取链接）。
默认地图上各个国家的名称为英文,对应数据也需要依据英文名称来定义,如果需要中文国家名称,也可以再 echarts 的 option 中使用 nameMap 映射中文名称;
成品预览图：
源码：
<!DOCTYPE html>
<html>
<head>
首先，引入jquery.js echarts.js china.js(必要)
<script src="/jquery.js"></script>
<script src="echarts.min.js"></script>
<script src="china.js"></script>
<head>
<body>
<!--<创建一个DIV容器 方便初始化-->
<div id="world-map" style="width:1300px;height:900px;"></div>
</body>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('world-map'));
function randomData() {
return Math.round(Math.random() * 1000);
}
var data = [{
name: 'Russia',
value1: randomData(),
value2: randomData(),
}, {
name: 'China',
value1: randomData(),
value2: randomData(),
}, {
name: 'Canada',
value1: randomData(),
value2: randomData(),
}, {
name: 'United States',
value1: randomData(),
value2: randomData(),
}, {
name: 'Greenland',
value1: randomData(),
value2: randomData(),
}, {
name: 'Australia',
value1: randomData(),
value2: randomData(),
}, {
name: 'Brazil',
value1: randomData(),
value2: randomData(),
}, {
name: 'Argentina',
value1: randomData(),
value2: randomData(),
}, {
name: 'Mongolia',
value1: randomData(),
value2: randomData(),
}, {
name: 'Kazakhstan',
value1: randomData(),
value2: randomData(),
}, {
name: 'Mexico',
value1: randomData(),
value2: randomData(),
}, {
name: 'India',
value1: randomData(),
value2: randomData(),
}, {
name: 'Sudan',
value1: randomData(),
value2: randomData(),
}, {
name: 'Libya',
value1: randomData(),
value2: randomData(),
}, {
name: 'Indonesia',
value1: randomData(),
value2: randomData(),
}, {
name: 'South Africa',
value1: randomData(),
value2: randomData(),
}, {
name: 'Congo',
value1: randomData(),
value2: randomData(),
}, {
name: 'Algeria',
value1: randomData(),
value2: randomData(),
}, {
name: 'Mauritania',
value1: randomData(),
value2: randomData(),
}, {
name: 'Peru',
value1: randomData(),
value2: randomData(),
}, {
name: 'Chile',
value1: randomData(),
value2: randomData(),
}, {
name: 'Bolivia',
value1: randomData(),
value2: randomData(),
}, {
name: 'Columbia',
value1: randomData(),
value2: randomData(),
}, {
name: 'Angola',
value1: randomData(),
value2: randomData(),
}, {
name: 'Saudi Arabia',
value1: randomData(),
value2: randomData(),
}, {
name: 'Niger',
value1: randomData(),
value2: randomData(),
}, {
name: 'Iran',
value1: randomData(),
value2: randomData(),
}];
var resultdata0 = [];
var sum0 = 0;
var titledata = [];
for(var i = 0; i < data.length; i++) {
var d0 = {
name: data[i].name,
value: data[i].value1 + data[i].value2
};
titledata.push(data[i].name)
resultdata0.push(d0);
sum0 += data[i].value1 + data[i].value2;
}
function NumDescSort(a, b) {
return a.value - b.value;
}
resultdata0.sort(NumDescSort);
var option = {
title: [{ //标题
text: '销售量统计',
subtext: '纯属虚构',
left: 'center'
}, { //右上角全部
text: '合计 : ' + sum0,
left: 'center',
top: 50,
width: 100,
textStyle: {
color: '#555',
fontSize: 16
}
}],
tooltip: {
trigger: 'item'
},
visualMap: { //左下角拉条
min: 0,
max: 2500,
left: '12%',
bottom: '25%',
text: ['高', '低'],
calculable: true,
colorLightness: [0.2, 100],
color: ['#ff0000', '#FFB9B9'],
dimension: 0
},
toolbox: { //右边工具栏
show: true,
orient: 'vertical',
// left: 'right',
// top: 'center',
feature: {
dataView: {
readOnly: false
},
restore: {},
saveAsImage: {}
}
},
grid: { //右边的柱状图
right: '10%',
left: '10%',
top: '80%',
bottom: '2%',
// height:'30%',
// width: '30%'
},
xAxis: [{
position: 'top',
type: 'category',
boundaryGap: false,
splitLine: {
show: true
},
axisLabel: {
//rotate: 45,//旋转45度角
textStyle: {}
}
}],
yAxis: [{
type: 'value',
data: titledata,
axisTick: {
alignWithLabel: true
}
}],
barWidth: 30,
series: [{ //地图
z: 1,
name: '全部',
type: 'map',
map: 'world',
left: '5%',
right: '5%',
top: '10%',
bottom: '30%',
// height: '50%',
// width: '50%',
zoom: 1,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
//roam: true,
data: resultdata0
}, { //柱状图
name: '全部',
z: 2,
type: 'bar',
barWidth: '%10',
label: {
normal: {
show: true
},
emphasis: {
show: true,
}
},
itemStyle: {
//鼠标悬浮时的颜色
emphasis: {
color: "rgb(254,153,78)"
}
},
data: resultdata0
}]
};
myChart.setOption(option);
</script>
</html>
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于