Echarts中国地图各省份区域设置不同的颜色

红太狼 2023-10-11 15:37 75阅读 0赞

摘要：

接着《Echarts引入中国地图》续写，我们的项目需求是要求地图的背景颜色要各省份不同。看了文档同时也看了相关官网例子，写出来总结下吧，以便以后需要。

实现：

1、在series中添加data\[ \]数据

data: \[  
\{ name: '北京', selected: false, value: 1 \},  
\{ name: '天津', selected: false, value: 2 \},  
\{ name: '上海', selected: false, value: 3 \},  
\{ name: '重庆', selected: false, value: 4 \},  
\{ name: '河北', selected: false, value: 5 \},  
\{ name: '河南', selected: false, value: 6 \},  
\{ name: '云南', selected: false, value: 7 \},  
\{ name: '辽宁', selected: false, value: 8 \},  
\{ name: '黑龙江', selected: false, value: 9 \},  
\{ name: '湖南', selected: false, value: 10 \},  
\{ name: '安徽', selected: false, value: 11 \},  
\{ name: '山东', selected: false, value: 12 \},  
\{ name: '新疆', selected: false, value: 13 \},  
\{ name: '江苏', selected: false, value: 14 \},  
\{ name: '浙江', selected: false, value: 15 \},  
\{ name: '江西', selected: false, value: 16 \},  
\{ name: '湖北', selected: false, value: 17 \},  
\{ name: '广西', selected: false, value: 18 \},  
\{ name: '甘肃', selected: false, value: 19 \},  
\{ name: '山西', selected: false, value: 20 \},  
\{ name: '内蒙古', selected: false, value: 21 \},  
\{ name: '陕西', selected: false, value: 22 \},  
\{ name: '吉林', selected: false, value: 23 \},  
\{ name: '福建', selected: false, value: 24 \},  
\{ name: '贵州', selected: false, value: 25 \},  
\{ name: '广东', selected: false, value: 26 \},  
\{ name: '青海', selected: false, value: 27 \},  
\{ name: '西藏', selected: false, value: 28 \},  
\{ name: '四川', selected: false, value: 29 \},  
\{ name: '宁夏', selected: false, value: 30 \},  
\{ name: '海南', selected: false, value: 31 \},  
\{ name: '台湾', selected: false, value: 32 \},  
\{ name: '香港', selected: false, value: 33 \},  
\{ name: '澳门', selected: false, value: 34 \}  
\] //各省地图颜色数据依赖value  
2、在mapBoxOption中添加dataRange

dataRange: \{  
x: '-1000 px', //图例横轴位置  
y: '-1000 px', //图例纵轴位置  
splitList: \[  
\{ start: 1, end: 1, label: '北京', color: '\#cfc5de' \},  
\{ start: 2, end: 2, label: '天津', color: '\#f1ebd1' \},  
\{ start: 3, end: 3, label: '上海', color: '\#feffdb' \},  
\{ start: 4, end: 4, label: '重庆', color: '\#e0cee4' \},  
\{ start: 5, end: 5, label: '河北', color: '\#fde8cd' \},  
\{ start: 6, end: 6, label: '河南', color: '\#e4f1d7' \},  
\{ start: 7, end: 7, label: '云南', color: '\#fffed7' \},  
\{ start: 8, end: 8, label: '辽宁', color: '\#e4f1d7' \},  
\{ start: 9, end: 9, label: '黑龙江', color: '\#e4f1d7' \},  
\{ start: 10, end: 10, label: '湖南', color: '\#fffed7' \},  
\{ start: 11, end: 11, label: '安徽', color: '\#fffed8' \},  
\{ start: 12, end: 12, label: '山东', color: '\#dccee7' \},  
\{ start: 13, end: 13, label: '新疆', color: '\#fffed7' \},  
\{ start: 14, end: 14, label: '江苏', color: '\#fce8cd' \},  
\{ start: 15, end: 15, label: '浙江', color: '\#ddceeb' \},  
\{ start: 16, end: 16, label: '江西', color: '\#e4f1d3' \},  
\{ start: 17, end: 17, label: '湖北', color: '\#fde8cd' \},  
\{ start: 18, end: 18, label: '广西', color: '\#fde8cd' \},  
\{ start: 19, end: 19, label: '甘肃', color: '\#fde8cd' \},  
\{ start: 20, end: 20, label: '山西', color: '\#fffdd6' \},  
\{ start: 21, end: 21, label: '内蒙古', color: '\#ddcfe6' \},  
\{ start: 22, end: 22, label: '陕西', color: '\#fad8e9' \},  
\{ start: 23, end: 23, label: '吉林', color: '\#fce8cd' \},  
\{ start: 24, end: 24, label: '福建', color: '\#fad8e8' \},  
\{ start: 25, end: 25, label: '贵州', color: '\#fad8e8' \},  
\{ start: 26, end: 26, label: '广东', color: '\#ddcfe8' \},  
\{ start: 27, end: 27, label: '青海', color: '\#fad8e9' \},  
\{ start: 28, end: 28, label: '西藏', color: '\#ddcfe6' \},  
\{ start: 29, end: 29, label: '四川', color: '\#e4f1d5' \},  
\{ start: 30, end: 30, label: '宁夏', color: '\#fefcd5' \},  
\{ start: 31, end: 31, label: '海南', color: '\#fad8e9' \},  
\{ start: 32, end: 32, label: '台湾', color: '\#fce8cd' \},  
\{ start: 33, end: 33, label: '香港', color: '\#dc9bbb' \},  
\{ start: 34, end: 34, label: '澳门', color: '\#e0f7cc' \},  
\]  
\}, //各省地图颜色；start：值域开始值；end：值域结束值；label：图例名称；color：自定义颜色值；  
3、完整的代码如下

<!DOCTYPE html>  
<html>  
  
<head>  
<meta charset="utf-8">  
<title>echarts中国地图</title>  
<style>  
.centerItem \{  
width: 856px;  
height: 640px;  
background-color: \#003077;  
margin: 110px auto 0 auto;  
\}  
</style>  
</head>  
  
<body>  
  
<div id="mapBox" class="centerItem"></div>  
  
  
<script src="js/jquery-3.2.1.min.js"></script>  
  
<script src="js/echarts.js"></script>  
<script src="js/china.js"></script>  
  
<script>  
// 基于准备好的dom，初始化echarts实例  
var mapBoxEchart = echarts.init(document.getElementById('mapBox'));  
  
// 指定相关的配置项和数据  
var mapBoxOption = \{  
series: \[\{  
type: 'map',  
mapType: 'china',  
label: \{  
normal: \{  
show: true, //显示省份标签  
textStyle: \{  
color: "blue"  
\} //省份标签字体颜色  
\},  
emphasis: \{ //对应的鼠标悬浮效果  
show: false,  
textStyle: \{  
color: "\#800080"  
\}  
\}  
\},  
aspectScale: 0.75,  
zoom: 1.2,  
itemStyle: \{  
normal: \{  
borderWidth: .5, //区域边框宽度  
borderColor: '\#009fe8', //区域边框颜色  
areaColor: "\#ffefd5", //区域颜色  
\},  
emphasis: \{  
borderWidth: .5,  
borderColor: '\#4b0082',  
areaColor: "\#ffdead",  
\}  
\},  
data: \[  
\{ name: '北京', selected: false, value: 1 \},  
\{ name: '天津', selected: false, value: 2 \},  
\{ name: '上海', selected: false, value: 3 \},  
\{ name: '重庆', selected: false, value: 4 \},  
\{ name: '河北', selected: false, value: 5 \},  
\{ name: '河南', selected: false, value: 6 \},  
\{ name: '云南', selected: false, value: 7 \},  
\{ name: '辽宁', selected: false, value: 8 \},  
\{ name: '黑龙江', selected: false, value: 9 \},  
\{ name: '湖南', selected: false, value: 10 \},  
\{ name: '安徽', selected: false, value: 11 \},  
\{ name: '山东', selected: false, value: 12 \},  
\{ name: '新疆', selected: false, value: 13 \},  
\{ name: '江苏', selected: false, value: 14 \},  
\{ name: '浙江', selected: false, value: 15 \},  
\{ name: '江西', selected: false, value: 16 \},  
\{ name: '湖北', selected: false, value: 17 \},  
\{ name: '广西', selected: false, value: 18 \},  
\{ name: '甘肃', selected: false, value: 19 \},  
\{ name: '山西', selected: false, value: 20 \},  
\{ name: '内蒙古', selected: false, value: 21 \},  
\{ name: '陕西', selected: false, value: 22 \},  
\{ name: '吉林', selected: false, value: 23 \},  
\{ name: '福建', selected: false, value: 24 \},  
\{ name: '贵州', selected: false, value: 25 \},  
\{ name: '广东', selected: false, value: 26 \},  
\{ name: '青海', selected: false, value: 27 \},  
\{ name: '西藏', selected: false, value: 28 \},  
\{ name: '四川', selected: false, value: 29 \},  
\{ name: '宁夏', selected: false, value: 30 \},  
\{ name: '海南', selected: false, value: 31 \},  
\{ name: '台湾', selected: false, value: 32 \},  
\{ name: '香港', selected: false, value: 33 \},  
\{ name: '澳门', selected: false, value: 34 \}  
\] //各省地图颜色数据依赖value  
\}\],  
dataRange: \{  
x: '-1000 px', //图例横轴位置  
y: '-1000 px', //图例纵轴位置  
splitList: \[  
\{ start: 1, end: 1, label: '北京', color: '\#cfc5de' \},  
\{ start: 2, end: 2, label: '天津', color: '\#f1ebd1' \},  
\{ start: 3, end: 3, label: '上海', color: '\#feffdb' \},  
\{ start: 4, end: 4, label: '重庆', color: '\#e0cee4' \},  
\{ start: 5, end: 5, label: '河北', color: '\#fde8cd' \},  
\{ start: 6, end: 6, label: '河南', color: '\#e4f1d7' \},  
\{ start: 7, end: 7, label: '云南', color: '\#fffed7' \},  
\{ start: 8, end: 8, label: '辽宁', color: '\#e4f1d7' \},  
\{ start: 9, end: 9, label: '黑龙江', color: '\#e4f1d7' \},  
\{ start: 10, end: 10, label: '湖南', color: '\#fffed7' \},  
\{ start: 11, end: 11, label: '安徽', color: '\#fffed8' \},  
\{ start: 12, end: 12, label: '山东', color: '\#dccee7' \},  
\{ start: 13, end: 13, label: '新疆', color: '\#fffed7' \},  
\{ start: 14, end: 14, label: '江苏', color: '\#fce8cd' \},  
\{ start: 15, end: 15, label: '浙江', color: '\#ddceeb' \},  
\{ start: 16, end: 16, label: '江西', color: '\#e4f1d3' \},  
\{ start: 17, end: 17, label: '湖北', color: '\#fde8cd' \},  
\{ start: 18, end: 18, label: '广西', color: '\#fde8cd' \},  
\{ start: 19, end: 19, label: '甘肃', color: '\#fde8cd' \},  
\{ start: 20, end: 20, label: '山西', color: '\#fffdd6' \},  
\{ start: 21, end: 21, label: '内蒙古', color: '\#ddcfe6' \},  
\{ start: 22, end: 22, label: '陕西', color: '\#fad8e9' \},  
\{ start: 23, end: 23, label: '吉林', color: '\#fce8cd' \},  
\{ start: 24, end: 24, label: '福建', color: '\#fad8e8' \},  
\{ start: 25, end: 25, label: '贵州', color: '\#fad8e8' \},  
\{ start: 26, end: 26, label: '广东', color: '\#ddcfe8' \},  
\{ start: 27, end: 27, label: '青海', color: '\#fad8e9' \},  
\{ start: 28, end: 28, label: '西藏', color: '\#ddcfe6' \},  
\{ start: 29, end: 29, label: '四川', color: '\#e4f1d5' \},  
\{ start: 30, end: 30, label: '宁夏', color: '\#fefcd5' \},  
\{ start: 31, end: 31, label: '海南', color: '\#fad8e9' \},  
\{ start: 32, end: 32, label: '台湾', color: '\#fce8cd' \},  
\{ start: 33, end: 33, label: '香港', color: '\#dc9bbb' \},  
\{ start: 34, end: 34, label: '澳门', color: '\#e0f7cc' \}  
\]  
\}, //各省地图颜色；start：值域开始值；end：值域结束值；label：图例名称；color：自定义颜色值；  
\};  
// 使用制定的配置项和数据显示图表  
mapBoxEchart.setOption(mapBoxOption);  
// echart图表自适应  
window.addEventListener("resize", function() \{  
mapBoxEchart.resize();  
\});  
</script>  
  
</body>  
  
</html>