

热力图代码(动态的在附件):
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="UTF-8">
<title>中国地图热力图</title>
<!-- 引入 ECharts -->
<script src="echarts.js"></script>
<!-- 引入中国地图扩展 -->
<script src="china.js"></script>
</head>
<body style="height: 100%; margin: 0;">
<div id="map" style="height: 100%"></div>
<script>
// 初始化 ECharts
var chart = echarts.init(document.getElementById('map'));
// 示例数据:每个省份的数值
var data = [
{ name: '北京', value: 120 },
{ name: '上海', value: 200 },
{ name: '广东', value: 300 },
{ name: '江苏', value: 180 },
{ name: '浙江', value: 250 },
{ name: '四川', value: 90 },
{ name: '湖北', value: 130 },
{ name: '湖南', value: 110 },
{ name: '山东', value: 210 },
{ name: '河南', value: 160 }
];
// 配置项
var option = {
title: {
text: '全国热力图',
left: 'center'
},
tooltip: {
trigger: 'item'
},
visualMap: {
min: 0,
max: 1000,
left: 'left',
inRange: {
color: ['#ffffff', '#f93205']
},
text: ['高值', '低值'],
calculable: true
},
geo: {
map: 'china',
type: 'map',
roam: true,
label: {
show: true,
color: '#fff'
},
itemStyle: {
areaColor: '#2a333d',
borderColor: '#111'
}
},
series: [{
name: '数值',
type: 'map',
map: 'china',
roam: false,
label: {
show: true
},
data: data,
}]
};
// 使用配置项渲染图表
chart.setOption(option);
</script>
</body>
</html>附件(demo是热力图、line是动态图):