1、在HTML里面引入echarts.js
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>2、在HTML里面引入构建中国地图的china.js
<script src="china.js"></script>3、案例实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全国客户分布</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="china.js"></script>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f4f8; /* 更柔和的背景色 */
margin: 0;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center; /* 中心对齐 */
}
h1 {
text-align: center;
color: #2c3e50; /* 深色调的标题 */
margin-bottom: 5px; /* 添加底部间距 */
font-size: 26px; /* 增加字体大小 */
}
h2 {
color: #34495e; /* 暗蓝色的副标题 */
margin-bottom: 20px; /* 添加底部间距 */
font-size: 18px; /* 副标题字体大小 */
}
#main {
width: 100%;
height: 60vh; /* 使用视口高度 */
min-height: 400px; /* 最小高度以保证可见性 */
border: 2px solid #bdc3c7; /* 更为柔和的边框颜色 */
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
background-color: white; /* 图表背景颜色 */
transition: box-shadow 0.3s; /* 增加过渡效果 */
}
#main:hover {
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* 鼠标悬停时的阴影效果 */
}
.tooltip {
background-color: rgba(255, 255, 255, 0.9); /* 更清晰的背景 */
border: 1px solid #2980b9; /* 更显眼的边框颜色 */
border-radius: 5px;
padding: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 工具提示阴影 */
}
.tooltip strong {
color: #2980b9; /* 强调信息颜色 */
}
/* 新增的小屏幕响应式样式 */
@media (max-width: 600px) {
#main {
height: 40vh; /* 小屏幕下的高度调整 */
}
}
</style>
</style>
</head>
<body>
<h1>全国客户分布</h1>
<div id="main"></div>
<script>
const data_list = [
{ name: '江苏', value: 192836 },
{ name: '安徽', value: 118491 },
{ name: '广东', value: 250000 },
{ name: '浙江', value: 210000 },
{ name: '北京', value: 1765 },
];
const maxThreshold = 200000;
const option = {
title: {
text: '全国客户分布',
subtext: '数据源：内部数据',
left: 'center',
textStyle: {
color: '#333',
fontSize: 22,
},
subtextStyle: {
color: '#666',
fontSize: 14,
}
},
tooltip: {
trigger: 'item',
formatter: function(params) {
return `<div class="tooltip">
<strong>名称：</strong> ${params.name}<br/>
<strong>数值：</strong> ${isNaN(params.value) ? 0 : params.value}
</div>`;
}
},
visualMap: {
min: 0,
max: Math.max(...data_list.map(item => item.value)),
left: 'left',
bottom: 'bottom',
text: ['高', '低'],
calculable: true,
inRange: {
color: ['#00ffff', '#91c9ff', '#0096ff', '#005cbf'] // 蓝色渐变色
},
outOfRange: {
color: ['#e0e0e0'] // 超出范围的地区颜色
}
},
series: [
{
name: '数据',
type: 'map',
mapType: 'china',
roam: false,
itemStyle: {
normal: { label: { show: true } },
emphasis: {
label: { show: true },
areaColor: '#ffe066' // 高亮选中的省份
}
},
data: data_list.map(item => ({
name: item.name,
value: item.value,
itemStyle: {
areaColor: item.value > maxThreshold ? '#ff6600' : null // 根据值自动高亮
}
}))
}
]
};
const myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
// 自适应大小
window.onresize = function() {
myChart.resize();
};
</script>
</body>
</html>
4、实现效果
后台数据自行对接即可
