// 引入echarts文件和地图文件
<script src="./echarts.js"></script>
<script src="./china.js"></script>
let regions = [{
name: '中原',
itemStyle: {
normal: { areaColor: 'blue' }
}
}, {
name: '北京',
itemStyle: {
normal: { areaColor: '#f44336' }
}
}, {
name: '新疆',
itemStyle: {
emphasis: { areaColor: '#f44336' }
}
}]
var mychart = echarts.init(document.querySelector('#map'));
var option = {
backgroundColor:'#404a59', //设置地图外的背景颜色
title: { // 标题配置
text: '地图demo',
subtext: 'api测试', // 子标题
textStyle: {
color: '#e57373',
fontWeight: 'normal',
fontSize: 20,
lineHeight: 30
},
subtextStyle: {
color: '#42a5f5',
fontSize: 15
},
left: 'center', // 居中显示,可设置数值
}
geo: { // 地图组件配置
map: 'china', // 选择地图
label: { // 绑定文本的设置
normal: { // 初始状态配置
fontSize: 13
}
emphasis: { // 选中板块的配置,api与normal相同
show: true, // 是否显示文本
color: '#fff',
},
formatter: '{a}ok' // 标签显示内容,字符创与函数两种格式,附带多种变量用法↓
// https://echarts.apache.org/zh/option.html#geo.label.formatter
},
roam: true, //可缩放和平移
scaleLimit: { //缩放比例
min: 1,
max: 2
},
itemStyle: { // 选中板块配置
normal: { // 初始样式
areaColor: '#323c48', // 地图颜色
borderColor: '#020', //线条颜色
borderType: 'dotted', //边框样式
opacity: '.8'
},
emphasis: { //选中后
areaColor: '#2a333d' //鼠标移入颜色
}
},
nameMap: { // 自定义地区的名称映射 'china': '中国'
'河南': '中原',
'安徽': '安庆府'
},
selectedMode: 'single', //点击板块会高亮选中板块,默认多选
regions: regions // 在地图中对特定的区域配置样式,灵活操作
},
series:[]
}
展示图
api地址:geo