线图数据连通性展示ECharts Gallery

20:11:45图表已生成
代码
var data = ["象山社保", "职业鉴定", "劳动监察"];
var uploadedDataURL = "/asset/get/s/data-1526891266407-B19bm-lJQ.json";
var allData = {
    "citys": [{
            name: "职业鉴定",
            value: [
                125.44335937499999,
                36.38591277287651
            ],
            label: {
                normal: {}
            }
        },
        {
            name: "人才中心",
            value: [
                107.12695312499999,
                37.16031654673677
            ],
            label: {
                normal: {
                    position: "top",
                    offset: [0, 6]
                }
            }
        },
        {
            name: "阳光政务",
            value: [
                115.5,
                42.48830197960227
            ],
            label: {
                normal: {
                    position: "right",
                    offset: [-6, 0]
                }
            }
        },
        {
            name: "社保卡",
            value: [
                124.00390625,
                40.176808565702355
            ]
        },
        {
            name: "五险统征",
            value: [
                113.99414062499999,
                55.92458580482951
            ],
            label: {
                normal: {}
            }
        },
        {
            name: "象山社保",
            value: [
                111.26953125,
                47.15984001304432
            ],
            label: {
                normal: {
                    position: "left",
                    offset: [6, 0],
                    //backgroundColor: "red"
                }
            }
        },
        {
            name: "人事人才",
            value: [
                98.61328125,
                55.1286490684888
            ],
            label: {
                normal: {}
            }
        },
        {
            name: "劳动监察",
            value: [
                94.779296875,
                48.83798245308484
            ],
            label: {
                normal: {
                    position: "top",
                    offset: [0, 6]
                }
            }
        },
        {
            name: "宁海社保",
            value: [
                88.087890625,
                56.84897198026975
            ],
            label: {
                normal: {
                    position: "left",
                    offset: [8, 0]
                }
            }
        },
        {
            name: "慈溪社保",
            value: [
                83.154296875,
                42.61779143282346
            ],
            label: {
                normal: {}
            }
        },
        {
            name: "就业同步",
            value: [
                75.44140625,
                46.13417004624326
            ],
            label: {
                normal: {
                    position: "left",
                    offset: [8, 0]
                }
            }
        },
        {
            name: "自助服务一体机",
            value: [
                86.044921875,
                51.890053935216926
            ],
            label: {
                normal: {
                    position: "left",
                    offset: [8, 0]
                }
            }
        },
        {
            name: "全民参保",
            value: [
                76.595703125,
                61.897577621605016
            ],
            label: {
                normal: {
                    position: "left",
                    offset: [6, 0]
                }
            }
        },
        {
            name: "公共服务内网",
            value: [
                124.8046875,
                52.96187505907603
            ]
        },
        {
            name: "公共服务外网",
            value: [
                121.46484375,
                62.103882522897855
            ],
            label: {
                normal: {}
            }
        },
        {
            name: "",
            value: [
                104.442382625,
                25.895892559415024
            ],
            label: {
                normal: {
                    position: "center"
                }
            }
        },
        {
            name: "医保",
            value: [
                109.248046875,
                60.326947742998414
            ],
            label: {
                normal: {}
            }
        },
        {
            name: "12333",
            value: [
                90.703125,
                59.44507509904714
            ],
            label: {
                normal: {}
            }
        }
    ],
    "cityLine": [{
        name: "医保",
        coords: [

            [
                109.248046875,
                60.326947742998414
            ],
            [
                104.442382625,
                25.895892559415024
            ],
        ],
        lineStyle: {
            normal: {}
        }
    }, {
        name: "职业鉴定",
        coords: [
            [
                125.44335937499999,
                36.38591277287651
            ],
            [
                104.442382625,
                25.895892559415024
            ],
        ],
        lineStyle: {
            normal: {
                curveness: 0.35
            }
        }
    }, {
        name: "人才中心",
        coords: [
            [
                107.12695312499999,
                37.16031654673677
            ],
            [
                104.442382625,
                25.895892559415024
            ]
        ],
        lineStyle: {
            normal: {
                curveness: 0.1
            }
        }
    }, {
        name: "阳光政务",
        coords: [
            [
                115.5,
                42.48830197960227
            ],
            [
                104.442382625,
                25.895892559415024
            ]
        ],
        lineStyle: {
            normal: {}
        }
    }, {
        name: "社保卡",
        coords: [

            [
                124.00390625,
                40.176808565702355
            ],
            [
                104.442382625,
                25.895892559415024
            ],
        ],
        lineStyle: {
            normal: {
                curveness: 0.3
            }
        }
    }, {
        name: "五险统征",
        coords: [
            [
                113.99414062499999,
                55.92458580482951
            ],
            [
                104.442382625,
                25.895892559415024
            ],
        ],
        lineStyle: {
            normal: {}
        }
    }, {
        name: "象山社保",
        coords: [
            [
                111.26953125,
                47.15984001304432
            ],
            [
                104.442382625,
                25.895892559415024
            ],
        ],
        lineStyle: {
            normal: {
                // color: "red",
                // width: 2,
                // type: "dashed",
                curveness: 0.1
            }
        }
    }, {
        name: "人事人才",
        coords: [
            [
                98.61328125,
                55.1286490684888
            ],
            [
                104.442382625,
                25.895892559415024
            ],
        ],
        lineStyle: {
            normal: {
                curveness: -0.1
            }
        }
    }, {
        name: "劳动监察",
        coords: [
            [
                94.779296875,
                48.83798245308484
            ],
            [
                104.442382625,
                25.895892559415024
            ],
        ],
        lineStyle: {
            normal: {
                curveness: -0.18
            }
        }
    }, {
        name: "宁海社保",
        coords: [
            [
                88.087890625,
                56.84897198026975
            ],
            [
                104.442382625,
                25.895892559415024
            ],
        ],
        lineStyle: {
            normal: {
                curveness: -0.2
            }
        }
    }, {
        name: "慈溪社保",
        coords: [
            [
                83.154296875,
                42.61779143282346
            ],
            [
                104.442382625,
                25.895892559415024
            ],
        ],
        lineStyle: {
            normal: {
                curveness: -0.2
            }
        }
    }, {
        name: "就业同步",
        coords: [
            [
                75.44140625,
                46.13417004624326
            ],
            [
                104.442382625,
                25.895892559415024
            ],
        ],
        lineStyle: {
            normal: {
                curveness: -0.35
            }
        }
    }, {
        name: "自助服务一体机",
        coords: [
            [
                86.044921875,
                51.890053935216926
            ],
            [
                104.442382625,
                25.895892559415024
            ],
        ],
        lineStyle: {
            normal: {
                curveness: -0.2
            }
        }
    }, {
        name: "全民参保",
        coords: [
            [
                76.595703125,
                61.897577621605016
            ],
            [
                104.442382625,
                25.895892559415024
            ],
        ],
        lineStyle: {
            normal: {
                curveness: -0.4
            }
        }
    }, {
        name: "公共服务内网",
        coords: [
            [
                124.8046875,
                52.96187505907603
            ],
            [
                104.442382625,
                25.895892559415024
            ],
        ],
        lineStyle: {
            normal: {
                curveness: 0.3
            }
        }
    }, {
        name: "公共服务外网",
        coords: [
            [
                121.46484375,
                62.103882522897855
            ],
            [
                104.442382625,
                25.895892559415024
            ],
        ],
        lineStyle: {
            normal: {
                curveness: 0.3
            }
        }
    }, {
        name: "12333",
        coords: [
            [
                90.703125,
                59.44507509904714
            ],
            [
                104.442382625,
                25.895892559415024
            ],
        ],
        lineStyle: {
            normal: {
                curveness: -0.2
            }
        }
    }]
};
data.forEach(function(t) {
    var warnOpt = t;
    console.log(allData);
    allData.citys.forEach(function(p1, index1) {
        if (p1.name === warnOpt) {
            allData["citys"][index1]["label"]["normal"]["backgroundColor"] = "red";
        }
    });
    allData.cityLine.forEach(function(p2, index2) {
        if (p2.name === warnOpt) {
            allData["cityLine"][index2]["lineStyle"]["normal"]["color"] = "red";
            allData["cityLine"][index2]["lineStyle"]["normal"]["width"] = 2;
            allData["cityLine"][index2]["lineStyle"]["normal"]["type"] = "dashed";
        }
    });
    console.log(allData);
});
var option2 = {
    geo: {
        zoom: 1.2,
        map: 'ditu',
        label: {
            emphasis: {
                show: false
            }
        },
        silent: true,
        roam: false,
        itemStyle: {
            normal: {
                areaColor: 'rgba(0,0,0,0)',
                borderColor: 'rgba(0,0,0,0)'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [{
        name: '地点',
        type: 'scatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: {
            brushType: 'stroke',
            period: 7,
            scale: 26
        },
        label: {
            normal: {
                show: true,
                color: "#fff",
                offset: [-8, 0],
                position: 'right',
                formatter: '{b}',
                backgroundColor: "rgb(24,171,154)",
                padding: [5, 10],
                borderRadius: 20
            }
        },
        symbolSize: 1,
        itemStyle: {
            normal: {
                color: '#46bee9'
            }
        },
        data: allData.citys
    }, {
        name: '线路',
        type: 'lines',
        coordinateSystem: 'geo',
        zlevel: 2,
        large: true,
        effect: {
            show: true,
            constantSpeed: 30,
            symbol: 'arrow', //ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
            symbolSize: 6,
            trailLength: 0,
        },
        lineStyle: {
            normal: {
                // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                //     offset: 0,
                //     color: '#58B3CC'
                // }, {
                //     offset: 1,
                //     color: '#F58158'
                // }], false),
                color: "rgb(24,171,154)",
                width: 1,
                opacity: 0.6,
                curveness: 0.2
            }
        },
        data: allData.cityLine
    }]
};
$.get(uploadedDataURL, function(geoJson) {
    echarts.registerMap('ditu', geoJson);
    myChart.setOption(option2);
});
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
