Echart 5.3.2
一、数据准备
let mapJSON = {}
/**
* 地图数据，可从高德地图中请求（中国地图的adCode：100000），数据格式需满足：
* mapJSON是Object格式，key必须是**features**，值是省市县地图数组数据
*/
mapJSON.features = [
{
geometry: Object,
properties: Object,
type: 'Feature'
},
...
]
// 1. 渲染地图各个区域数据。渲染结果见图一
let seriesData = [
{
name: '北京市', // 必须字段，且key必须为name
value: 3245.8, // 必须字段，且key必须为value，value必须为number类型
adCode: 110000, // 自定义字段
level: 'province', // 自定义字段
tooltipPrice: '3254.80'
...
}, {
name: '天津市',
value: 2145,
adCode: 120000,
level: 'province',
tooltipPrice: '2145.00'
...
},
...
]
// 2. 地图叠加带涟漪特效动画的散点图效果。见图二
let scatterData = [
{
name: '北京市', // 自定义字段
value: [116.405285, 39.904989], // 必须字段，且key必须为value，value必须为[经度, 纬度]
adCode: 110000, // 自定义字段
level: 'province', // 自定义字段
tooltipPrice: '3254.80'
...
}, {
name: '天津市',
value: [117.190182, 39.125596],
adCode: 120000,
level: 'province',
tooltipPrice: '2145.00'
...
},
...
]
// 3. 带有起点和终点信息的地图路径图，可用于地图上航线、路线的可视化。见图三
let linesData = [
{
coords: [
[117.190182, 39.125596], // 起始：天津
[126.642464, 45.756967] // 结束：黑龙江
]
},
{
coords: [
[91.132212, 29.660361], // 起始：西藏
[87.617733, 43.792818] // 结束：新疆
]
},
{
coords: [
[116.405285, 39.904989], // 起始：北京
[102.712251, 25.040609] // 结束：云南
]
},
{ ... }
]
图一
图二
图三
二、option配置
function renderMap(seriesData, scatterData, linesData, mapJSON) {
/**
* echarts.registerMap(mapName: string, geoJSON: Object | string, specialAreas?: Object)
* 注意：需要显示【南海诸岛】的时候，mapName必须是china，不能China或是‘中国’，否则无法显示
*/
echarts.registerMap('china', mapJSON)
var options = {
tooltip: {
trigger: 'item',
formatter: function (params) {
const { name, tooltipPrice } = params.data
let txtCon = `<div>
${name}<br />销售金额：${tooltipPrice} 元</div>`
return txtCon
}
},
// 视觉映射组件
visualMap: {
type: 'continuous', // 连续型
// max = Math.max.apply(Math, seriesData.map(item => { return item.value }))
min: 0, // 计算数据最小值
max, // 计算数据最大值
show: true, // 只控制映射组件是否展示，默认false。但视觉映射功能还存在
text: ['高', '低'], // 映射组件的文本
calculable: true, // 是否显示拖拽的手柄（手柄能拖拽调整选中的范围）
realtime: true, // 拖拽手柄，是否实时更新。true拖拽时实时更新图表视图；false拖拽结束后才更新视图
hoverLink: true, // 鼠标悬浮到visualMap组件上时，鼠标位置对应数值在图表中对应的图形元素会高亮显示
precision: 0, // 数据的小数点精度，默认0，即无小数点
seriesIndex: [0], // series.data哪个系列的值，默认取所有
// 定义选中范围中的视觉元素（用户可以和visualMap组件交互，用鼠标或触摸选择范围），地图区域的颜色
inRange: {
color: ['#1bdbfc', '#434fe7']
}
},
geo: {
show: true, // 地理坐标系组件（是否显示地图）
map: 'china', // 地图名称，与registerMap的mapName保持一致
roam: 'move', // 是否开启鼠标平移和缩放，可以设置成‘scale’或‘move’。设置成true为都开启
top: 30, // 组件距离容器上方的距离
zoom: 1.2, // 缩放比例
layoutCenter: ['30%', '50%'], // 定义地图中心在屏幕中的位置（与layoutSize结合使用才起作用）
layoutSize: 100, // 地图大小（与layoutCenter结合使用才起作用）。设置layoutCenter和layoutSize后 `left/right/top/bottom/width/height` 值无效
// 地图区域样式
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
// 地图高亮下的设置
emphasis: {
disabled: false, // 是否关闭高亮状态
label: {
show: true,
color: '#fff',
fontSize: 12,
...
},
itemStyle: {
borderWidth: 1.5,
shadowBlur: 2,
areaColor: '#ffac4d', // 鼠标经过的区域颜色
...
}
},
// 在地图中为指定区域块设置（文字颜色等）样式
regions: [
{
name: '南海诸岛',
itemStyle: { color: '#bff1ff', borderColor: '#6be2ff' },
label: {
color: '#5d5d5d',
fontSize: 9
offset: [0, -18] // 文字偏移量
}
},
{
name: '北京市',
itemStyle: { color: '#000', borderColor: '#fff' },
label: {
color: '#5d5d5d',
fontSize: 12
}
},
{ ... }
],
label: {
show: true, // 地图区域内的文字
color: '#fff',
fontSize: 9,
formatter: function(params) {
const nameMap = {
内蒙古自治区: '内蒙古',
西藏自治区: '西藏',
...
}
return nameMap[params.name]
}
}
},
series: [
{
type: 'map',
name: '中国地图',
map: 'china', // 与registerMap的mapName保持一致
geoIndex: 0,
hoverable: true, // 鼠标经过高亮
data: seriesData,
label: {
show: false
}
},
{
type: 'effectScatter',
name: '涟漪特效动画散点中国地图',
coordinateSystem: 'geo', // geo地理坐标系
silent: true, // 图形不响应和触发鼠标事件
rippleEffect: {
color: 'yellow',
number: 3,
brushType: 'fill'
},
// 图形的样式
itemStyle: {
color: 'red'
},
symbol: 'pin', // 标记的图形。string | Function。可选值有circle、rect、roundRect、triangle、diamond、pin、arrow、none、可通过'image://url'设置为图片，url为图片链接、也可通过'path://'矢量路径
// 标记图形大小
symbolSize: function (value, { name, data }) {
if (data.salesAmountVal == max && ['新疆维吾尔自治区', '西藏自治区'].includes(name)) {
return 22
}
return 10
},
data: scatterData,
showEffectOn: 'render' // 何时显示特效。render绘制完成后显示特效；emphasis高亮时显示特效
},
{
type: 'lines',
zlevel: 2, // 路径所有图形的zlevel值
// 路径线的特效配置
effect: {
show: true,
period: 4, // 箭头指向速度，值越小速度越快
trailLength: 0.4, // 特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'arrow', // 箭头图标
symbolSize: 5 // 图标大小
},
// 路径线的样式配置
lineStyle: {
color: 'green',
width: 1, // 路径线条宽度
opacity: 0.1, //路径线条透明度，0到1，为0不绘制
curveness: 0.5 // 路径线的曲度。0到1，值越大曲度越大
},
label: { ... },
emphasis: { ... },
data: linesData
}
]
}
// instanceChart是echarts.init(this.$refs['domChart'])的实例
instanceChart.setOption(options, true)
}
