Echarts label使用labelLine引导线连接点和label

echarts yekong 65℃

Echarts label使用labelLine引导线连接点和label

            drawechartmap() {
                var that = this;
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
                var myChart = echarts.init(document.getElementById("echartmap"));
                var uploadedDataURL = "js/assets/data-1528971808162-BkOXf61WX.json";
                // 几大城市坐标
                var data = this.list;

                var labelData = [
                    {name: '盐田港', value: 1, coords: [[114.237, 22.5571], [121.724537, 26.726456]]},
                    {
                        name: '大铲湾港',
                        value: 1,
                        coords: [[113.863247421228, 22.5312412021239], [119.148915, 22.283712]]
                    },
                    {
                        name: '深圳小漠港',
                        value: 1,
                        coords: [[115.043340287618, 22.7710296767815], [118.78097, 19.970753]]
                    },
                    {
                        name: '惠州荃湾港',
                        value: 1,
                        coords: [[114.567119501524, 22.6945041397154], [112.599478, 17.057501]]
                    },
                ]
                var seriesData = [];
                seriesData.push({
                    name: '区域',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: labelData,
                    label: {
                        normal: {
                            show: true,
                            padding: [10, 20],
                            color: '#fff',
                            areaColor: '#fff',
                            backgroundColor: '#000',
                            borderRadius: 6,
                            formatter: '{b}'
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    symbolSize: 1
                })

                function convertData(data) {
                    var res = [];
                    for (var i = 0; i < data.length; i++) {
                        var geoCoord = geoCoordMap[data[i].name];
                        if (geoCoord) {
                            res.push({
                                name: data[i].name,
                                value: geoCoord.concat(data[i].value)
                            });
                        }
                    }
                    return res;
                }

                function convertData1(data) {
                    var res = [];
                    for (var i = 0; i < data.length; i++) {
                        var geoCoord = geoCoordMap1[data[i].name];
                        if (geoCoord) {
                            res.push({
                                name: data[i].name,
                                value: geoCoord.concat(data[i].value)
                            });
                        }
                    }
                    return res;
                }

                function convertData2(data) {
                    var res = [];
                    for (var i = 0; i < data.length; i++) {
                        var geoCoord = geoCoordMap2[data[i].name];
                        if (geoCoord) {
                            res.push({
                                name: data[i].name,
                                value: geoCoord.concat(data[i].value)
                            });
                        }
                    }
                    return res;
                }

                var option = null;
                $.get(uploadedDataURL, function (json) {
                    echarts.registerMap('js', json);
                    option = {
                        geo: [{
                            map: 'js',
                            aspectScale: 0.75,
                            roam: false, //是否允许缩放
                            zoom: 1.2, //默认显示级别
                            show: false,
                            itemStyle: {
                                normal: {
                                    areaColor: 'rgba(142, 204, 174, 0)'
                                },
                                emphasis: {
                                    areaColor: 'rgba(142, 204, 174, 0)'
                                }
                            },
                        }],
                        series: [
                            {
                                type: 'map',
                                mapType: 'js',
                                geoIndex: 0,
                                zoom: 1.2, //默认显示级别
                                label: {
                                    normal: {
                                        show: false,
                                        position: 'top',
                                        rich: {
                                            name: {
                                                color: '#fff',
                                                align: 'center',
                                                fontSize: 10,
                                                padding: [1, 4, 1, 4],
                                                backgroundColor: 'rgba(75, 152, 150, 1)'
                                            },
                                            pic: {
                                                color: '#fff',
                                                align: 'center',
                                                width: 9,
                                                height: 6,
                                                lineHeight: 22,
                                                backgroundColor: {
                                                    image: 'images/icon_sanjiao.png'  // 这是vue写法,不是的按原来的写就行
                                                },
                                            },
                                        },
                                    },
                                    emphasis: {
                                        show: false,
                                    },
                                },
                                itemStyle: {
                                    normal: {
                                        borderColor: 'rgba(142, 204, 174, 0)',
                                        borderWidth: 0,
                                        areaColor: 'rgba(13, 87, 55, 0)'
                                    },
                                    emphasis: {
                                        areaColor: 'rgba(13, 87, 55, 0)',
                                        borderWidth: 0,
                                        color: 'green'
                                    }
                                },
                            },                       {
                                type: 'lines',
                                data: labelData,
                                symbolSize: 5,
                                symbol: 'circle',
                                color: 'red',
                                label: {
                                    show: true,
                                    padding: [10, 10],
                                    color: '#fff',
                                    areaColor: 'red',
                                    borderRadius: 6,
                                    formatter: '{b}'
                                },
                                lineStyle: {
                                    type: 'solid',
                                    opacity: 1,
                                    color: '#fff'
                                }
                            }
                        ]
                    };
                    // 点击弹窗
                    myChart.on('click', function (params) {
                        console.log(params)
                        that.getactive(params.name)
                        myChart.setOption(option, false)
                    });
                    myChart.setOption(option);
                });
            },

效果演示

喜欢 (0)