Echarts地图自定义颜色
2021-01-22 本文已影响0人
夏日清风_期待
// 模拟数据
let data = [
{"name": "台湾","value": 20000},
{"name": "河北", "value": 2000},
{"name": "山西", "value": 2000},
{"name": "内蒙古", "value": 2000},
{"name": "辽宁", "value": 2000},
{"name": "吉林", "value": 2000},
{"name": "黑龙江", "value": 0},
{"name": "江苏", "value": 10000},
{"name": "浙江", "value": 10000},
{"name": "安徽", "value": 10000},
{"name": "福建", "value": 6500},
{"name": "江西", "value": 6500},
{"name": "山东", "value": 6500},
{"name": "河南", "value": 6500},
{"name": "湖北", "value": 1500},
{"name": "湖南", "value": 100},
{"name": "广东", "value": 20000},
{"name": "广西", "value": 1500},
{"name": "海南", "value": 1000},
{"name": "四川", "value": 3000},
{"name": "贵州", "value": 3000},
{"name": "云南", "value": 3000},
{"name": "西藏", "value": 3000},
{"name": "陕西", "value": 100},
{"name": "甘肃", "value": 5000},
{"name": "青海", "value": 2000},
{"name": "宁夏", "value": 2000},
{"name": "新疆", "value": 2000},
{"name": "北京", "value": 2000},
{"name": "天津", "value": 2000},
{"name": "上海", "value": 2000},
{"name": "重庆", "value": 200},
{"name": "香港", "value": 200},
{"name": "澳门", "value": 200},
{"name": "南海诸岛", "value": 15000}
]
通过visualMap
设置,设置visualMap
中的min
最小值、max
最大值、color
颜色值,echart
会根据value
数值自动匹配对应颜色
let optionMap = {
tooltip: {
formatter: '{a}<br/>{b}: {c}人'
},
visualMap: {
min: 0, // 最小值
max: 20000, // 最大值
text: ['20000', '0'],
realtime: false,
calculable: false,
inRange: {
color: ['#e6f7ff', '#1890FF','#0050b3'] // 渐变颜色
}
},
series: [{
name: '用户分布',
type: 'map',
mapType: 'china',
coordinateSystem: 'geo',
label: {
normal: {
show: false, //显示省份标签
textStyle: {
color: "#fff"
} //省份标签字体颜色
},
emphasis: { //对应的鼠标悬浮效果
show: true,
textStyle: {
color: "#000"
}
}
},
aspectScale: 0.75,
zoom: 1.2,
itemStyle: {
normal: {
borderWidth: .5, //区域边框宽度
borderColor: '#fff', //区域边框颜色
// areaColor: "#ffefd5", //区域颜色
},
emphasis: {
borderWidth: .5,
borderColor: '#000',
areaColor: "#fff",
}
},
data: data
}],//各省地图颜色数据依赖value
}
1
一个是dataRange
,在splitList
数据中的加入对应的color
即可({"name": "南海诸岛", "value": 15000,color: '#cfc5de'}
)
let optionMap = {
tooltip: {
formatter: '{a}<br/>{b}: {c}人'
},
series: [{
name: '用户分布',
type: 'map',
mapType: 'china',
coordinateSystem: 'geo',
label: {
normal: {
show: false, //显示省份标签
textStyle: {
color: "#fff"
} //省份标签字体颜色
},
emphasis: { //对应的鼠标悬浮效果
show: true,
textStyle: {
color: "#000"
}
}
},
aspectScale: 0.75,
zoom: 1.2,
itemStyle: {
normal: {
borderWidth: .5, //区域边框宽度
borderColor: '#fff', //区域边框颜色
// areaColor: "#ffefd5", //区域颜色
},
emphasis: {
borderWidth: .5,
borderColor: '#000',
areaColor: "#fff",
}
},
data: data.map.seriesData //各省地图颜色数据依赖value
}],
dataRange: {
x: '-1000 px', //图例横轴位置
y: '-1000 px', //图例纵轴位置
splitList: data //各省地图颜色,在data中插入对应的color即可 {"name": "南海诸岛", "value": 15000,color: '#cfc5de'} color:自定义颜色值
},
}
2