美文网首页gis
记:Arcgis for JavaScript 3.X与Echa

记:Arcgis for JavaScript 3.X与Echa

作者: 天上月丶 | 来源:发表于2017-11-14 19:47 被阅读10次
    arcgis+echars
    本文记录是和echarts关系图结合使用。
    https://github.com/wandergis/arcgis-echarts3
    上述地址是主要代码所在,这里只是记录整理一下。
    首先,将上述github内代码下载下来,我们需要用到里面两个文件,dist/main.js和src/Echarts3Layer.js。
    引入文件
    页面中需引入这三个文件,注意:main.js一定要在dojo.js之前引入。
    引入echarts3layer
    在你的js代码中引入Echarts3Layer,我的是放置在和init.js同级目录下,所以以上引入,各位可根据自己的文件位置引入。
    在map.on('load')时初始化echatrs图表信息,在option中,geo处设置为空即可。
    map.on('load', function () {
    
                    overlay = new Echarts3Layer(map, echarts);
                    var chartsContainer = overlay.getEchartsContainer();
                    myChart = overlay.initECharts(chartsContainer);
    
                    var lineStyle = {
                        normal: {
                            color: '#FF6666',
                            width: 1,
                            opacity: 0.6,
                            curveness: 0.2
                        }
                    };
                    var data = [你的关系图或者其它任何图表的data];
                    option = {
                        tooltip: {
                            trigger: 'item'
                        },
                        geo: {
                            map: '',
                            label: {
                                emphasis: {
                                    show: false
                                }
                            },
                            roam: true,
                            itemStyle: {
                                normal: {
                                    areaColor: '#323c48',
                                    borderColor: '#404a59'
                                },
                                emphasis: {
                                    areaColor: '#2a333d'
                                }
                            }
                        },
                        series: [
                            {
                                type: 'lines',
                                zlevel: 2,
                                lineStyle: lineStyle,
                                effect: {
                                    show: true,
                                    period: 6,
                                    trailLength: 0,
                                    symbol: 'image://../img/router.png',
                                    symbolSize: 15
                                },
                                data: data.tGeoDt
    
                            }
                            , {
                                type: 'effectScatter',
                                coordinateSystem: 'geo',
                                zlevel: 2,
                                showEffectOn: 'emphasis',
                                symbol: 'image://../img/switch.png',
                                symbolSize: 20,
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'right',
                                        formatter: '{b}',
                                        color: 'auto'
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        color: '#fff'
                                    }
                                },
                                data: data.vGeoDt,
                                tooltip: {
                                    trigger: 'item',
                                    formatter: function (param) {
                                        return param.name + ':' + param.value + '<br/>' + '所属AS,interfaces数目';
                                    }
                                }
                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    overlay.setOption(option);
    
                });
    

    如此,刷新页面即可。

    相关文章

      网友评论

        本文标题:记:Arcgis for JavaScript 3.X与Echa

        本文链接:https://www.haomeiwen.com/subject/orofvxtx.html