gis

记:Arcgis for JavaScript 3.X与Echa

2017-11-14  本文已影响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);

            });

如此,刷新页面即可。

上一篇下一篇

猜你喜欢

热点阅读