<template>
    <div class="container" @click.stop>
        <div id="EMap" style="height: 100%"></div>
    </div>
</template>

<script>
export default {
    name: "EMap",
    data() {
        return {
            data: [40, 38.5, 48.2, 43.6, 42.8, 55.6, 44.6],
        };
    },
    mounted() {
        this.drawChart();
    },
    methods: {
        drawChart() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById("EMap"));

            var color = ["#46bee9"];
            var series = [];
            var res = [];
            var lineData = [
                {
                    val: 32,
                    blat: 31.027129,
                    blon: 119.751063,
                    elat: 30.165696,
                    elon: 103.871896,
                    bcitysim: "湖州市",
                    ecitysim: "成都市",
                },
                {
                    val: 32,
                    blat: 31.027129,
                    blon: 119.751063,
                    elat: 23.384484,
                    elon: 113.088942,
                    bcitysim: "湖州市",
                    ecitysim: "广州市",
                },
                {
                    val: 32,
                    blat: 31.027129,
                    blon: 119.751063,
                    elat: 40.030195,
                    elon: 116.529236,
                    bcitysim: "湖州市",
                    ecitysim: "北京市",
                },
                {
                    val: 32,
                    blat: 31.027129,
                    blon: 119.751063,
                    elat: 31.027129,
                    elon: 119.751063,
                    bcitysim: "湖州市",
                    ecitysim: "长沙市",
                },
                {
                    val: 32,
                    blat: 31.027129,
                    blon: 119.751063,
                    elat: 34.292662,
                    elon: 109.243907,
                    bcitysim: "湖州市",
                    ecitysim: "西安市",
                },
            ];
            for (var i = 0; i < lineData.length; i++) {
                res.push({
                    fromName: lineData[i].bcitysim,
                    toName: lineData[i].ecitysim,
                    coords: [
                        [lineData[i].blon, lineData[i].blat],
                        [lineData[i].elon, lineData[i].elat],
                    ],
                    count: lineData[i].val,
                });
            }
            // var planePath = "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAEbklEQVR4Xu2bT4gbdRTHv282mdh2D16q2CazLdrNJIuH1YooIhV6aFnFi72J+BdFQUEsIhZU0EuxF0XFP1XBW0WQKmoF0Yt/DrpbtG0mu7VuftmK4kFWW9n5TTJPZjfZTWk3M5NkZn7sTq7zfvPe7zNv3nv55RtCTJ+qoT8Hwl5m3DgolwT86gIfloR8ptd7Uq8Lw6yrGvoJBsbCrAlly3jXrMsHQq1pGUcOoGLokwSMt4Mj8J8MEmA+f1HARLt62cTiGpf2mnP2F2HXRwqgUsgeIqIn20FpoMdHhf3qpYKs5DO7SNO+DruBZbDMh4p156mw6yMDMD2Sm3CZP10JiF8xhfPEagH2CwDM35h15zYlAPy4BRs3DenzRMi0AqqaQprdgltTACoF/Qei5WrvmELqfk9mzQCwCtnXQPRoe8NNaLvHxMJX6wKAVcjeD6LDHZs9aAr5tN/mves9ZsAxAr5nxnGNtF9GxcKZIL46bQZWBE/mc9cMkfsdiDZ7Dhj4qCTkXUEDCgOAgAUC7RsVdkeRDerpQruBAbAK+ucg7Gltfqok5HVhQgoMgPkvs+5c0Xnvma0b8o2MU8iwNg9dzu04jX+C+h4IAKugvwjCs55TAuYZ7oQpGt8GDSLMK0DQdhdbNWV2ZONVC9x4E8Adnb6YaH+pZr8cxH/fAKaN3O0u+JPlgQR8T1E4HwRx3mkTKAOYXzfrzmPeupmR7HiTaXJVP0yHzbr9oF8cfQOwDP1o+wkQ8HxRyBf8nF7qehAATY3Hx2ad496cMZzRfwZwdTdfzLSnVLePdbMZBIC/AVzOwNT5hrxl5+/4LyIAzrnNctPOn+BUCtl7ieg9Pz8Eeqso7IejBsCLDnocRdvBBciAE6aQ13r2lpF7G2Df9GbgdEnIHWsFQMUUsrwEQPdqzN1+GQBg1hRy+1oB4DSH5fDYKUirkH0ERG/4ASDg/aKQ960VAHCJry/XnMmTZehD53Tvq/PNKhTBuGqAN2S8ZNbkgcW5Ydtl28h1f4utDVqGfoTBtxLoSr/Ui/K6RiiP1mRlsRZszxXRZK8b3NTpM0w7DtQGLUNfesoKfAg4UxTygv5fzW/Y2kAjn8nQPOfkWbOKf4OG6gvAMvSPAdwZ9IYx2TkADphCHuzXXxAAZwFs6ddRROu/BDAFYNJ1aao8Z8+E9RMEgDLp33VzPQ5iKQC/lFGpAKYZ0H3qieZYPM0AhWaA9BVIX4EuBNI2GNFvg2kRTIugOt8E0y6QdoG0C6xOIG2D67MNRq8PUHEOiFUfoByAuPUBqgGIXR+gFIAk9AEqAUhEH6AQgGT0AQoBSEYfoBCAZPQBCgFIRh+gEIBk9AEqAUhEH6AUAACx6wNUA5CEPkDFX4dj1QeoCKB9MJLqA5aPiNITofV5IrRyRphmQEQZUDGyfyStDfRTsSxdp3dMYT8UzHbFKohG6AiAfWFvHLc9EU0Ua/ZnYf36AvBuqNowdNEm4/jzdEsweYNSmkHGNICjZl3uD/vk2/b/A7Al1F8rN7cqAAAAAElFTkSuQmCC";
            var planePath = "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAE8klEQVR4Xu2bT2gcdRTHv2+y89tgq8GDKDY7ibVNZq1KjR78c7EUrEotguitYK1/UNGL4kVBhYqIIigoivUP4q1epJb2ICgiSrHaQ0kym1razKYR7cVD2rqzm30y2d2Qprv7m3m/mW1qZy4J+5v33u995vfem/nNG4LBMemoNy3gYQauN1BzjigRDoKxf9QPXk9KZzc9JDXiFdSnIDwmldfJETA+6gc36s4zHRcB8Abz98Li/WLjzD+cJ0u0isAOg65ujTFwuOgHY2I7EQRFAEoF+x0meiGC/rancL2+qThTOx8CgCkn/1wd/P4iBOZ3i+Wq2JZujiIAXsH+HkR365R3Gu8GIJTxHPs9gJ5vyVtEW0emK/uk9hLPAWkDaEBQHoDR8H9m1E7PBwO3zeJM0hBW5ApoOek5KgBgNyEcLJaD2y8pAONO/+Y+1L9bdJr5Q7dcfTZJCKIVMOX0r61z/SYibGTgDgBb4kxKlwOW6vIc9RaAl5ZA2OmWq5/FsZd4DliucMrJb2XwHgb6o0wsDoBQ36SjvibgoQXdzKfm2bpzw0zljyi2dOfEWgFH1+EKBGqwRvWBXM0urz95duacq1Ww/wbRVTqjcQE0IfxOwC0NCDjgloP7dHaijEcGMDmUf5GY316mdG8/5Z4anj7zZ/h7yenfzEtjtsMMJAA8J3cXwdrHwEATwhtuOXglipPGIeAV8rtBvLOToj7isfXT1cPhuFewPwDRM92MSgA0ANvbGfRlS7cFemDEr3xrAkG7AiYL+S1EfEBj5NhcLbg5rNPjw/bGvjotwOh0SAE0IKhXGXitqXuv6wfbUgVQcvIfM/hJnRFm3lEsV784dCvs1afU6Vb9bidnAuDQtbhsVU791MwH/7h+cKVubkYhMOmoowSs0xuh3a5feWIhDBx1BEDHJzkTAM0wW7wVd/1Au4qNAHiOOg5gWA8AX7l+sL0JYAJAMY0Q6DmAkqM+Z+BRLQDmp91y9aPxG6D65tRcWiHQcwARk+DP86uDTRsmEEwM2WMW029pJcGeA2gY7F4G2bKuK57498TCuUNqFxgv/68AtCk/Lf9+QR/tcI9XSuEPU0OqWGeE8X/BDgb/RaAfXT94JMokYmVQbxSXU0WtqdV4IIfczOjM2ZNLjZQcdYyBtVEM9+KcKBUiFoBOk/YcFT6t7eqW+HrhcBsb37h+8KBRGWwnPDGYX29ZHD6YhBuW4d97LpCDOrOzrh+sSRyA6ZaYbtZJjuvCQBQCGQDDXeEkr7BOV7YCNM8KWQjollC78SwHZDnA7NWYZNVJZbIkmCXB7jtGWRWQxFZWBbIqkFUBow4RSdhJZbIymEYZNO0PkF5NiVwqK2D5ROL2B0gckcokCiCp/gCpMxK5xAAk2R8gcUQqkwgA3YuRuP0BUmckcsYAIr4ai9UfIHFEKmMMII3+AKkzEjljAGn0B0gckcoYA0ijP0DqjETOGEAa/QESR6QyxgAiJsFY/QFSZyRyxgBCo7oyGLc/QOKIVCYRAKHxZe1prfmsuP6A5aASA7CwEi6y/oBwzokC6LQMV3B/QDoALqL+gHQAZJui2aZotil6iW+KOvlPAH5cenPSK7mwZ7DoV6/pZk/0aqw0lL+fmVP5kDFhOHt0DZMiAI3b43Q/nk4ChO4mKLQhBtCEEH5DtA2EkSQmnJCOWQC/6hokW7b+A1npqV9Y6YmlAAAAAElFTkSuQmCC";
            series.push(
                {
                    name: "",
                    type: "lines",
                    zlevel: 1,
                    effect: {
                        show: true,
                        constantSpeed: 20,
                        symbol: planePath,
                        symbolSize: 40,
                        trailLength: 0,
                    },
                    tooltip: {
                        formatter: function (param) {
                            return (
                                param.data.fromName +
                                ">" +
                                param.data.toName +
                                "<br>趟次：" +
                                param.data.count
                            );
                        },
                    },
                    lineStyle: {
                        normal: {
                            color: new this.$echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    {
                                        offset: 0,
                                        color: "#58B3CC",
                                    },
                                    {
                                        offset: 1,
                                        color: "#F58158",
                                    },
                                ],
                                false
                            ),
                            width: 2,
                            opacity: 0.5,
                            curveness: 0.1,
                        },
                    },
                    data: res,
                },
                {
                    type: "map",
                    mapType: "china",
                    top: "0%",
                    zoom: 1.5,
                    tooltip: {
                        show: false,
                    },
                    itemStyle: {
                        areaColor: "#00196d",
                        borderColor: "#0a53e9",
                    },
                    emphasis: {
                        label: {
                            show: false,
                        },
                        itemStyle: {
                            areaColor: "#00196d",
                            borderColor: "#0a53e9",
                        },
                    },
                }
            );
            let option = {
                legend: {
                    show: true,
                    selected: {},
                    x: "left",
                    orient: "vertical",
                    textStyle: {
                        color: "white",
                    },
                    data: [],
                },
                tooltip: {
                    trigger: "item",
                    show: true,
                },
                geo: {
                    map: "china",
                    label: {
                        show: false,
                    },
                    top: "0%",
                    zoom: 1.5,
                    roam: false,
                    itemStyle: {
                        areaColor: "#00196d",
                        borderColor: "#1773c3",
                        shadowColor: "#1773c3",
                        shadowBlur: 20,
                    },
                },
                series: series,
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            myChart.on('click', (param) => {
                this.$emit("e-click", param)
            });
        },
    },
};
</script>

<style lang="scss" scoped>
</style>