HTML：
<div id="china_map" style='width:100%x;height:600px;'></div>
以下是echarts地圖相關代碼
dataList () {
// 初始化echarts實例
this.chinachart = echarts.init(document.getElementById('china_map'))
// 進行相關配置
var chartOption = {
tooltip: { // 鼠標移到圖里面的浮動提示框
// formatter詳細配置： https://echarts.baidu.com/option.html#tooltip.formatter
formatter (params) {
// params.data 就是series配置項中的data數據遍歷
let confirmedNum,
curesNum,
deathsNum
if (params.data) {
confirmedNum = params.data.confirmedNum
curesNum = params.data.curesNum
deathsNum = params.data.deathsNum
} else { // 為了防止沒有定義數據的時候報錯寫的
confirmedNum = 0
curesNum = 0
deathsNum = 0
}
let htmlStr = `
<div style='font-size:18px;'> ${params.name}</div>
<p style='text-align:left;margin-top:10px;'>
確診：${confirmedNum}<br/>
治愈：${curesNum}<br/>
死亡：${deathsNum}<br/>
</p>
`
return htmlStr
}
// backgroundColor:"#ff7f50",//提示標簽背景顏色
// textStyle:{color:"#fff"} //提示標簽字體顏色
},
// visualMap的詳細配置解析：https://echarts.baidu.com/option.html#visualMap
visualMap: { // 左下角的顏色區域
type: 'piecewise', // 定義為分段型 visualMap
min: 0,
max: 1000,
itemWidth: 40,
bottom: 60,
left: 20,
pieces: [ // 自定義『分段式視覺映射組件（visualMapPiecewise）』的每一段的范圍，以及每一段的文字，以及每一段的特別的樣式
{gte: 0, lte: 9, label: '1-9人', color: '#ced88b'}, // (900, 1000]
{gte: 10, lte: 99, label: '10-99人', color: '#fab26b'}, // (500, 900]
{gte: 100, lte: 499, label: '100-499人', color: '#ff9baa'}, // (310, 500]
{gte: 500, lte: 999, label: '500-999人', color: '#ff646b'}, // (200, 300]
{gte: 1000, label: '大於1000人', color: '#ff353d'} // (10, 200]
]
},
geo: { // 地理坐標系組件用於地圖的繪制
map: 'china', // 表示中國地圖
// roam: true, // 是否開啟鼠標縮放和平移漫游
zoom: 1.2, // 當前視角的縮放比例（地圖的放大比例）
label: {
show: true
},
itemStyle: { // 地圖區域的多邊形 圖形樣式。
borderColor: 'rgba(0, 0, 0, 0.2)',
emphasis: { // 高亮狀態下的多邊形和標簽樣式
shadowBlur: 20,
areaColor: '#ffffff',
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
series: [
{
name: '', // 浮動框的標題（上面的formatter自定義了提示框數據，所以這里可不寫）
type: 'map',
geoIndex: 0,
label: {
show: true
},
// 這是需要配置地圖上的某個地區的數據，根據后台的返回的數據進行拼接（下面是我定義的假數據）
data:[{
confirmedNum: 22112,//數據我只寫了一組，其余的可以自己寫
curesNum: 831,
deathsNum: 618,
name: "湖北",
value: 22112
}]
}]
}
]
}
// 使用剛指定的配置項和數據顯示地圖數據
this.chinachart.setOption(chartOption)
// 對window窗口變化加監聽事件
window.addEventListener('resize', () => {
this.chinachart.resize()
})
}
