广东省深湛高铁线路vue（echarts）实现

先上效果图哈：

这里引入guangdong.js 的方法其实可以直接从依赖包里面获取。

import guangdong from "echarts/map/js/province/guangdong.js"; //引入依赖包的数据

前提是你 echarts安装是 4.8及以下版本。

全部代码如下：

<template><div id="main" style="width:100%; height:83vh"></div>
</template><script>
import echarts from "echarts/lib/echarts";
import guangdong from "echarts/map/js/province/guangdong.js"; //引入依赖包的数据
export default {data(){return{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]}],geodata1:[{name: '深圳市',value: [114.07, 22.62]}]}},methods:{initMap(){function area(name, color) {var a = {name: name,selected: true,itemStyle: {emphasis: {areaColor: color,borderColor: '#f47920',borderWidth: 1}}};return a;}var option = {backgroundColor: '#4f5555',title: {text: '深湛高铁线路',subtext: '',sublink: '',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: 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()})}
}
</script>

最后为了方便大家的沟通与交流请加QQ群： 625787746

请进QQ群交流：【IT博客技术分享群①】：正在跳转

广东省深湛高铁线路vue（echarts）实现相关推荐

深湛高铁线路（echarts）
2019独角兽企业重金招聘Python工程师标准>>> 完整代码. <html><head><meta http-equiv="Content ...
广深港高铁全线首迎春运日均运客24.3万人次
中新社广州1月23日电 (郭军郭宇轩)今年是广深港高铁全线开通后的首个春运.记者23日从中国铁路广州局集团有限公司了解到,春运已启动三天,搭乘高铁往来香港与内地间的旅客人数剧增.截至23日,广深港高 ...
5对“80、90后”夫妻列车长共同奋战广深港高铁首个春运
(新春走基层)5对"80.90后"夫妻列车长共同奋战广深港高铁首个春运中新网广州1月26日电题:5对"80.90后"夫妻列车长共同奋战广深港高铁首个春运作 ...
今年，我们在香港支援春运——广深港高铁“列车医生”的工作日记
新华社深圳2月1日电(记者毛思倩白瑜)一个多月以来,"列车医生"林东卿每天的工作时间是从下午开始的. 19点,他从位于香港荃湾的酒店出门,与一同当班的同事来到常光顾的茶餐厅,照旧 ...
高铁盈利地图：东部赚翻中西部普遍巨亏
高铁盈利地图:东部赚翻,中西部巨亏文章导读: 尽管国内部分高铁实现盈利的速度只有东海道新干线可堪媲美,但仍然有许多高铁无法打破亏损的局面.据<中国经济周刊>记者了解,郑西.贵广.兰新.成 ...
城市中心区综合交通枢纽规划策略：以深圳市西丽高铁站为例
" 写在前面: 综合交通枢纽是反映交通系统运行效率和服务品质的关键载体.在高密度城市中心区新建大型综合交通枢纽是一个非常复杂的系统工程,需要重点考虑站城融合.交通可持续发展.大客流组织以及多 ...
高铁延误传播分析——以2021年清明节假期广州南站晚点为例
Attention everone! I have a major announcement to make! 哈哈朋友们好久不见,我,哎呀这博客从去年的5月份就写了一半,一直到前几天我打开草稿箱突然 ...
学计算机到成铁工作如何,广汉公立的高铁学铁路的学校,高铁职业技术哪些学校好...
广汉公立的高铁学铁路的学校 0cbdchke3m 而地质复杂,延续了普速火车时代的传统:今年暑期,形成东北地区通往全国各地高效.便捷的快速客运网.到我国一次建成里程长.技术标准的京沪高铁:目前京沈高铁 ...
中国最美高铁，90分钟穿过57个国家级风景区，一站一景沿途全都美哭了。
前不久又有一条高铁线路低调开通有人说这是一条从天堂开往仙境的高铁也有人说这是中国最美最诗意的高铁它东起人间天堂杭州一路西进,走入墨色徽州最终抵达云海仙境黄山从4年前开始修建时就被认 ...

广东省深湛高铁线路vue（echarts）实现

广东省深湛高铁线路vue（echarts）实现相关推荐

最新文章

热门文章