从https://www.echartsjs.com/examples/zh/editor.html?c=doc-example/map-example
博客看到的这个地图，拿来作为参考，将不需要的部分去掉，还剩下
image.png
这个样子，代码如下：
option = {
title : {
text: 'iphone销量',
subtext: '纯属虚构',
left: 'center'
},
tooltip : {
trigger: 'item'
},
visualMap: {
min: 0,
max: 2500,
left: 'left',
top: 'bottom',
text:['高','低'], // 文本，默认为数值文本
calculable : true
},
series : [
{
name: 'iphone3',
type: 'map',
mapType: 'china',
roam: false,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data:[
{name: '北京',value: Math.round(Math.random()*1000)},
{name: '重庆',value: Math.round(Math.random()*1000)},
{name: '辽宁',value: Math.round(Math.random()*1000)},
{name: '浙江',value: Math.round(Math.random()*1000)},
{name: '湖北',value: Math.round(Math.random()*1000)},
{name: '甘肃',value: Math.round(Math.random()*1000)},
{name: '山西',value: Math.round(Math.random()*1000)},
{name: '广东',value: Math.round(Math.random()*1000)},
{name: '西藏',value: Math.round(Math.random()*1000)},
{name: '香港',value: Math.round(Math.random()*1000)},
{name: '澳门',value: Math.round(Math.random()*1000)}
]
}
]
};
在上面代码上做了改进，并备注了每个属性的功能，需要的自取，我做出来的地图如下：
下载 (7).png
代码如下：
myMap.setOption({
// 左下角颜色条样式设置
visualMap: {
show: false, // 左下角颜色条要不要显示，不要则为false
min: 0, // 颜色条最底端颜色的值
max: 1000,// 颜色条最上端颜色的值
left: 'left',// 颜色条的位置
top: 'bottom',
text: ['高', '低'], // 颜色条文本，默认为数值文本
calculable: true,
inRange: {
color: ['#f08a95', '#fbe6ef', '#f6f67a', '#d4ecb2']
// 需要的颜色区间和颜色种类 按需写入 多少不限
}
},
// 地图在画布的位置
grid:{
left:0,
top:0,
right:0,
bottom:0
},
series: [
{
type: 'map',
// layoutSize: 100,
mapType: 'china',
silent:true,
itemStyle:{
normal:{
// color: 'yellow',
// areaStyle:{color:'#f00'},
areaColor: "#e9e9e9" // 地图默认不点亮时的所有区域颜色 默认为灰色
}
},
roam: false,// 是否可以缩放地图
// zoom: 2,
label: {
normal: {
show: true,// 是否显示城市名称
fontSize: '12px'// 城市名称的字号
}
},
data: data
}]
});
