1、在vue中安装echarts，安装4.1.0版本，就不需要自己去下载地图数据
npm install echarts
2、在组件中引入
import * as echarts from 'echarts';
import "echarts/map/js/china.js";
import "echarts/map/json/china.json";
3、HTML代码，直接附上完整代码
<template>
<div class="amap-page-container">
<div id="china_map" style="width: 1000px; height: 800px"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
import "echarts/map/js/china.js";
import "echarts/map/json/china.json";
export default {
data () {
return { }
},
methods: { },
mounted () {
// 初始化echarts实例
this.chinachart = echarts.init(document.getElementById('china_map'))
// 进行相关配置
this.chartOption = {
tooltip: {
// 鼠标移到图里面的浮动提示框
triggerOn: 'click',
enterable: 'true',
// formatter详细配置： https://echarts.baidu.com/option.html#tooltip.formatter
formatter (params, ticket, callback) {
// params.data 就是series配置项中的data数据遍历
let localValue,
name,
warehouse,
warehouseList
if (params.data) {
localValue = params.data.value
name = params.name
warehouseList = params.data.children
warehouseList.forEach(e => {
warehouse += `<div class="row">
<div class="popTitle">${e.agencyName}（${e.warehouse.length}）个</div>
<div class="text">
${e.warehouse.map((ck, index) => {
return `<div>${ck.ck}</div>`
}).join('')}
</div> </div>`
})
} else { // 为了防止没有定义数据的时候报错写的
localValue = 0
name = ''
warehouse = ''
}
let htmlStr = `<div class="popBox">
<div > 城市：${name}</div>
<p >
库存量：${localValue} </p>` + warehouse + `
</div>`
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: 9009, lte: 10000, 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配置详解： https://echarts.baidu.com/option.html#geo
geo: { // 地理坐标系组件用于地图的绘制
map: 'china', // 表示中国地图
roam: false, // 是否开启鼠标缩放和平移漫游
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,
'children': [{
agencyName: '江苏代理区',
warehouse: [
{ 'ck': '江苏仓库' },
{ 'ck': '江苏仓库1' },
{ 'ck': '江苏仓库2' },
{ 'ck': '江苏仓库3' },
]
},
{
agencyName: '苏南代理区',
warehouse: [
{ 'ck': '苏南仓库' },
{ 'ck': '苏南仓库1' },
{ 'ck': '苏南仓库2' },
{ 'ck': '华苏南仓库3' },
]
},
{
agencyName: '苏北代理区',
warehouse: [
{ 'ck': '苏北仓库' },
{ 'ck': '苏北仓库1' },
{ 'ck': '苏北仓库2' },
{ 'ck': '苏北仓库3' },
]
},
]
}, {
'name': '江苏',
'value': 142,
'children': [
]
},
{
'name': '黑龙江',
'value': 44
},
{
'name': '新疆',
'value': 9999,
children: []
},
{
'name': '深圳',
'value': 92,
children: []
},
{
'name': '湖北',
'value': 810,
children: []
},
{
'name': '天津',
'value': 310000,
children: []
},
{
'name': '徐州',
'value': 320300,
children: []
},
{
'name': '四川',
'value': 453,
'children': [{
}]
}
]
}
// 使用刚指定的配置项和数据显示地图数据
this.chinachart.setOption(this.chartOption)
},
methods: { }
}
</script>
<style>
.popBox {
max-height: 300px;
width: 200px;
overflow: auto;
font-size: 17px;
line-height: 35px;
padding: 10px 20px;}
.popTitle {
margin-top: 20px;
}
</style>
