JS + Echarts实现中国地图 China.js
China.js文件现在已经下载不到了 China.js文件已经放到末尾了 China.json以及各个省市json可以私
效果图：
1.创建容器
我在CSS里给过了宽高 所以没写 复制的时候一定要加宽高！
2.引入China.js 和 Echarts
这里Echarts用的CDN 5.3.2版本
3. 实例化代码
data_list是数据 瞎写的 建议折叠一下
(function () {
const data_list = [{
name: '江苏',
value: 0
}, {
name: '安徽',
value: 1
}, {
name: '湖北',
value: 1
}, {
name: '湖南',
value: 0
}, {
name: '广东',
value: 1
}, {
name: '浙江',
value: 1
}, {
name: '福建',
value: 1
}, {
name: '山东',
value: 1
}, {
name: '河南',
value: 4
}, {
name: '四川',
value: 0
}, {
name: '河北',
value: 0
}, {
name: '江西',
value: 0
}, {
name: '黑龙江',
value: 1
}, {
name: '陕西',
value: 0
}, {
name: '贵州',
value: 0
}, {
name: '吉林',
value: 0
}, {
name: '广西',
value: 1
}, {
name: '山西',
value: 0
}, {
name: '云南',
value: 0
}, {
name: '辽宁',
value: 0
}, {
name: '甘肃',
value: 0
}, {
name: '重庆',
value: 0
}, {
name: '内蒙古',
value: 0
}, {
name: '海南',
value: 0
}, {
name: '天津',
value: 0
}, {
name: '新疆',
value: 0
}, {
name: '上海',
value: 2
}, {
name: '宁夏',
value: 0
}, {
name: '青海',
value: 0
}, {
name: '北京',
value: 0
}, {
name: '西藏',
value: 0
}]
let new_data_list = data_list.map((item, index) => {
return item.value
})
let data_list_max = Math.max(...new_data_list);
var map_Chart = echarts.init(document.getElementById('map'));
option = {
title: {
text: '本群闸总鼠窝分布',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: (params) => {
let num
let showHtml = ''
if (isNaN(params.value)) {
num = '0'
} else {
num = params.value
}
showHtml += `
${'省份'}：${params.name}
${'鼠窝'}：${num}
`
return showHtml
}
},
dataRange: {
x: 'left',
y: 'bottom',
min: 0,
max: data_list_max,
text: ['高', '低'], // 文本，默认为数值文本
calculable: true,
inRange: {
color: ['#d1e7fe', '#1989fa'],
}
},
series: [{
name: '数据',
type: 'map',
mapType: 'china',
roam: false,
selectedMode: false,
itemStyle: {
normal: {
label: {
show: true,
textStyle: {
color: 'black'
}
}
},
emphasis: {
areaColor: '#95ec69',
label: {
show: true
}
}
},
data: data_list
}]
};
map_Chart.setOption(option)
})();China.js下载地址：
提取码：ul18
如果出现乱码情况 不用担心 正常引入使用即可
阿里云盘分享