打开echarts官网,会发现示例里面已经没有绘制中国地图了,那么是真的没有了吗?
https://echarts.apache.org/zh/index.html
其实是有的,引入
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/map/js/china.js"></script>
# 世界地图可以不用
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/map/js/world.js"></script>
china.js中已经将中国地图注册了,所以不需要再使用新版示例里面的register方法了。直接使用china即可。
根据省份显示数据:
var data = { name: "湖南", value: 100 }
var option = {
visualMap: {
left: 'right',
min: 0,
max: 1000,
inRange: {
// prettier-ignore
color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
},
// text: ['多', '少'],
calculable: true
},
tooltip: {
trigger: 'item',
showDelay: 0,
transitionDuration: 0.2,
formatter(params) {
// 没有数据的省份不弹出显示
if (isNaN(params.value)) {
return null
}
return params.value
}
},
series: [
{
name: '',
type: 'map',
map: 'china', // 中国地图
roam: true, // 滚动缩放
itemStyle: {
areaColor: '#fff' // 省份块的颜色
},
emphasis: {
label: {
show: true
}
},
data: data // 省份数据
}
]
}
显示城市点,一定需要城市经纬度,经纬度使用百度坐标系。
// var data = { name: "长沙", value: [经度,纬度,数值]}
var data = { name: "长沙", value: [113,28,100]}
var option = {
geo: {
map: 'china',
roam: true,
zoom: 1,
itemStyle: {
areaColor: '#fff' //地图颜色
},
// 关闭地图省份相关展示
label: {
show: false
},
emphasis: {
disabled: true
},
tooltip: {
show: false
}
},
series: [
{
name: '',
type: 'effectScatter', // 散点图 或者 动态散点图
coordinateSystem: 'geo',
data: data, // 数据
symbolSize: 12,
tooltip: {
show: true
},
encode: {
value: 2
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
label: {
formatter: '{b}',
position: 'right',
show: true
},
itemStyle: {
shadowBlur: 10,
shadowColor: '#999'
},
emphasis: {
scale: true,
label: {
show: true
}
},
zlevel: 1
}
]
}