基于echarts的中国地图
Posted wasbg
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于echarts的中国地图相关的知识，希望对你有一定的参考价值。
html：
<div id="china_map" style=‘margin-top: -120px;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 localValue,
perf,
downloadSpeep,
usability,
point
if (params.data) {
localValue = params.data.value
perf = params.data.perf
downloadSpeep = params.data.downloadSpeep
usability = params.data.usability
point = params.data.point
} else { // 为了防止没有定义数据的时候报错写的
localValue = 0
perf = 0
downloadSpeep = 0
usability = 0
point = 0
}
let htmlStr = `
<div style=‘font-size:18px;‘> ${params.name}</div>
<p style=‘text-align:left;margin-top:-10px;‘>
区域对应数据value：${localValue}<br/>
性能perf：${perf}<br/>
下载速度downloadSpeep：${downloadSpeep}<br/>
可用性usability：${usability}<br/>
监测点数point：${point}<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）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式
{gt: 900, lte: 1000, label: ‘非常好‘, color: ‘#6ad86e‘}, // (900, 1000]
{gt: 500, lte: 900, label: ‘正常‘, color: ‘#9adcfa‘}, // (500, 900]
{gt: 310, lte: 500, label: ‘警告‘, color: ‘#ffeb3b‘}, // (310, 500]
{gt: 200, lte: 300, label: ‘较差‘, color: ‘#ff9800‘}, // (200, 300]
{gt: 10, lte: 200, label: ‘非常差‘, color: ‘orangered‘}, // (10, 200]
{value: 0, label: ‘无数据‘, color: ‘#999‘} // [0]
]
},
geo: { // 地理坐标系组件用于地图的绘制
map: ‘china‘, // 表示中国地图
// roam: true, // 是否开启鼠标缩放和平移漫游
zoom: 1.2, // 当前视角的缩放比例（地图的放大比例）
label: {
show: true
},
itemStyle: { // 地图区域的多边形 图形样式。
borderColor: ‘rgba(0, 0, 0, 0.2)‘,
emphasis: { // 高亮状态下的多边形和标签样式
shadowBlur: 20,
shadowColor: ‘rgba(0, 0, 0, 0.5)‘
}
}
},
series: [
{
name: ‘‘, // 浮动框的标题（上面的formatter自定义了提示框数据，所以这里可不写）
type: ‘map‘,
geoIndex: 0,
label: {
show: true
},
// 这是需要配置地图上的某个地区的数据，根据后台的返回的数据进行拼接（下面是我定义的假数据）
data: [{
‘name‘: ‘北京‘,
‘value‘: 599,
‘perf‘: ‘0.501s‘, // 性能
‘downloadSpeep‘: ‘1.221MB/s‘, // 下载速度
‘usability‘: ‘100%‘, // 可用性
‘point‘: ‘250‘ // 监测点
}, {
‘name‘: ‘上海‘,
‘value‘: 142
}, {
‘name‘: ‘黑龙江‘,
‘value‘: 44
}, {
‘name‘: ‘新疆‘,
‘value‘: 999,
‘perf‘: ‘0.501s‘, // 性能
‘downloadSpeep‘: ‘1.221MB/s‘, // 下载速度
‘usability‘: ‘100%‘, // 可用性
‘point‘: ‘250‘ // 监测点
}, {
‘name‘: ‘深圳‘,
‘value‘: 92
}, {
‘name‘: ‘湖北‘,
‘value‘: 810
}, {
‘name‘: ‘四川‘,
‘value‘: 453
}]
}
]
}
// 使用刚指定的配置项和数据显示地图数据
this.chinachart.setOption(chartOption)
// 对window窗口变化加监听事件
window.addEventListener(‘resize‘, () => {
this.chinachart.resize()
})
}
以上是关于基于echarts的中国地图的主要内容，如果未能解决你的问题，请参考以下文章
vue中，基于echarts 地图实现一个人才回流的大数据展示效果