摘要：
HTML:<；divstyle='100%x；高度：600px；'>；<；/div>；以下是与echarts map dataList（）相关的代码｛//初始化echarts实例this.chinachart=echarts.init（document.getElementById（'china_map'））//配置var chartOption
HTML：
<div style='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()
})
}
