【echarts】带攻击线的地图

// 数据格式
linesData: [
    [
        {
            //企业
            coord: [87.33123, 44.00828],
            fromName: "企业1",
            level: 1
        },
        {
            coord: [108.479, 23.1152],
            toName: "",
            value: 100
        }
    ]
], // map数据

drawChart1() {
    this.echart1 = this.$echarts.init(
        document.getElementById("chartContainer1")
    );
    let that = this;
    let areaColors = ["#FF4444", "#FF9500", "#3593FF", "#0DD567"]; //高到低
    let series = [];
    [this.linesData].forEach(item => {
        series.push(
            // 企业点 样式
            {
                type: "effectScatter",
                coordinateSystem: "geo",
                zlevel: 2,
                rippleEffect: {
                    period: 10, //动画时间，值越小速度越快
                    brushType: "fill", //波纹绘制方式 stroke, fill
                    scale: 3 //波纹圆环最大原6
                },
                label: {
                    normal: {
                        show: true,
                        position: "right", // 文字位置
                        offset: [10, 0], // 偏移设置
                        formatter: "{b}", // 圆环显示文字
                        textStyle: {
                            fontWeight: "bold"
                        }
                    },
                    emphasis: {
                        show: true
                    }
                },
                symbol: "circle",
                symbolSize: 15, //原7.5
                color: function (param) {
                    let level = param.value[3];
                    if (level === 1)
                        return "#C83F11";
                    if (level === 2)
                        return "#FF9500";
                    if (level === 3)
                        return "#3593FF";
                    if (level === 4)
                        return "#0DD567";
                },
                itemStyle: {
                    normal: {
                        show: false
                    }
                },
                data: item.map(function (dataItem) {
                    let name = dataItem[0].fromName; // 企业名称
                    return {
                        name: name,
                        value: dataItem[0].coord.concat([
                            dataItem[0].fromName, dataItem[0].level
                        ]),
                        visualMap: false
                    };
                })
            },
            // 流线 箭头 样式
            {
                type: "lines",
                zlevel: 2,
                // 箭头图标的样式、速度
                effect: {
                    show: true,
                    period: 5, // 箭头指向速度，值越小速度越快
                    trailLength: 0.1, // 特效尾迹长度[0,1]
                    symbol: "arrow", // 箭头图标
                    symbolSize: 5, // 图标大小
                    color: "#fff" // 箭头颜色
                },
                // 尾部 线的样式
                lineStyle: {
                    normal: {
                        width: 1, // 尾迹线条宽度
                        opacity: 0, // 尾迹线条透明度
                        curveness: 0.1 //尾迹线条曲直度
                    }
                },
                // data: convertData(item[1])
                data: item
            },
            // 流入点样式
            {
                type: "effectScatter",
                coordinateSystem: "geo",
                zlevel: 2,
                rippleEffect: {
                    //涟漪特效
                    period: 4, //动画时间，值越小速度越快
                    brushType: "fill", //波纹绘制方式 stroke, fill不动
                    scale: 0 //波纹圆环最大小
                },
                label: {
                    normal: {
                        show: true,
                        position: "right", //显示位置
                        offset: [5, 0], //偏移设置
                        formatter: "{b}", //圆环显示文字
                        color: "#F8E71C" //攻击点文字颜色
                    },
                    emphasis: {
                        show: true
                    }
                },
                symbol: "circle",
                symbolSize: function (val) {
                    return 3; //圆环大小
                },
                itemStyle: {
                    normal: {
                        show: false,
                        //流入点图标颜色
                        color: "#F8E71C",
                        shadowBlur: 5,
                        shadowColor: "#F8E71C"
                    }
                },
                data: item.map(function (dataItem) {
                    return {
                        name: dataItem[1].toName,
                        value: dataItem[1].coord.concat([
                            dataItem[1].value
                        ]),
                        visualMap: false
                    };
                })
            }
        );
    });

    let option = {
        grid: {
            left: 10,
            bottom: "5%",
            width: "10%",
            height: 100
        },
        xAxis: {
            show: false
        },
        yAxis: {
            type: "category",
            inverse: true,
            nameGap: 16,
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                interval: 0,
                margin: 0,
                textStyle: {
                    color: "#fff",
                    align: "left",
                    fontSize: 12
                },
                rich: {
                    a: {
                        color: "transparent",
                        backgroundColor: areaColors[0],
                        width: 8,
                        height: 8,
                        align: "center",
                        borderRadius: 4
                    },
                    b: {
                        color: "transparent",
                        backgroundColor: areaColors[1],
                        width: 8,
                        height: 8,
                        align: "center",
                        borderRadius: 4
                    },
                    c: {
                        color: "transparent",
                        backgroundColor: areaColors[2],
                        width: 8,
                        height: 8,
                        align: "center",
                        borderRadius: 4
                    },
                    d: {
                        color: "transparent",
                        backgroundColor: areaColors[3],
                        width: 8,
                        height: 8,
                        align: "center",
                        borderRadius: 4
                    }
                },
                formatter: function (params) {
                    if (parseInt(params.slice(0, 1)) == 0) {
                        return [
                            "{a|" + 0 + "}" + "  " + params.slice(1)
                        ].join("\n");
                    } else if (parseInt(params.slice(0, 1)) == 1) {
                        return [
                            "{b|" + 0 + "}" + "  " + params.slice(1)
                        ].join("\n");
                    } else if (parseInt(params.slice(0, 1)) == 2) {
                        return [
                            "{c|" + 0 + "}" + "  " + params.slice(1)
                        ].join("\n");
                    } else if (parseInt(params.slice(0, 1)) == 3) {
                        return [
                            "{d|" + 0 + "}" + "  " + params.slice(1)
                        ].join("\n");
                    }
                }
            },
            data: ["0高", "1中高", "2中", "3低"]
        },
        tooltip: {
            backgroundColor: "rgba(11, 37, 103, 0.7)",
            borderColor: "#FFFFCC",
            padding: 10,
            showDelay: 0,
            hideDelay: 0,
            enterable: true,
            transitionDuration: 0,
            extraCssText: "z-index:100",
            position: function (p) {
                return [p[0] + 20, p[1] + 10];
            },
            formatter: function (params, ticket, callback) {
                let enterpriseName = params.value[2];
                // 鼠标触摸 要显示的内容
                let res = "";
                // 判断当前点是否在自定义的列表中
                if (that.enterprises.indexOf(enterpriseName) !== -1) {
                    res = `<p style="white-space:normal; width: 200px;word-break:break-all;">${params.marker}${enterpriseName}</p>
                            <table style='font-size:12px; border-collapse: collapse; width: 200px;display:flex;'>
                                <tr>
                                    <th style="border: 1px solid #41c4ff; text-align:center; padding:3px;flex:1">事件数量</th>
                                    <th style="border: 1px solid #41c4ff; text-align:center; padding:3px;flex:1">安全指数等级</th>
                                </tr>
                                <tr>
                                    <td style="border: 1px solid #41c4ff; text-align: left; padding:3px;font-weight: 300;flex:1;">${that.eventNum[enterpriseName]}</td>
                                    <td style="border: 1px solid #41c4ff; text-align: left; padding:3px;font-weight: 300;flex:1;">${that.safeIndex[enterpriseName]}</td>
                                </tr>
                            </table>`;
                }
                return res;
            }
        },
        geo: {
            show: true,
            map: "china",
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false
                }
            },
            roam: false, //是否允许地图缩放、平移
            layoutCenter: ["46%", "50%"], //地图位置
            layoutSize: "120%", //125%
            itemStyle: {
                normal: {
                    color: "#3156D7", //地图颜色  原"#052951"
                    // areaColor:'#02304D',
                    areaColor: "#3156D7",
                    borderColor: "#41FBFF", //省市边界线
                    borderWidth: 1
                    // shadowColor: "rgba(0,0,0,1)",
                    // shadowBlur: 20,
                    // shadowOffsetX: -10,
                    // shadowOffsetY: 10
                },
                emphasis: {
                    color: "#052A4D" //悬浮背景
                }
            }
        },
        series: series
    };

    this.echart1.setOption(option);
}

效果图：