</div>china.json获取地址 http://datav.aliyun...">
最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • echarts画飞线图

    正文概述 掘金(小萌旭)   2020-12-04   1450

    先看看效果图 echarts画飞线图

    新建html

     <div id="flying-lines" class="pt-5"></div>
    

    china.json获取地址

    http://datav.aliyun.com/tools/atlas/#&lat=30.37018632615852&lng=106.68898666525287&zoom=3.5
    

    新建js文件(使用的jquery)

    $(function () {
        "use strict"
        $.ajax({
            url: 'https://geo.datav.aliyun.com/areas_v2/bound/100000.json',
            success: function(data) {
                var flyingLines = document.getElementById('flying-lines')
                var chart = echarts.init(flyingLines)
                echarts.registerMap('china', data)
                // 地区索引, 也可以根据名称查找,逻辑调整下就行
                var areaIndex =  [9, 3, 4, 14, 27, 18, 19]
                var coor = []
                for(var i = 0; i< areaIndex.length; i++) {
                    coor.push({
                        name: data.features[areaIndex[i]].properties.name,
                        value: data.features[areaIndex[i]].properties.center
                    })
                }
                var lines_coord = []
                for(var i = 0; i< coor.length; i++) {
                    if(coor[i].value) {
                        lines_coord.push({
                            coords: [coor[i].value, [117.137891,34.302287]]
                        })
                    }
                }
                var series = [{
                    type:'effectScatter',
                    coordinateSystem: 'geo',
                    zlevel: 18,
                    symbolSize: 4,
                    rippleEffect: {
                        period: 4, brushType: 'stroke', scale: 4
                    },
                    itemStyle:{
                        color:'#1A8CF2',
                        opacity:1
                    },
                    data: coor
                },  {
                    type:'lines',
                    coordinateSystem:'geo',
                    zlevel: 15,
                    effect: {
                        show: true,
                        period: 8,
                        // constantSpeed: 20,
                        trailLength: .1,
                        symbol: 'circle',
                        color:'#01AAED',
                        symbolSize: 5,
                    },
                    lineStyle: {
                        normal: {
                            width: 1.2,
                            opacity: 0.6,
                            curveness: 0.2,
                            color:  {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: '#1A92FF' // 0% 处的颜色
                                }, {
                                    offset: 1, color: '#8be1f4' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        }
                    },
                    data: lines_coord
                }
                ]
                // coord, value
                var option ={
                    geo: {
                        map: 'china',
                        zlevel: 10,
                        show: true,
                        layoutCenter: ['50%', '50%'],
                        roam: false,
                        layoutSize: "90%",
                        zoom: 1,
                        label: {
                            normal: {
                                show: false,
                                textStyle:{
                                    fontSize:12,
                                    color: '#6d3142'
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: {
                                    type: 'radial',
                                    x: 0.5,
                                    y: 0.5,
                                    r: 0.5,
                                    colorStops: [{
                                        offset: 0, color: '#071E39' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: '#17436A' // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                },
                                borderWidth: .5,
                                borderColor: '#1B72C1',
                                shadowColor: '#4E779C',
                                shadowBlur: 8
                            }
                        },
                        emphasis: {
                            label:{
                                show:false
                            },
                            itemStyle: {
                                areaColor: {
                                    type: 'radial',
                                    x: 0.5,
                                    y: 0.5,
                                    r: 0.5,
                                    colorStops: [{
                                        offset: 0, color: '#17436A' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: '#5FB7FF' // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                }
                            }
                        }
                    },
                    series: series
                }
                chart.setOption(option);
            }
        })
    })
    
    

    有问题欢迎指正~


    起源地下载网 » echarts画飞线图

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元