vue项目中通过echarts实现地图路径展示
首先先定义装地图的盒子，还需先引入china.js；新建一个map-options.js如下
//map-option.js
var cities = [{
"name": "广东",
"value": [113.2563, 23.1297]
}, {
"name": "河南",
"value": [113.6806, 34.7553]
}, {
"name": "山东",
"value": [117.001, 36.6885]
}, {
"name": "辽宁",
"value": [123.439, 41.8068]
}, {
"name": "江苏",
"value": [118.8046, 32.0641]
}, {
"name": "浙江",
"value": [120.2004, 30.2793]
}, {
"name": "陕西",
"value": [108.9523, 34.3366]
}, {
"name": "上海",
"value": [121.4771, 31.2278]
}, {
"name": "台湾",
"value": [120.8961, 23.9694]
}, {
"name": "天津",
"value": [117.2081, 39.1428]
}, {
"name": "北京",
"value": [116.3852, 39.9156]
}, {
"name": "江西",
"value": [115.8545, 28.683]
}, {
"name": "湖南",
"value": [112.9603, 28.223]
}, {
"name": "吉林",
"value": [126.5907, 43.8725]
}, {
"name": "四川",
"value": [104.0712, 30.6613]
}, {
"name": "山西",
"value": [112.559, 37.8746]
}, {
"name": "湖北",
"value": [114.2973, 30.5921]
}, {
"name": "云南",
"value": [102.7176, 25.0482]
}, {
"name": "福建",
"value": [119.3082, 26.0718]
}, {
"name": "广西",
"value": [108.3592, 22.8205]
}, {
"name": "黑龙江",
"value": [126.6484, 45.7622]
}, {
"name": "新疆",
"value": [87.6007, 43.8223]
}, {
"name": "重庆",
"value": [106.5343, 29.5813]
}, {
"name": "宁夏",
"value": [106.2196, 38.4879]
}, {
"name": "河北",
"value": [114.513, 38.0648]
}, {
"name": "安徽",
"value": [117.2868, 31.8534]
}, {
"name": "甘肃",
"value": [103.8428, 36.0568]
}, {
"name": "青海",
"value": [101.7893, 36.6353]
}, {
"name": "内蒙古",
"value": [111.7341, 40.8387]
}, {
"name": "海南",
"value": [110.3452, 20.0255]
}, {
"name": "西藏",
"value": [91.1192, 29.6722]
}, {
"name": "贵州",
"value": [106.6673, 26.6208]
}]
//一个包含两个到多个二维坐标的数组
var path3 = [{
"fromName": "上海",
"toName": "山东",
"coords": [
[121.4771, 31.2278],
[117.001, 36.6885]
]
}, {
"fromName": "山东",
"toName": "河南",
"coords": [
[117.001, 36.6885],
[113.6806, 34.7553],
]
},
{
"fromName": "河南",
"toName": "宁夏",
"coords": [
[113.6806, 34.7553],
[106.2196, 38.4879]
]
},
{
"fromName": "宁夏",
"toName": "新疆",
"coords": [
[106.2196, 38.4879],
[87.6007, 43.8223]
]
},
]
var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
export default {
//图表标题
// title: {
// left: 'center',
// textStyle: {
// color: '#fff'
// }
// },
//图例组件
// legend: {
// top: '15%',
// left: '45%',
// data: ['二类', '三类'],
// textStyle: {
// color: '#fff',
// fontSize: 16
// },
// selectedMode: 'multiple'
// },
//地理坐标系组件，用于地图的绘制，支持在地理坐标系上绘制散点图，线集
geo: {
//地图类型
map: 'china',
//图形中的文本标签，可用于说明一些数据信息
label: {
//高亮状态下的多边形和标签样式
emphasis: {
show: false,
color: '#fff'
}
},
//开启鼠标缩放和平移漫游
roam: true,
//设置地图大小，视觉的缩放比例
zoom:1.2,
itemStyle: {
//图表中区域颜色及边框颜色
normal: {
areaColor: '#011351',
borderColor: '#606a79',
},
//高亮状态下的多边形和标签样式
emphasis: {
areaColor: '#169BD4'
}
},
//对不同区块进行着色
regions :[
{
name: '新疆',//区块名称
itemStyle: {
normal: {
areaColor: '#E05BB8'
}
}
},
{
name: '内蒙古',//区块名称
itemStyle: {
normal: {
areaColor: '#CA65EF'
}
}
},
{
name: '河南',//区块名称
itemStyle: {
normal: {
areaColor: '#CA65EF'
}
}
},
{
name: '黑龙江',//区块名称
itemStyle: {
normal: {
areaColor: '#66C3D4'
}
}
},
{
name: '吉林',//区块名称
itemStyle: {
normal: {
areaColor: '#F2D766'
}
}
},
{
name: '辽宁',//区块名称
itemStyle: {
normal: {
areaColor: '#F2D766'
}
}
},
{
name: '甘肃',//区块名称
itemStyle: {
normal: {
areaColor: '#D8EB6E'
}
}
},
{
name: '西藏',//区块名称
itemStyle: {
normal: {
areaColor: '#4B6BE6'
}
}
},
{
name: '青海',//区块名称
itemStyle: {
normal: {
areaColor: '#4B6BE6'
}
}
},
{
name: '宁夏',//区块名称
itemStyle: {
normal: {
areaColor: '#D8EB6E'
}
}
},
{
name: '陕西',//区块名称
itemStyle: {
normal: {
areaColor: '#DD434B'
}
}
},
{
name: '山西',//区块名称
itemStyle: {
normal: {
areaColor: '#10DDFC'
}
}
},
{
name: '河北',//区块名称
itemStyle: {
normal: {
areaColor: '#55E56A'
}
}
},
{
name: '北京',//区块名称
itemStyle: {
normal: {
areaColor: '#55E56A'
}
}
},
{
name: '天津',//区块名称
itemStyle: {
normal: {
areaColor: '#55E56A'
}
}
},
{
name: '四川',//区块名称
itemStyle: {
normal: {
areaColor: '#C0A556'
}
}
},
{
name: '贵州',//区块名称
itemStyle: {
normal: {
areaColor: '#C0A556'
}
}
},
{
name: '重庆',//区块名称
itemStyle: {
normal: {
areaColor: '#C0A556'
}
}
},
{
name: '山东',//区块名称
itemStyle: {
normal: {
areaColor: '#4D4BAE'
}
}
},
{
name: '湖北',//区块名称
itemStyle: {
normal: {
areaColor: '#68ED78'
}
}
},
{
name: '安徽',//区块名称
itemStyle: {
normal: {
areaColor: '#EAEF4B'
}
}
},
{
name: '江苏',//区块名称
itemStyle: {
normal: {
areaColor: '#EAEF4B'
}
}
},
{
name: '浙江',//区块名称
itemStyle: {
normal: {
areaColor: '#EAEF4B'
}
}
},
{
name: '云南',//区块名称
itemStyle: {
normal: {
areaColor: '#A2F486'
}
}
},
{
name: '广西',//区块名称
itemStyle: {
normal: {
areaColor: '#B7444B'
}
}
},
{
name: '湖南',//区块名称
itemStyle: {
normal: {
areaColor: '#6CFFF7'
}
}
},
{
name: '广东',//区块名称
itemStyle: {
normal: {
areaColor: '#6CFFF7'
}
}
},
{
name: '海南',//区块名称
itemStyle: {
normal: {
areaColor: '#6CFFF7'
}
}
},
{
name: '江西',//区块名称
itemStyle: {
normal: {
areaColor: '#D462DC'
}
}
},
{
name: '福建',//区块名称
itemStyle: {
normal: {
areaColor: '#D462DC'
}
}
},
]
},
series: [
//页面初步内容进行显示
{
name: '城市',
//带有涟漪特效动画散点(气泡)图，利用动画特效可以将某些想要突出的数据进行视觉突出
type: 'effectScatter',
//该系列使用的坐标系
coordinateSystem: 'geo',
//折线图中的所有图形的zlevel的值，用于canvas分层，不同zlevel值的图形会放置在不同的canvas中，zLevel大的canvas会防在zLevel小的canvas的上面
zlevel: 2,
//波纹的绘制方式(每一个坐标点波纹显示) 可分为stroke 和 fill
rippleEffect: {
brushType: 'stroke'
},
//图形上的文本标签，可用于说明图形的一些数据信息
label: {
normal: {
//显示与隐藏
show: true,
position: 'right',
//标签内容格式器 支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持\n换行
formatter: '{b}',
color: '#fff'
}
},
itemStyle: {
//波纹的颜色
normal: {
color: '#808a99'
}
},
data: cities
},
//页面中路径图的线段显示及样式
{
type: 'lines',
//折线图中的所有图形的zlevel的值，用于canvas分层，不同zlevel值的图形会放置在不同的canvas中，zLevel大的canvas会防在zLevel小的canvas的上面
zlevel: 1,
//特效
effect: {
//是否显示特效
show: true,
//特效动画的时间
period: 6,
//特效尾迹的长度，取向从0到1的值，数值越大尾迹越长
trailLength: 0.7,
color: '#aaa',//arrow箭头的颜色
//线两端的标记大小，可以是一个数组分别指向两端，也可以是单个统一指定。
symbolSize: 1
},
//类似于线段头部或尾部所标记的图形
symbol: ['none', 'arrow'],
lineStyle: {
normal: {
//线条颜色
color: 'blue',
opacity: 0.3,
//线条宽度
width: 8,
//线条是否有弧度
curveness: 0.2
}
},
data: path3
},
]
};
效果图如下
