echarts 地图 缩放 图标 画线

  mounted() {
        this.$nextTick(() => {
            this.init()
        })
    },
    methods: {
        init() {
            var myChart = this.$echarts.init(document.getElementById('shanximap'));
            this.$echarts.registerMap("shanxi", shanxi);
            let option = {
                geo: [
                    {
                        map: "shanxi",
                        zoom: 1.1,
                        roam: true,
                        animation: false,
                        animationDurationUpdate: 0,
                        z: 2,
                        itemStyle: {
                            normal: {
                                color: {
                                    type: "linear",
                                    x: 0,
                                    x2: 0,
                                    y: 0,
                                    y2: 1,
                                    colorStops: [
                                        { offset: 0, color: "#10221E" },
                                        { offset: 0.9, color: "#184A35" },
                                    ],
                                },
                                borderWidth: 1, //分界线width
                                borderColor: "RGBA(140, 242, 222, 0.9)",
                                shadowColor: "RGBA(32, 180, 227, .3)", //阴影颜色
                                shadowBlur: 100, //阴影大小
                                // shadowOffsetX: 2, //沿x轴宽度
                                // shadowOffsetY: 2, //沿y轴宽度
                                borderCap: "square",
                            },
                        },
                        emphasis: {
                            label: {
                                show: false, //是否显示高亮
                                textStyle: {
                                    color: "#fff",
                                    fontSize: 15, //高亮放大字体
                                },
                            },
                            itemStyle: {
                                color: "#174C35",
                            },
                        },
                    },
                    {
                        map: "shanxi",
                        zoom: 1.12,
                        roam: true,
                        animation: false,
                        animationDurationUpdate: 0,
                        z: 1,
                        itemStyle: {
                            normal: {
                                color: {
                                    type: "linear",
                                    x: 0,
                                    x2: 0,
                                    y: 0,
                                    y2: 1,
                                    colorStops: [
                                        { offset: 0, color: "RGBA(15, 170, 227, 1)" },
                                        { offset: 0.9, color: "RGBA(14, 153, 229, .9)" },
                                    ],
                                },
                                borderWidth: 1, //分界线width
                                borderColor: "RGBA(255, 255, 255, 0.9)",
                                shadowColor: "RGBA(186, 236, 233, 1)", //阴影颜色
                                shadowBlur: 1, //阴影大小
                                shadowOffsetX: 2, //沿x轴宽度
                                shadowOffsetY: 5, //沿y轴宽度
                                borderCap: "square",
                            },
                        },
                    }
                ],
                series: [
                    {
                        name: '故障',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        symbol: fault,
                        symbolSize: [50, 50],
                        data: [
                            {
                                name: '故障1',
                                value: [108.797426, 34.10671],
                            },
                            {
                                name: '故障2',
                                value: [109.856208, 34.950969],
                            }
                        ]
                    },
                    {
                        name: '故障',
                        type: 'lines',
                        coordinateSystem: 'geo',
                        data: [
                            {
                                name: '西安',
                                coords: [
                                    [108.797426, 34.10671],
                                    [109.856208, 34.950969]
                                ]
                            }
                        ],
                        polyline: true,
                        lineStyle: {
                            color: '#FFF440',
                            opacity: 0.6,
                            width: 5
                        }
                    }
                ]
            }
            myChart.setOption(option, true);
            window.onresize = function () {
                myChart.resize();
            };

            myChart.off("georoam");
            myChart.on("georoam", function (params) {
                let option = myChart.getOption(); //获得option对象
                if (params.zoom != null && params.zoom != undefined) {
                    //捕捉到缩放时
                    option.geo[1].zoom = option.geo[0].zoom + 0.02; //下层geo的缩放等级跟着上层的geo一起改变
                    option.geo[1].center = option.geo[0].center; //下层的geo的中心位置随着上层geo一起改变
                } else {
                    //捕捉到拖曳时
                    option.geo[1].center = option.geo[0].center; //下层的geo的中心位置随着上层geo一起改变
                }
                myChart.setOption(option); //设置option
            });
        }
    }