实现单起点、多起点的酷炫航线图效果

function main(chartView) {
    var chart = chartView.getChartObject();
    var options = chart.getOptions();
    //设置起点图例不显示
    options.legend.show = false;
    setToolTip(options);
    setLineType(options.series[0], options.series[2]);
    setLineType(options.series[1], options.series[2]);
    setVisualMap(options);
    setGeoType(options);
    setEffect(options.series[2], options);
}
//设置toolTip提示信息样式
function setToolTip(options){
    options.tooltip.backgroundColor = "rgba(95,158,160,0.9)";
    options.tooltip.textStyle = options.tooltip.textStyle || {};
    options.tooltip.textStyle.color = "black";
}
//设置地图及画布样式
function setGeoType(options) {
    options.backgroundColor = '#013954';
    options.geo.itemStyle = options.geo.itemStyle || {};
    options.geo.itemStyle.normal = options.geo.itemStyle.normal || {};
    options.geo.itemStyle.normal.color = 'rgba(51, 69, 89, .5)';
    options.geo.itemStyle.normal.borderColor = '#516a89';
    options.geo.itemStyle.borderWidth = 1;
    options.geo.emphasis = options.emphasis || {};
    options.geo.emphasis.color = 'rgba(37, 43, 61, .5)';
    //地图比例
    options.geo.zoom = 1.2;
    //是否可缩放
    options.roam = true;
}
//设置航线样式
function setLineType(line, dataItem) {
    line.effect = {
        show: true,
        period: 4, //箭头指向速度，值越小速度越快
        trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
        symbol: 'arrow', //箭头图标
        symbolSize: 4, //图标大小
    };
    line.lineStyle = {
        normal: {
            width: 0.5, //尾迹线条宽度
            opacity: 1, //尾迹线条透明度
            curveness: 0.2, //尾迹线条曲直度
        }
    };
    line.symbol = 'none';
    //设置航线颜色
    for (let i = 0; i < line.data.length; i++) {
        line.data[i].lineStyle = line.data[i].lineStyle || {};
        if (dataItem.data[i].value[2] < 80) {
            line.data[i].lineStyle.color = "#00eaff";
        } else {
            line.data[i].lineStyle.color = "#f44336";
        }
    }
}
//设置圆环样式
function setEffect(line, options) {
    line.symbol = 'circle';
    line.symbolSize = function(val) {
        return 5 + val[2] / 10; //圆环大小，根据数组设置
    };
    //设置圆环、标签颜色
    for (var i = 0; i < line.data.length; i++) {
        line.data[i].label = line.data[i].label || {};
        line.data[i].itemStyle = line.data[i].itemStyle || {};
        if (line.data[i].value[2] < 80) {
            line.data[i].label.color = "#00eaff";
            line.data[i].itemStyle.color = "#00eaff";
        } else {
            line.data[i].label.color = "#f44336";
            line.data[i].itemStyle.color = "#f44336";
        }
        line.data[i].label.fontFamily = "serif";
        line.data[i].label.position = 'right';
    }
}
//设置数值图例
function setVisualMap(options) {
    options.visualMap = options.visualMap || {};
    options.visualMap = {
        min: 0,
        max: 100,
        calculable: false,//是否可计算
        show: true,
        color: ['#f44336', '#00eaff'],
        textStyle: {
            color: '#fff'
        }
    };
}

function main(chartView) {
    var chart = chartView.getChartObject();
    var option = chart.getOptions();
    var color = ['#f44336', '#00eaff'];
    var index = 1;
    var colorIndex = 0;
    for (let i = 0; i < option.series.length; i++) {
        if (index % 3 === 0) {
            setEffect(option.series[i], color[colorIndex++]);
        } else {
            setLineStyle(option.series[i], color[colorIndex]);
        }
        index++;
    }
    setLegend(option);
    setGeoType(option);
    setToolTip(option);
    setGeoBorder(option);

}
//设置航线样式
function setLineStyle(line, color) {
    line.effect = {
        show: true,
        period: 3, //箭头指向速度，值越小速度越快
        trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
        symbol: 'diamond', //箭头图标
        symbolSize: 5, //图标大小
    };
    line.lineStyle.normal = line.lineStyle.normal || {};
    line.lineStyle.normal.width = 0.5;
    line.lineStyle.normal.curveness = 0.2;
    line.lineStyle.normal.color = color;
    line.symbol = 'none';
    for (let i = 0; i < line.data.length; i++) {
        line.data[i].lineStyle = line.data[i].lineStyle || {};
        line.data[i].lineStyle.color = color;
    }
}
//设置圆环不显示
function setEffect(line, color) {
    line.symbol = 'none';
}
//设置图例样式
function setLegend(option) {
    option.legend.selectedMode = "multiple";
    option.legend.textStyle = option.legend.textStyle || {};
    option.legend.textStyle.color = option.legend.textStyle.color || {};
    option.legend.textStyle.color = "white";
    option.legend.textStyle.fontSize = 10;
}
//设置地图及画布样式
function setGeoType(options) {
    options.backgroundColor = 'rgba(1,57,84,0.8)';
    options.geo.itemStyle = options.geo.itemStyle || {};
    options.geo.itemStyle.normal = options.geo.itemStyle.normal || {};
    options.geo.itemStyle.normal.color = 'rgba(51, 69, 89, .5)';
    options.geo.itemStyle.normal.borderColor = 'rgba(28,199,242,1.0)';
    options.geo.itemStyle.normal.borderWidth = 2.5;
    options.geo.emphasis = options.emphasis || {};
    options.geo.emphasis.color = 'rgba(37, 43, 61, .5)';
    //地图比例
    options.geo.zoom = 1.2;
    //是否可缩放
    options.roam = false;
}

//设置toolTip提示信息样式
function setToolTip(options) {
    options.tooltip.backgroundColor = "rgba(95,158,160,0.9)";
    options.tooltip.textStyle = options.tooltip.textStyle || {};
    options.tooltip.textStyle.color = "black";
}

//设置地图外框边框（series多加一层地图）
function setGeoBorder(option) {
    option.series.push({
        type: "map",
        map: "CHINA",
        //roam: true,
        silent: true,
        zoom: 1.2,
        itemStyle: {
            normal: {
                areaColor: 'rgba(23,30,59,1)',
                borderWidth: 1, //设置外层边框
                borderColor: 'rgba(81,106,137,0.8)',
            },
            emphasis: {
                areaColor: 'rgba(23,30,59,0.8)',
                borderWidth: 0.8, //设置外层边框
                borderColor: '#516a89',
            },

        },
        label: {
            show: false
        },
        tooltip: {
            formatter: '{a}',
            backgroundColor: "rgba(95,158,160,0.9)",
            textStyle: {
                color: "black",
                fontFamily: 'serif'
            }
        },
    });
}