一、
一定要給高度和寬度，不然不出效果
二、
在方法中初始化 echars官網有詳細介紹（https://echarts.apache.org/v4/examples/zh/index.html#chart-type-line）
三、引入china.js如果你引入不成功，檢查echarts版本
建議版本:(5.0版本引不到china.js)
四、代碼展示
let option = {
tooltip: {
formatter: '{b}: {c}',//鼠標滑過展示的內容調整
},
visualMap: {
min: 0,//數值的最大值和最小值
max: 2000,
orient: 'horizontal',
realtime: false,
calculable: true,
align: 'bottom',
left: 30,//位置
top: 30,
inRange: {
color: ['#C62238', '#FFA056'], // 地圖漸變的顏色
},
},
geo: {
map: 'china', //中國地圖/其他省份就改寫shanghai
roam: true,
label: {
normal: {
show: true,
textStyle: {
color: 'rgba(0,0,0,0.4)',
},
},
},
itemStyle: {
normal: {
borderColor: 'rgba(0, 0, 0, 0.2)',
areaColor: '#ccdaff',
},
emphasis: {
areaColor: '#FFD05D', // 地圖划過顯示的顏色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
},
series: [
{
type: 'map',
roam: true,
coordinateSystem: 'geo',
geoIndex: 0,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false,
},
emphasis: {
show: true,
},
},
itemStyle: {
normal: {
color: '#F06C00',
},
},
data: data.mapList,
},
],
}
附上效果圖：
