//originLines.js
let locatePoint = [
{
name: "北京",
position: [116.407526, 39.904030]},
{
name: "辽宁",
position: [123.429440, 41.835441]},
{
name: "上海",
position: [121.473701, 31.230416]},
{
name: "河北",
position: [114.468664, 38.037057]},
{
name: "浙江",
position: [120.152791, 30.267446]},
{
name: "广东",
position: [113.266530, 23.132191]},
{
name: "山西",
position: [112.562398, 37.873531]},
{
name: "天津",
position: [117.200983, 39.084158]},
{
name: "吉林",
position: [125.325990, 43.896536]},
{
name: "陕西",
position: [108.954239, 34.265472]},
{
name: "丽江",
position: [100.233026,26.872108]},
]
let option = {
color:[‘#14f7fe’],
geo:{
map:'china'},
series:[
{
type:"lines",
coordinateSystem:"geo",
effect:{
period: 6,
show: true,
symbolSize: 3,
trailLength: 0.7,
},
lineStyle:{
normal:{
color:"#14f2fb",
curveness: 0.2,
opacity: 0.6,
width: 0
}
},
data:[]},
{
type:"lines",
coordinateSystem:"geo",
effect:{
period: 6,
show: true,
symbolSize: 15,
trailLength: 0,
symbol: "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",
},
lineStyle:{
normal:{
color:"#14f2fb",
curveness: 0.2,
opacity: 0.6,
width: 1
}
},
data:[]},
{
type:"effectScatter",
coordinateSystem:"geo",
symbolSize:6,
label:{
normal:{formatter:"{b}",
show:true,
position:"right"
}
},
itemStyle:{color:"#14f2fb"},
data:[]},]
}
function processData(data) {
let pointSize = 60
let linesData = data.map(item => ({
coords:[getPosition(item[0]),
getPosition(item[1])
],
fromName:item[0],
toName:item[1]}))
let scatterData = data.map(item => ({
name:item[0],
value:[...getPosition(item[0]),pointSize]}))
scatterData.push({name:data0,value:…getPosition(data[0),pointSize]})
option.series[0].data = linesData;
option.series[1].data = linesData;
option.series[2].data = scatterData;
}
function getPosition(name) {
return locatePoint.find(item => item.name == name).position
}
function getOption(data) {
let tmpData = data.map(item => [item.name,’ 丽江 ’]);
processData(tmpData);
return option;
}
export default getOption
import flyLine from “./echarts/originLines”
//html dom
<div id=”originLines” class=”inner-charts”></div>
设置 option
vue
data() {
return {
originData:[
{
name:'北京',
value:11703
},
{
name:'辽宁',
value:11703
},
{
name:'上海',
value:11703
},
{
name:'河北',
value:11703
},
{
name:'浙江',
value:11703
},
{
name:'广东',
value:11703
},
{
name:'山西',
value:11703
},
{
name:'天津',
value:11703
},
{
name:'吉林',
value:11703
},
{
name:'陕西',
value:11703
}
],
}}
//echarts dom 初始化
this.originLines = this.echarts.init(document.getElementById(“originLines”),”default”);
let option = this.flyLine(this.originData);
this.originLines.setOption(option)