echarts画中国地图并上色

时间:2024-03-09 17:24:33

任务是画一个中国地图,并在指定区域上颜色,学姐说用arcgis画,乖乖,4个g的安装文件,算了,

还是echarts大法好。。如果想熟悉这个牛X的工具,请移步https://www.w3cschool.cn/echarts_tutorial/

如果是写论文作图需要添加应用哦

 

最终效果如下:

参考了这个网址:https://www.cnblogs.com/luna666/p/9007263.html

另外还有个百度官方的例子:http://www.echartsjs.com/gallery/editor.html?c=scatter-map

代码如下:

主要要下载好echarts.js和china.js这两个js文件,放在和html同级目录下

echarts.js在官网下载即可http://echarts.baidu.com/,或cdn https://cdnjs.com/libraries/echarts

 china.js 下载地址是 https://github.com/Luna829/incubator-echarts/blob/master/map/js/china.js

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>echarts中国地图</title>
<script type="text/javascript" src="echarts.js" ></script>
<script type="text/javascript" src="china.js" ></script>
</head>
<body>
<div id="main" style="width: 940px;height:660px;border:1px solid #ccc;padding:10px;"></div>

<script>
var mydata = [
{name: \'*\',value: 501 },
{name: \'吉林\',value: 401 },
{name: \'辽宁\',value: 401 },
{name: \'河北\',value: 401 },
{name: \'天津\',value: 401 },
{name: \'北京\',value: 401 },
{name: \'山西\',value: 401 },
{name: \'陕西\',value: 401 },
{name: \'山东\',value: 101 },
{name: \'河南\',value: 101 },
{name: \'江苏\',value: 101 },
{name: \'上海\',value: 101 },
{name: \'安徽\',value: 101 },
{name: \'浙江\',value: 301 },
{name: \'江西\',value: 301 },
{name: \'湖北\',value: 301 },
{name: \'湖南\',value: 301 },
{name: \'四川\',value: 301 },
{name: \'贵州\',value: 301 },
{name: \'重庆\',value: 301 },
{name: \'海南\',value: 201 },
{name: \'*\',value: 201 },
{name: \'香港\',value: 201 },
{name: \'澳门\',value: 201 },
{name: \'广东\',value: 201 },
{name: \'福建\',value: 201 },
{name: \'广西\',value: 201 },
{name: \'云南\',value: 201 },
];

var optionMap = {
backgroundColor: \'#FFFFFF\',
title: {
text: \'Ecological zones of different geotypes and immigrant zone of temperate genotypes in China\',
subtext: \' cotton bollworm\',
x:\'center\'
},
tooltip : {
trigger: \'item\'
},

//左侧小导航图标
visualMap: {
show : true,
x: \'left\',
y: \'center\',
splitList: [
{start: 500, end:600},{start: 400, end: 500},
{start: 300, end: 400},{start: 200, end: 300},
{start: 100, end: 200},
],
color: [\'#4F94CD\', \'#CD5C5C\',\'#9C9C9C\', \'#85daef\', \'#458B74\',]
},

//配置属性
series: [{
name: \'数据\',
type: \'map\',
mapType: \'china\',
roam: true,
label: {
normal: {
show: true //省份名称
},
emphasis: {
show: false
}
},
data:mydata //数据
}]
};
//初始化echarts实例
var myChart = echarts.init(document.getElementById(\'main\'));

//使用制定的配置项和数据显示图表
myChart.setOption(optionMap);

</script>
</body>
</html>