完整代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>echarts中國地圖</title>
<style>
.centerItem {
width: 856px;
height: 640px;
background-color: #fff;
margin: 110px auto 0 auto;
}
.big {
width: 100px;
height: 100px;
background: rgba(18, 139, 237, 1);
/* background:rgba(71,169,241,1);
background:rgba(165,216,246,1);
background:rgba(196,237,249,1); */
}
</style>
</head>
<body>
<!-- 中國地圖展示 -->
<div id="mapBox" class="centerItem"></div>
<!-- <div class="big"></div> -->
<!-- 引入相關文件 -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<!-- 引入 ECharts 文件 -->
<script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.js"></script>
<script src="./china.js"></script>
<script>
// 基於準備好的dom，初始化echarts實例
var mapBoxEchart = echarts.init(document.getElementById('mapBox'));
var num = Math.random(),
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 }
],
dataColor = {
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' }
]
};
//從數組中獲取最大值和最小值
var dataValue = [];
data.forEach(e => {
dataValue.push(e.value)
});
var max = Math.max.apply(null, dataValue),//數據最大值
min = Math.min.apply(null, dataValue),//數據最小值
min_max = max - min;//極差
var R = 178,//色值差
G = 98,
B = 12,
R_min = 18,
G_min = 139,
B_min = 237;
dataColor.splitList.forEach(e => {
var RED = (R / min_max * e.start) + R_min,
GREEN = (G / min_max * e.start) + G_min,
BLUE = (B / min_max * e.start) + B_min;
e.color = "rgb(" + RED + ',' + GREEN + ',' + BLUE + ")";
});
// 指定相關的配置項和數據
var mapBoxOption = {
series: [{
type: 'map',
mapType: 'china',
label: {
normal: {
show: false, //顯示省份標籤
textStyle: {
color: "#fff"
} //省份標籤字體顏色
}
},
aspectScale: 0.75,
zoom: 1.2,
itemStyle: {
normal: {
borderWidth: .5, //區域邊框寬度
borderColor: '#009fe8', //區域邊框顏色
areaColor: "#ffefd5", //區域顏色
}
},
data: data //各省地圖顏色數據依賴value
}],
dataRange: dataColor, //各省地圖顏色；start：值域開始值；end：值域結束值；label：圖例名稱；color：自定義顏色值；
};
// 使用制定的配置項和數據顯示圖表
mapBoxEchart.setOption(mapBoxOption);
// echart圖表自適應
window.addEventListener("resize", function () {
mapBoxEchart.resize();
});
</script>
</body>
</html>
效果圖
