深湛高铁线路（echarts）

最新推荐文章于 2024-04-22 09:57:26 发布
最新推荐文章于 2024-04-22 09:57:26 发布
阅读量966 收藏 2
点赞数
文章标签： javascript python ViewUI
原文链接：https://my.oschina.net/oisanblog/blog/1580474
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

完整代码。

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>深湛高铁线路</title>
    <script src="echarts.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
    <div id="main" style="width:100%;height:100%"></div>

    <script type="text/javascript">
  function area(name, color) {
    var a = {
        name: name,
        selected: true,
        itemStyle: {
            emphasis: {
                areaColor: color,
                borderColor: '#f47920',
                borderWidth: 1
            }
        }
    };
    return a;
}
var geodata = [{
    name: '广州市',
    value: [113.43, 23.26]
}, {
    name: '佛山市',
    value: [112.98, 23.01]
}, {
    name: '东莞市',
    value: [113.85, 23.01]
}, {
    name: '中山市',
    value: [113.38, 22.52]
}, {
    name: '江门市',
    value: [112.70, 22.31]
}, {
    name: '阳江市',
    value: [111.90, 21.95]
}, {
    name: '茂名市',
    value: [110.99, 21.68]
}, {
    name: '湛江市',
    value: [110.24, 21.25]
}, ];
var geodata1 = [{
    name: '深圳市',
    value: [114.07, 22.62]
}];

$.get('guangdong.json', function(gdJson) {
    echarts.registerMap('广东', gdJson);

    option = {
        backgroundColor: '#4f5555',
        title: {
            text: '深湛高铁线路',
            subtext: '数据来源百科',
            sublink: 'https://baike.baidu.com/item/%E6%B7%B1%E8%8C%82%E9%93%81%E8%B7%AF/14764609?fromtitle=%E6%B7%B1%E8%8C%82%E9%AB%98%E9%80%9F%E9%93%81%E8%B7%AF&fromid=2671159',
            textStyle: {
                color: '#7bbfea'
            }
        },
        geo: {
            map: '广东',
            label: {
                emphasis: {
                    show: false
                }
            },
            roam: true,
            zlevel: 1,
            itemStyle: {
                normal: {
                    areaColor: '#031525',
                    borderColor: '#3B5077'
                },
                emphasis: {
                    areaColor: '#031525'
                }
            },
            regions: [area('深圳市', '#694d9f'),
                area('东莞市', '#45224a'),
                area('佛山市', '#45224a'),
                area('广州市', '#45224a'),
                area('中山市', '#45224a'),
                area('江门市', '#45224a'),
                area('阳江市', '#45224a'),
                area('茂名市', '#45224a'),
                area('湛江市', '#45224a'),
            ]
        },
        series: [{
                type: 'lines',
                coordinateSystem: 'geo',
                //polyline:true,
                symbol: ['none', 'triangle'],
                zlevel: 2,
                effect: {
                    show: true,
                    symbol: 'roundRect',
                    period: 2,
                    delay: 100,
                    trailLength: 0.6,
                    symbolSize: 6,
                },
                lineStyle: {
                    normal: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: '#ed1941'
                            }, {
                                offset: 1,
                                color: '#ffce7b'
                            }],
                            globalCoord: false
                        },
                        width: 1,
                        opacity: 0.8,
                        //type: 'dotted',
                        curveness: 0.2,
                    }
                },
                data: [{
                    coords: [ //sz-东莞
                        [114.07, 22.62],
                        [113.85, 23.01],
                    ]
                }, {
                    coords: [ //dg-广州
                        [113.85, 23.01],
                        [113.43, 23.26],
                    ]
                }, {
                    coords: [ //sz-中山
                        [114.07, 22.62],
                        [113.38, 22.52],
                    ]
                }, {
                    coords: [ //gz-佛山
                        [113.43, 23.26],
                        [112.98, 23.01],
                    ]
                }, {
                    coords: [ //fs-江门
                        [112.98, 23.01],
                        [112.70, 22.31],
                    ]
                }, {
                    coords: [ //zs-江门
                        [113.38, 22.52],
                        [112.70, 22.31],
                    ]
                }, {
                    coords: [ //jm-阳江
                        [112.70, 22.31],
                        [111.90, 21.95],
                    ]
                }, {
                    coords: [ //yj-茂名
                        [111.90, 21.95],
                        [110.99, 21.68],
                    ]
                }, {
                    coords: [ //mm-湛江
                        [110.99, 21.68],
                        [110.24, 21.25],
                    ]
                }]
            }, {
                type: 'lines',
                coordinateSystem: 'geo',
                //polyline:true,
                symbol: ['none', 'triangle'],
                zlevel: 2,
                effect: {
                    show: true,
                    symbol: 'roundRect',
                    period: 1.5,
                    delay: 100,
                    trailLength: 0.6,
                    symbolSize: 6,
                },
                lineStyle: {
                    normal: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: '#ed1941'
                            }, {
                                offset: 1,
                                color: '#ffce7b'
                            }],
                            globalCoord: false
                        },
                        width: 1,
                        opacity: 0.8,
                        //type: 'dotted',
                        curveness: 0.2,
                    }
                },
                data: [{
                    coords: [ //jm-阳江
                        [112.70, 22.31],
                        [111.90, 21.95],
                    ]
                }, {
                    coords: [ //yj-茂名
                        [111.90, 21.95],
                        [110.99, 21.68],
                    ]
                }, {
                    coords: [ //mm-湛江
                        [110.99, 21.68],
                        [110.24, 21.25],
                    ]
                }]
            }, {
                name: '到江门',
                type: 'lines',
                coordinateSystem: 'geo',
                //polyline:true,
                symbol: ['none', 'triangle'],
                zlevel: 2,
                effect: {
                    show: true,
                    symbol: 'roundRect',
                    period: 1.5,
                    delay: 100,
                    trailLength: 0.6,
                    symbolSize: 6,
                },
                lineStyle: {
                    normal: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: '#ed1941'
                            }, {
                                offset: 1,
                                color: '#cbb0e3'
                            }],
                            globalCoord: false
                        },
                        width: 1,
                        opacity: 0.8,
                        //type: 'dotted',
                        curveness: 0.2,
                    }
                },
                data: [{
                    coords: [ //阳江-江门
                        [111.90, 21.95],
                        [112.70, 22.31],
                    ]
                }, {
                    coords: [ //茂名-阳江
                        [110.99, 21.68],
                        [111.90, 21.95],
                    ]
                }, {
                    coords: [ //湛江-茂名
                        [110.24, 21.25],
                        [110.99, 21.68],
                    ]
                }]
            }, {
                name: '到深圳',
                type: 'lines',
                coordinateSystem: 'geo',
                //polyline:true,
                symbol: ['none', 'triangle'],
                zlevel: 2,
                effect: {
                    show: true,
                    symbol: 'roundRect',
                    period: 2,
                    delay: 100,
                    trailLength: 0.6,
                    symbolSize: 6,
                },
                lineStyle: {
                    normal: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: '#ed1941'
                            }, {
                                offset: 1,
                                color: '#cbb0e3'
                            }],
                            globalCoord: false
                        },
                        width: 1,
                        opacity: 0.8,
                        //type: 'dotted',
                        curveness: 0.2,
                    }
                },
                data: [{
                    coords: [ //东莞-深圳
                        [113.85, 23.01],
                        [114.07, 22.62],
                    ]
                }, {
                    coords: [ //广州-东莞
                        [113.43, 23.26],
                        [113.85, 23.01],
                    ]
                }, {
                    coords: [ //中山-深圳
                        [113.38, 22.52],
                        [114.07, 22.62],
                    ]
                }, {
                    coords: [ //佛山-广州
                        [112.98, 23.01],
                        [113.43, 23.26],
                    ]
                }, {
                    coords: [ //江门-佛山
                        [112.70, 22.31],
                        [112.98, 23.01],
                    ]
                },{
                    coords: [ //江门-中山
                        [112.70, 22.31],
                        [113.38, 22.52],
                    ]
                }, {
                    coords: [ //阳江-江门
                        [111.90, 21.95],
                        [112.70, 22.31],
                    ]
                }, {
                    coords: [ //茂名-阳江
                        [110.99, 21.68],
                        [111.90, 21.95],
                    ]
                }, {
                    coords: [ //湛江-茂名
                        [110.24, 21.25],
                        [110.99, 21.68],
                    ]
                }]
            }, {
                type: 'effectScatter',
                coordinateSystem: 'geo',
                showEffectOn: 'render',
                zlevel: 3,
                symbol: 'circle',
                symbolSize: 5,
                rippleEffect: {
                    brushType: 'stroke',
                    period: 5,
                    scale: 7
                },
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        offset: [1, 6],
                        show: true,
                        textStyle: {
                            color: "yellow"
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        show: true,
                        color: 'yellow'
                    }
                },
                data: geodata
            }, {
                type: 'effectScatter',
                coordinateSystem: 'geo',
                showEffectOn: 'render',
                zlevel: 3,
                symbol: 'circle',
                symbolSize: 7,
                rippleEffect: {
                    brushType: 'stroke',
                    period: 2,
                    scale: 10
                },
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        //offset: [1, -3],
                        show: true,
                        textStyle: {
                            color: "yellow"
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        show: true,
                        color: 'yellow'
                    }
                },
                data: geodata1
            },

            {
                name: '中转',
                type: 'scatter',
                coordinateSystem: 'geo',
                symbol: 'pin',
                symbolSize: 20,
                symbolOffset: [0, -10],
                //symbolRotate:30,
                label: {
                    normal: {
                        show: true,
                        //rotate: 30,
                        position: 'top',
                        //distance: 3,
                        backgroundColor: 'rgb(224,255,255)',
                        borderColor: '#aaa',
                        fontWeight: 100,
                        borderWidth: 1,
                        borderRadius: 4,
                        formatter: [
                            '{a|中转}'
                        ].join('\n'),
                        rich: {
                            a: {
                                align: 'center',
                                color: '#00E5EE',
                                fontSize: 10,
                                textShadowBlur: 1,
                                //textShadowColor: '#7A67EE',
                                textBorderColor: '#E8E8E8',
                                textBorderWidth: 1
                            },
                        }
                    },
                    emphasis: {
                        show: true,
                        //rotate: 30,
                        backgroundColor: 'rgb(224,255,255)',
                        borderColor: '#aaa',
                        fontWeight: 200,
                        borderWidth: 1,
                        borderRadius: 4,
                        formatter: [
                            '{a|中转站}'
                        ].join('\n'),
                        rich: {
                            a: {
                                align: 'center',
                                color: '#00CED1',
                                fontSize: 20,
                                textShadowBlur: 1,
                                //textShadowColor: '#7A67EE',
                                textBorderColor: '#E8E8E8',
                                textBorderWidth: 1
                            }
                        }

                    }
                },
                zlevel: 5,
                itemStyle: {
                    normal: {
                        //color: '#f58f98',
                        color: '#EE00EE',
                        borderWidth: 1,
                        borderColor: '#EE00EE'
                    }
                },
                data: [{
                    name: '江门市',
                    value: [112.70, 22.31]
                }]


            }
        ]
    };
    var myChart = echarts.init(document.getElementById('main'));
    myChart.setOption(option);
});
    
   
    </script>
</body>

</html>

如图，

转载于:https://my.oschina.net/oisanblog/blog/1580474

weixin_33832340
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue+echarts 区域地图绘制（街道）
qq_42221321的博客
12-21 6368
vue+echarts 区域地图绘制（街道）1、以下是本人参考别的博主的链接2、需要用到的资源3、获取地图JSON（1）[阿里云](http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5)获取--只精准到市区（--这里以深圳市为例）（2）[北斗卫星软件](http://www.bigemap.com/)获取--精准
vue vmap 高德地图路线规划
weixin_43873114的博客
03-17 809
组件 <template> <div class="map-wrap"> <el-amap :amap-manager="amapManager" :zoom="14" :center="centerPosition" vid="amapDemo" ref="reds" style="...
深圳地铁线路图及站点经纬度，echarts可用，包含6号线、8号线、10号线路
07-18
深圳地铁线路图及站点经纬度，echarts可用，包含6号线、8号线、10号线路；可用于地图展示等；json格式
Echarts省份地图上显示柱状图+指定区域高亮显示（地图柱状图）
zhanglongle_的博客
02-14 4351
Echarts省份地图上显示柱状图 指定区域高亮显示（地图柱状图）
探索中国高铁地图的Python Web应用：一个创新的数据可视化项目
最新发布
gitblog_00079的博客
04-22 333
探索中国高铁地图的Python Web应用：一个创新的数据可视化项目 项目地址:https://gitcode.com/KermitCode/china-gaotie-map_python_web.py 项目简介 China-Gaotie-Map_Python_Web.py 是一个基于Python构建的Web应用，旨在以互动的方式展示中国的高铁网络。该项目利用了开源技术和数据，让用户能够直观地了解...
Vue 使用 Apache Echarts 绘制地图（省市、地区、自定义）
热门推荐
~朴：shu的博客
07-04 2万+
使用Apache Echarts绘制中国、省市级、自定义地图的方法
vue项目使用 echarts 对国内各省份地图的在线调用解决方法（详解）
10年职场两茫茫，35岁凄凉奈若何
04-25 86
vue项目使用 echarts 对国内各省份地图的在线调用解决方法（详解）
粤港澳大湾区研究报告：中国先驱城市群+未来世界第一湾-世邦魏理仕-202202.pdf
04-15
区域内五个国际机场、三个世界级大港和多条高铁线路构成了密集的交通网络，而诸如港珠澳大桥、深中通道和深湛高铁等关键基建项目将进一步促进东西两岸的平衡发展，刺激西部地区的经济增长。 在投资策略上，报告建议...
2018-粤港澳大湾区：中国先驱城市群 未来世界第一湾-CBRE世邦魏理仕研究部-40页.pdf
09-15
为了实现湾区内部城市一小时通达的目标，正在建设一系列关键基础设施项目，如港珠澳大桥、深中通道和深湛高铁，这些项目将进一步优化东西两岸的交通连接，平衡区域发展，推动西部城市的经济增长。 【投资策略】 ...
八年级语文上册 3 青海湖，梦幻般的湖同步训练 语文版.doc
10-12
- 深湛（shēn zhàn）：文中指湖水深而清澈。 - 恬雅（tián yǎ）：形容文静而优雅。 - 眸子（móu zǐ）：指人的眼睛。 - 伫立（zhù lì）：长时间站立。 - 魅力（mèi lì）：吸引人的力量。 - 逶迤（wē...
高考必读的15篇优秀作文及点评.doc
10-11
3. 深湛思想与深邃思辨：高质量的作文需要具备深刻的思想内涵，能够用辩证、全面的观点看待问题，展现出作者的独立思考能力和逻辑推理能力。 4. 语言表达与审美能力：优秀的语言表达和审美能力是衡量作文质量的重要...
福建省德化溪霞分校、永春汤城中学2020学年八年级语文上学期联考试题（无答案）.doc
10-12
例如“深湛”的读音是shēn zhàn，“温柔”的读音是wēn róu，“恬雅”的读音是tián yǎ，“锦缎”的拼音是jǐn duàn，“涟漪”的拼音是lián yī，“宁固”的拼音是níng gù。 2. 诗词默写： 这部分试题要求...
基于echarts 开发地图地图大全
08-10
基于echarts 开发地图地图大全，基于本人开发伪DataV系统资料，里面包含地图使用代码，地图行政区域数据，湖泊 城市定位等数据，足够用于各种echarts的地图开发，基于3.X开发，若要4.X则自行到官网下载替换文件即可
Vue中使用百度地图做路径分析并根据起终点坐标模拟道路里程桩
L863683305的博客
03-28 3679
1.我们先要在vue中引入百度地图的API 第一步：在vue中的index.html文件中加上一个script标签： <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=你在百度地图申请的秘钥"></script> 第二步：在你的build>webpack.base.con...
vue echarts实现多轨迹图展示
zuo-yiran的博客
09-01 1211
在一张地图上使用不同图标显示机票和火车票的轨迹图，并对线路和城市进行标注
Vue 之 echarts 图表数据可视化的基础使用（简单绘制各种图表、地图）
仙魁XAN
07-28 8834
Vue开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。本节介绍，vue中添加echarts，然后在vue中简单使用，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。ECharts，一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。折线图、柱状图、、......
echart渲染深圳地图
w1242245的专栏
03-05 2019
echart渲染深圳地图
Vue中使用Echarts地图实现某省市区县地图的展示功能
qq_39891453的博客
12-28 9375
Vue中使用Echarts地图实现某省市区县地图的展示功能。
深圳地图echarts
突维
12-31 1809
<template> <div ref="projectMap" style="width:1000px;height:500px;"></div> </template> <script> import cqmap from './map.json'// 就是这么个意思 export default { methods: { echartsInit () { // 使用ref代替document.getEleme.
"深湛网络科技介绍ROS软路由命令、技巧与个人资料保密要求
深湛网络科技是一家专注于网络维护、系统维护和服务器维护的公司，他们拥有丰富的维护技术和经验。同时，他们还提供网吧软件、资源共享和网站源码等服务。本文将详细介绍ROS软路由的全部命令及技巧，希望对广大用户...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值