最近在写一个Echarts地图，需要用到lines来显示人流量，但是给lines添加value后后，线条却不显示。
最后发现是因为数据区间visualMap写反了。
drawLine (list) {
var that = this
window.addEventListener('resize', this.drawLine)
var myChart = this.$echarts.init(this.$refs.echarts)
this.$echarts.registerMap('js', jiaxing)
var fData = []
var geoCoordMap = {
'嘉兴市': [120.765561, 30.745511],
'杭州市': [120.214648, 30.247591],
'湖州市': [120.112053, 30.88756],
'衢州市': [118.86286, 28.96594],
'丽水市': [119.933308, 28.45956],
'温州市': [120.726888, 28.001596],
'台州市': [121.424845, 28.65915],
'宁波市': [121.634006, 29.860557],
'金华市': [119.654303, 29.074539],
'绍兴市': [120.602384, 30.052657],
'舟山市': [122.217869, 29.991411],
'其他省': [117.268574, 30.221631],
// '桐乡市': [120.584193, 30.630593],
// '海宁市': [120.687714, 30.507719],
// '平湖市': [121.009352, 30.67752],
// '海盐县': [120.957618, 30.533117],
// '嘉善县': [120.945159, 30.839851],
// '秀洲区': [120.775801, 30.766483],
// '南湖区': [120.783284, 30.750802],
}
for (var key in geoCoordMap) {
for (var key1 in geoCoordMap) {
if (key1 != key) {
fData.push({
coords: [
geoCoordMap[key],
geoCoordMap[key1],
],
fromName: key,
toName: key1,
})
break
}
}
}
list.forEach(item =>{
fData.forEach(item2=>{
if(item2.fromName == item.name) {
item2.value = item.value
}
})
})
fData.splice(0, 1)
var mapdata = [
{
name: '嘉善县',
value: 100
}, {
name: '南湖区',
value: 10
}, {
name: '平湖市',
value: 20
}, {
name: '桐乡市',
value: 100
}, {
name: '海盐县',
value: 100
}, {
name: '海宁市',
value: 20
}, {
name: '通化市',
value: 61
}, {
name: '秀洲区',
value: 61
}
]
var option = {
visualMap: {
show: false,
max: 1000,
pieces: [
{
max: 10,
min: 0,
label: '安全',
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 1,
colorStops: [{
offset: 0,
color: '#02FF08' // 0% 处的颜色
}, {
offset: 1,
color: '#02FF08' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
},
{
max: 30,
min: 10,
label: '挺安全',
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 1,
colorStops: [{
offset: 0,
color: '#CCFF00' // 0% 处的颜色
}, {
offset: 1,
color: '#CCFF00' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
},
{
max: 60,
min: 30,
label: '不安全',
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 1,
colorStops: [{
offset: 0,
color: '#FFE400' // 0% 处的颜色
}, {
offset: 1,
color: '#FFE400' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
},
{
max: 100,
min: 60,
label: '危险',
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 1,
colorStops: [{
offset: 0,
color: '#F9C615' // 0% 处的颜色
}, {
offset: 1,
color: '#F9C615' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
},
{
max: 150,
min: 100,
label: '非常危险',
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 1,
colorStops: [{
offset: 0,
color: '#FE7D00' // 0% 处的颜色
}, {
offset: 1,
color: '#FE7D00' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
},
{
min: 150,
label: '极度危险',
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 1,
colorStops: [{
offset: 0,
color: '#ff5500' // 0% 处的颜色
}, {
offset: 1,
color: '#ff5500' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
},
]
},
tooltip: {
trigger: 'item',
showDelay: 0,
transitionDuration: 0.2,
borderWidth: 0,
padding: [5, 10, 5, 10],
show: true,
formatter: function (params) {
return params.data.fromName + '->' + params.data.toName + '</br>' + '客流量'+params.data.value+'万人'
}
},
geo: [
{
map: 'js',
roam: false, //是否允许缩放
zoom: 1.1, //默认显示级别
scaleLimit: {
min: 0,
max: 3
}, //缩放级别
itemStyle: {
normal: {
areaColor: '#00BCFF',
shadowColor: '#00BCFF',
shadowBlur: 1,
shadowOffsetX: 0,
shadowOffsetY: 5,
color: '#00BCFF',
}
},
}],
series: [
{
type: 'effectScatter',
coordinateSystem: 'geo',
tooltip: {
show: false
},
z: 5,
data: [],
symbolSize: 14,
label: {
normal: {
show: true,
formatter: function (params) {
return '{fline|地点：' + params.data.city + '}\n{tline|' + (params.data.info || '发生xx集件') + '}'
},
position: 'top',
backgroundColor: '#00BCFF',
padding: [0, 0],
borderRadius: 3,
lineHeight: 32,
color: '#00BCFF',
rich: {
fline: {
padding: [0, 10, 10, 10],
color: '#00BCFF'
},
tline: {
padding: [10, 10, 0, 10],
color: '#00BCFF'
}
}
},
emphasis: {
show: true
}
},
itemStyle: {
color: '#00BCFF',
normal: {
color: '#1D5567',
}
}
},
{
type: 'effectScatter',
coordinateSystem: 'geo',
z: 5,
tooltip: {
show: false
},
data: [],
symbolSize: 14,
label: {
normal: {
show: true,
formatter: function (params) {
return '{fline|地点：' + params.data.city + '}\n{tline|' + (params.data.info || '发生xx集件') + '}'
},
position: 'top',
backgroundColor: '#00BCFF',
padding: [0, 0],
borderRadius: 3,
lineHeight: 32,
color: '#00BCFF',
rich: {
fline: {
padding: [0, 10, 10, 10],
color: '#ffffff'
},
tline: {
padding: [10, 10, 0, 10],
color: '#ffffff'
}
}
},
emphasis: {
show: true
}
},
itemStyle: {
color: 'rgba(13, 38, 77, 1)',
normal: {
color: '#00BCFF',
}
}
},
{
type: 'map',
mapType: 'js',
geoIndex: -1,
zoom: 1.1, //默认显示级别
label: {
show: true,
color: '#fff',
emphasis: {
color: 'white',
show: false
}
},
itemStyle: {
normal: {
borderColor: 'rgba(13, 38, 77, 1)',
borderWidth: 1,
areaColor: '#00BCFF',
},
emphasis: {
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 1,
colorStops: [{
offset: 0,
color: '#1D5567' // 0% 处的颜色
}, {
offset: 1,
color: '#1D5567' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
borderWidth: 0,
color: 'green'
}
},
data: mapdata
},
{
type: 'lines',
zlevel: 3,
effect: {
show: true,
period: 4, //箭头指向速度，值越小速度越快
trailLength: 0.1, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'arrow', //箭头图标
symbolSize: 4, //图标大小
},
tooltip: {
trigger: 'item',
},
label: {
show: false,
color: '#fff',
emphasis: {
color: 'white',
show: true
}
},
lineStyle: {
normal: {
color: '#F46E36',
width: 0.5, //尾迹线条宽度
opacity: 0.5, //尾迹线条透明度
curveness: 0.3 //尾迹线条曲直度
}
},
data: fData,
},
]
}
myChart.resize()
myChart.on('click', function (params) {
console.log(params.name)
that.list.forEach((type) => {
if (params.name == type.title) {
openLink(type.link, '_target')
}
})
})
myChart.setOption(option)
}
