广东省深湛高铁线路vue（echarts）实现_echarts地图上绘制真实高铁线路

最新推荐文章于 2024-07-22 08:55:10 发布
最新推荐文章于 2024-07-22 08:55:10 发布
阅读量167 收藏
点赞数 2
分类专栏： 程序员 文章标签： vue.js echarts javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84413092/article/details/138399951
版权 
                    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: this.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: this.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'));
    echarts.registerMap('guangdong', guangdong);
    myChart.setOption(option);
}

},
created(){

},
mounted(){
this.$nextTick(()=>{
this.initMap()
})
}
}


最后为了方便大家的沟通与交流请加QQ群： [625787746](https://bbs.csdn.net/topics/618166371)




### React

*   介绍一下react

*   React单项数据流

*   react生命周期函数和react组件的生命周期

*   react和Vue的原理，区别，亮点，作用

*   reactJs的组件交流

*   有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢

*   项目里用到了react，为什么要选择react，react有哪些好处

*   怎么获取真正的dom

*   选择react的原因

*   react的生命周期函数

*   setState之后的流程

*   react高阶组件知道吗？

*   React的jsx，函数式编程

*   react的组件是通过什么去判断是否刷新的

*   如何配置React-Router

*   路由的动态加载模块

*   Redux中间件是什么东西，接受几个参数

*   redux请求中间件如何处理并发

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/img_convert/9749ea39072fc4b7b27af6f3a4db5ab1.png)
2401_84413092
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ECharts中国地图，广东省地图，广东省各市地图
06-06
ECharts 之前提供下载的矢量地图数据来自第三方，由于部分数据不符合国家《测绘法》规定，目前暂时停止下载服务。在官网无法下载了，找了很久找到这个。
福建省德化溪霞分校、永春汤城中学2020学年八年级语文上学期联考试题（无答案）.doc
10-12
这篇文档是福建省德化溪霞分校和永春汤城中学2020学年八年级语文上学期的联考试题，包含多个语文知识点，主要涉及字音、诗词默写、句子分析、短语搭配、名著阅读以及古文阅读理解。 1. 字音和汉字书写： 题目要求...
深湛高铁线路（echarts）
weixin_33832340的博客
11-27 967
2019独角兽企业重金招聘Python工程师标准>>> ...
vue3绘制广东深圳地图使用echarts
qq_45432996的博客
06-30 190
*
基于echarts实现前端中国地图、中国热力地图和广东省地图的展示
chenchuang0128的博客
05-19 3041
利用echarts库在uni-app中实现前端中国地图、中国热力地图和广东省地图的展示
调用百度地图API实现连线高铁线路的调用示例
萌兔兔MMQ！！
08-17 1279
先做好了网站的后台，编辑高铁站、高铁线路，然后编辑每条线路将线路上的高铁站添加进去并控制排序，这样前端上就能一下子拉出所有的高铁线路以及这条线路上的所有高铁站点，当然编辑高铁站点时有一个重要信息就是高铁站点的经纬度数据，这样才能在百度地图上准确打点。今天完工了整个产品的流程，已经可以实现在后台添加线路和站点前端就能在百度地图上实时地展示高铁线路，接下来还需要进一步完善程序功能。这个小站也提供了用户在线编辑的功能，点击页面顶上的“我要编辑高铁线路”就能添加目前数据库中没有的高铁线路。...
广东省深湛高铁线路vue（echarts）实现
IT博客技术分享
02-21 890
先上效果图哈： 这里引入guangdong.js 的方法其实可以直接从依赖包里面获取。 import guangdong from "echarts/map/js/province/guangdong.js"; //引入依赖包的数据 前提是你echarts安装是 4.8及以下版本。 全部代码如下： <template> <div id="main" style="width:100%; height:83vh"></div> </templ..
广东省深湛高铁线路原生js（echarts）实现
热门推荐
IT博客技术分享
02-18 1万+
先上效果图： 主要外部组件如下： <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="../../map/guangdong.js".
漏洞出版社百度百科/听起来漏洞百出的谎话，其实是一场天衣无缝的刺杀！_详细网安自学路线
程序员三九的博客
06-24 344
今天熊猫君要给大家推荐的，是一本以老上海为背景、惊心动魄的谍战小说。不知道大家会不会跟我一样，时常幻想自己回到了上个世纪的老上海，表面上沉醉于上海滩的灯红酒绿
哇塞，可以用Python实现电脑自动写小说了！！！
weixin_42078287的博客
04-03 9173
作家，是多么一个让人感到向往的职业。 我也幻想着，有一天能够靠写小说赚稿费，来实现自己的另一份可靠的收入。 可惜，理想是美好的。 但现实很残酷。 不管怎么写，都不能赶上其他作者。 自己至今仍然是一个扑街写手。 我自知我的水平是真的不能冠以作家的称号。 因此，我仅仅只是一个写手。 但是我是真的不知道，那些作者大牛是怎么实现一天两、三万字的输出的。 我的天，难道他们打那么多字，手不会酸吗？ 难道他们是充着电的机器人吗？ 不用吃喝拉撒睡的吗？ 因此，怎么想也想不明白的我，也就干脆不去想了。 我想用自己的方法，实现
高三语文锁定高考2020系统复习37_ 考前必读优秀作文及点评.doc
10-12
在准备高考作文时，应注重思想含量的提升，强调深湛的思考和深邃的思辨，避免表面化的文字。 2. 生命质感：高考作文中提倡“生命质感”，即文章需展现个人的生命体验和生活感受，这是文章具有灵魂和深度的关键。...
八年级上单元基础知识练习题.doc
12-30
【八年级上单元基础知识练习题】的文档主要涵盖了语文学习中的汉字拼音、词语解释、填字组词以及文学常识等内容，这些都是八年级学生在语文学习中需要掌握的基础知识。 1. 汉字拼音： - 单于（dān yú） - 调和...
八年级语文上学期联考试题(无答案) 试题.doc
11-11
- 深湛（shēn zhàn）：形容颜色或事物的深度。 - 温柔（wēn róu）：温和体贴，形容人的性情或动作。 - 恬雅（tián yǎ）：形容人的举止文雅，平和宁静。 - 锦缎（jǐn duàn）：一种丝织品，有鲜艳的光泽。...
八年级语文上册 3 青海湖，梦幻般的湖同步训练 语文版.doc
10-12
- 深湛（shēn zhàn）：文中指湖水深而清澈。 - 恬雅（tián yǎ）：形容文静而优雅。 - 眸子（móu zǐ）：指人的眼睛。 - 伫立（zhù lì）：长时间站立。 - 魅力（mèi lì）：吸引人的力量。 - 逶迤（wē...
Vue 3 和 SpringBoot 实现文件分片上传示例
最新发布
exlink2012的专栏
07-22 325
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
使用Vue实现点击页面触发特效
qq_45569925的博客
07-19 756
在页面上的指定区域内进行点击，则会在页面上显示设置好的随机文本，此文本出现后会执行动画，动画效果为节点在1s之内向右上方移动并在移动的过程中完成180°翻转，最后消失。
(vue3)el-table滚到底部加载数据el-table-infinite-scroll
weixin_63442947的博客
07-19 231
el-table实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值