很多人不清楚中国地图要怎么实现,其实 echarts 已经为我们封装好了,只要我们配置好各省数据就可以快捷实现了。
首先我们先来实现中国地图:
中国地图的实现
(1)引入 echarts 及中国地图
// import echarts from "echarts";
import * as echarts from 'echarts'
import 'echarts/map/js/china.js'
(2)配置地图数据
options: {
tooltip: {
triggerOn: "mousemove", //mousemove、click
padding:8,
borderWidth:1,
borderColor:'#409eff',
backgroundColor:'rgba(255,255,255,0.7)',
textStyle:{
color:'#000000',
fontSize:13
},
formatter: function(e, t, n) {
let data = e.data;
//模拟数据
data.specialImportant = Math.random()*1000 | 0;
data.import = Math.random()*1000 | 0;
data.compare = Math.random()*1000 | 0;
data.common = Math.random()*1000 | 0;
data.specail = Math.random()*1000 | 0;
let context = `
<div>
<p><b style="font-size:15px;">${data.name}</b>(2020年第一季度)</p>
<p class="tooltip_style"><span class="tooltip_left">事件总数</span><span class="tooltip_right">${data.value}</span></p>
<p class="tooltip_style"><span class="tooltip_left">特别重大事件</span><span class="tooltip_right">${data.specialImportant}</span></p>
<p class="tooltip_style"><span class="tooltip_left">重大事件</span><span class="tooltip_right">${data.import}</span></p>
<p class="tooltip_style"><span class="tooltip_left">较大事件</span><span class="tooltip_right">${data.compare}</span></p>
<p class="tooltip_style"><span class="tooltip_left">一般事件</span><span class="tooltip_right">${data.common}</span></p>
<p class="tooltip_style"><span class="tooltip_left">特写事件</span><span class="tooltip_right">${data.specail}</span></p>
</div>
`
return context;
}
},
// 这里是比较重要的代码,渲染省份背景颜色的
visualMap: {
show:true,
left: 26,
bottom: 40,
showLabel:true,
pieces: [
{
gte: 100,
label: ">= 1000",
color: "#1f307b"
},
{
gte: 500,
lt: 999,
label: "500 - 999",
color: "#3c57ce"
},
{
gte: 100,
lt:499,
label: "100 - 499",
color: "#6f83db"
},
{
gte: 10,
lt: 99,
label: "10 - 99",
color: "#9face7"
},
{
lt:10,
label:'<10',
color: "#bcc5ee"
}
]
},
// 这里是配置地图类型,除了中国地图、还可以配置省份、全球地图等
geo: {
map: "china",
// scaleLimit: {
// min: 1,
// max: 2
// },
zoom: 3,
roam: true,
top: 120,
label: {
normal: {
show:true,
fontSize: "14",
color: "rgba(0,0,0,0.7)"
}
},
itemStyle: {
normal: {
//shadowBlur: 50,
//shadowColor: 'rgba(0, 0, 0, 0.2)',
borderColor: "rgba(0, 0, 0, 0.2)"
},
emphasis: {
areaColor: "#f2d5ad",
shadowOffsetX: 0,
shadowOffsetY: 0,
borderWidth: 0
}
}
},
series: [
{
name: "突发事件",
type: "map",
geoIndex: 0,
data:[]
}
]
},
根据省份数值大小填充不同的颜色
(1)根据数值区间配置不同的颜色
核心代码:
visualMap: {
show:true,
left: 26,
bottom: 40,
showLabel:true,
pieces: [
{
gte: 100,
label: ">= 1000",
color: "#1f307b"
},
{
gte: 500,
lt: 999,
label: "500 - 999",
color: "#3c57ce"
},
{
gte: 100,
lt:499,
label: "100 - 499",
color: "#6f83db"
},
{
gte: 10,
lt: 99,
label: "10 - 99",
color: "#9face7"
},
{
lt:10,
label:'<10',
color: "#bcc5ee"
}
]
},
(2)根据最大值和最小值,自动计算两个颜色的渐变
核心代码:
visualMap: {
show:false,
min: 0,
max: 2000,
// text:['High','Low'],
realtime: false,
calculable: true,
inRange: {
color: ['#5188e1', '#0d3358'] // 渐变的两个基本值
}
},