攀枝花市地铁线路图 EChart

最新推荐文章于 2023-10-30 18:06:04 发布
最新推荐文章于 2023-10-30 18:06:04 发布
阅读量1.9k 收藏 2
点赞数
分类专栏： HTML 大数据
本文为博主原创文章，未经博主允许可以转载。
本文链接：https://blog.csdn.net/ccagy/article/details/114026078
版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <!-- <meta name="renderer" content="webkit"> -->
    <title>攀枝花市地铁线路图 echart</title>
    <script src="./dist/echarts.min.js"></script>
    <style lang="scss" scoped>
        .div_vidio{ position:fixed; top:0;width:100%;height:100%;}
        .column2{ width:100%;height:100%;}
        .box02{width:100%;height:100%;display: flex;}
        .piechart06{flex:1;}
    </style>
  </head>
  <body>
    <div class="div_vidio">
        <div class="column2">
            <div class="box02">
              <div class="piechart06" id="linechart"></div>
            </div>
        </div>
    </div>
  </body>

<script>
    var myChart = echarts.init(document.querySelector('#linechart'), "light")
    var options = get_options()
    myChart.setOption(options)

   function get_options(){
        var data = [

           
            {
                name: "",
                tooltip: {
                    formatter: "{b}: 19999<br />"
                },
                symbolSize: 0.1,
                value: [855, 888],
                x: 800,
                y: 400,
                fixed: true,
                // draggable: false,
                category: 1,
                label: {
                    color: "red",
                    position: 'bottom',
                    fontSize: 24,
                    fontWeight: 1000
                },
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: "#157eff"
                            },
                            {
                                offset: 1,
                                color: "#35c2ff"
                            }
                        ])
                    }
                }
            },
            
            //地铁一号线，站点间X轴坐标相差50，Y轴坐标相同
            {
                name: "森林公园",
                tooltip: {
                    formatter: "{b}: 19999<br />"
                },
                symbol: 'circle',
                symbolSize: [25, 25],
                value: [5, 1000],
                x: 800,
                y: 400,
                fixed: true,
                // draggable: false,
                category: 1,
                label: {
                    color: "#FFF",
                    position: 'bottom',
                },
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: "#157eff"
                            },
                            {
                                offset: 1,
                                color: "#35c2ff"
                            }
                        ])
                    }
                }
            },
          

            {
                name: "上木路",
                x: 1000,
                y: 1000,
                value: [130, 830],
                fixed: true,
                symbol: 'circle',
                symbolSize: [15, 15],
                label: {
                    color: "#fff",
                    position: 'bottom',
                },
                category: 1,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: "#157eff"
                            },
                            {
                                offset: 1,
                                color: "#35c2ff"
                            }
                        ])
                    }
                }
            },
            {
                name: "自贸园",
                symbol: 'circle',
                symbolSize: [15, 15],
                label: {
                    color: "#efefef",
                    position: 'top',
                },
                value: [180, 600],
                x: 1000,
                y: 1000,
                fixed: true,
                category: 2,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: "#157eff"
                            },
                            {
                                offset: 1,
                                color: "#35c2ff"
                            }
                        ])
                    }
                }
            },

            {
                name: "八桥",
                symbol: 'circle',
                symbolSize: [15, 15],
                label: {
                    color: "#efefef",
                    position: 'top',
                },
                value: [280, 600],
                x: 1000,
                y: 1000,
                fixed: true,
                category: 2,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: "#157eff"
                            },
                            {
                                offset: 1,
                                color: "#35c2ff"
                            }
                        ])
                    }
                }
            },
           
            {
                name: "枣园",
                symbol: 'circle',
                symbolSize: [15, 15],
                label: {
                    color: "#efefef",
                    position: 'top',
                },
                value: [380, 600],
                x: 1000,
                y: 1000,
                fixed: true,
                category: 2,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: "#157eff"
                            },
                            {
                                offset: 1,
                                color: "#35c2ff"
                            }
                        ])
                    }
                }
            },
            {
                name: "汉城路",
                symbol: 'circle',
                symbolSize: [15, 15],
                label: {
                    color: "#efefef",
                    position: 'bottom',
                },
                value: [430, 600],
                x: 1000,
                y: 1000,
                fixed: true,
                category: 2,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: "#157eff"
                            },
                            {
                                offset: 1,
                                color: "#35c2ff"
                            }
                        ])
                    }
                }
            },
            {
                name: "开运街",
                symbol: 'circle',
                symbolSize: [15, 15],
                label: {
                    color: "#efefef",
                    position: 'top',
                },
                value: [480, 600],
                x: 1000,
                y: 1000,
                fixed: true,
                category: 2,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: "#157eff"
                            },
                            {
                                offset: 1,
                                color: "#35c2ff"
                            }
                        ])
                    }
                }
            },
          
            {
                name: "玉祥门",
                symbol: 'circle',
                symbolSize: [15, 15],
                label: {
                    color: "#efefef",
                    position: 'top',
                },
                value: [580, 600],
                x: 1000,
                y: 1000,
                fixed: true,
                category: 2,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: "#157eff"
                            },
                            {
                                offset: 1,
                                color: "#35c2ff"
                            }
                        ])
                    }
                }
            },
            {
                name: "洒金桥",
                symbol: 'circle',
                symbolSize: [15, 15],
                label: {
                    color: "#efefef",
                    position: 'bottom',
                },
                value: [630, 520],
                x: 1000,
                y: 1000,
                fixed: true,
                category: 2,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: "#157eff"
                            },
                            {
                                offset: 1,
                                color: "#35c2ff"
                            }
                        ])
                    }
                }
            },
            {
                name: "北大街",
                symbol: 'circle',
                symbolSize: [20, 20],
                label: {
                    color: "#efefef",
                    position: 'top',
                },
                value: [680, 520],
                x: 1000,
                y: 1000,
                fixed: true,
                category: 2,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
                                offset: 0,
                                color: "#FF1493"
                            },
                            {
                                offset: 1,
                                color: "#0000FF"
                            }
                        ])
                    }
                }
            },
            {
                name: "五路口",
                symbol: 'circle',
                symbolSize: [20, 20],
                label: {
                    color: "#efefef",
                    position: 'bottom',
                },
                value: [750, 520],
                x: 1000,
                y: 1000,
                fixed: true,
                category: 2,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
                                offset: 0,
                                color: "#FF1493"
                            },
                            {
                                offset: 1,
                                color: "#0000FF"
                            }
                        ])
                    }
                }
            },
            
            {
                name: "康复路",
                symbol: 'circle',
                symbolSize: [15, 15],
                label: {
                    color: "#efefef",
                    position: 'bottom',
                },
                value: [830, 520],
                x: 1000,
                y: 1000,
                fixed: true,
                category: 2,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: "#157eff"
                            },
                            {
                                offset: 1,
                                color: "#35c2ff"
                            }
                        ])
                    }
                }
            },
            {
                name: "通久门",
                symbol: 'circle',
                symbolSize: [20, 20],
                label: {
                    color: "#efefef",
                    position: 'top',
                },
                value: [880, 520],
                x: 1000,
                y: 1000,
                fixed: true,
                category: 2,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
                                offset: 0,
                                color: "#FF1493"
                            },
                            {
                                offset: 1,
                                color: "#0000FF"
                            }
                        ])
                    }
                }
            },
            {
                name: "万年路",
                symbol: 'circle',
                symbolSize: [15, 15],
                label: {
                    color: "#efefef",
                    position: 'bottom',
                },
                value: [950, 520],
                x: 1000,
                y: 1000,
                fixed: true,
                category: 2,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: "#157eff"
                            },
                            {
                                offset: 1,
                                color: "#35c2ff"
                            }
                        ])
                    }
                }
            },
            {
                name: "长乐坡",
                symbol: 'circle',
                symbolSize: [15, 15],
                label: {
                    color: "#efefef",
                    position: 'top',
                },
                value: [950, 320],
                x: 1000,
                y: 1000,
                fixed: true,
                category: 2,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: "#157eff"
                            },
                            {
                                offset: 1,
                                color: "#35c2ff"
                            }
                        ])
                    }
                }
            },

            {
                name: "半坡",
                symbol: 'circle',
                symbolSize: [15, 15],
                label: {
                    color: "#efefef",
                    position: 'top',
                },
                value: [950, 150],
                x: 1000,
                y: 1000,
                fixed: true,
                category: 2,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: "#157eff"
                            },
                            {
                                offset: 1,
                                color: "#35c2ff"
                            }
                        ])
                    }
                }
            },
            {
                name: "纺织城",
                symbol: 'circle',
                symbolSize: [25, 25],
                label: {
                    color: "#efefef",
                    position: 'bottom',
                },
                value: [1050, 50],
                x: 1000,
                y: 1000,
                fixed: true,
                category: 2,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: "#157eff"
                            },
                            {
                                offset: 1,
                                color: "#35c2ff"
                            }
                        ])
                    }
                }
            },
           
            //地铁三号线

            //地铁四号线

        ];

        var option = ({
            title: {
                text: '郑州地铁线路图',
                textStyle: {
                    color: 'white',
                    fontSize: 20
                },
                x: 'center',
                top: 10
            },
            //不设置背景颜色就是透明色
            backgroundColor: '#000',
            xAxis: {
                show: false,
                min: 0,
                max: 1200,
                // type: "value",
                //开启x轴坐标
                axisPointer: {
                    show: true
                },
            },
            yAxis: {
                show: false,
                min: 0,
                max: 1200,
                //   type: "value",
                //开启y轴坐标
                axisPointer: {
                    show: true
                },
            },
            tooltip: {},
            //  legend: {
            //     show: false
            //  },
            series: [{
                    type: "graph",
                    zlevel: 5,
                    draggable: false,
                    coordinateSystem: "cartesian2d", //使用二维的直角坐标系（也称笛卡尔坐标系）

                    // edgeSymbolSize: [0, 8], //边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定
                    // edgeLabel: {
                    //   normal: {
                    //     textStyle: {
                    //       fontSize: 60
                    //     }
                    //   }
                    // },
                    symbol: "rect",
                    symbolOffset: ["15%", 0],

                    label: {
                        normal: {
                            show: true
                        }
                    },
                    data: data,
                    links: [{
                            source: "森林公园",
                            target: "上木路"
                            // lineStyle: {
                            //   normal: {
                            //     color: "#12b5d0",
                            //
                            //   }
                            // }
                        },
                     
                        {
                            source: "上木路",
                            target: "自贸园",
                            lineStyle: {
                                normal: {
                                    // color: "#12b5d0",
                                }
                            }
                        },
                        {
                            source: "自贸园",
                            target: "八桥",
                            lineStyle: {
                                normal: {
                                    // color: "#12b5d0",
                                }
                            }
                        },

                    

                        {
                            source: "八桥",
                            target: "枣园",
                            lineStyle: {
                                normal: {
                                    // color: "#12b5d0",
                                }
                            }
                        },

                        {
                            source: "枣园",
                            target: "汉城路",
                            lineStyle: {
                                normal: {
                                    // color: "#12b5d0",
                                }
                            }
                        },
                        {
                            source: "汉城路",
                            target: "开运街",
                            lineStyle: {
                                normal: {
                                    // color: "#12b5d0",
                                }
                            }
                        },
                        {
                            source: "开运街",
                            target: "玉祥门",
                            lineStyle: {
                                normal: {
                                    // color: "#12b5d0",
                                }
                            }
                        },
                        
                        {
                            source: "玉祥门",
                            target: "洒金桥",
                            lineStyle: {
                                normal: {
                                    // color: "#12b5d0",
                                }
                            }
                        },
                        {
                            source: "洒金桥",
                            target: "北大街",
                            lineStyle: {
                                normal: {
                                    // color: "#12b5d0",
                                }
                            }
                        },
                        {
                            source: "北大街",
                            target: "五路口",
                            lineStyle: {
                                normal: {
                                    // color: "#12b5d0",
                                }
                            }
                        },
                        {
                            source: "五路口",
                            target: "康复路",
                            lineStyle: {
                                normal: {
                                    // color: "#12b5d0",
                                }
                            }
                        },

                        {
                            source: "康复路",
                            target: "通久门",
                            lineStyle: {
                                normal: {
                                    // color: "#12b5d0",
                                }
                            }
                        },
                        {
                            source: "通久门",
                            target: "万年路",
                            lineStyle: {
                                normal: {
                                    // color: "#12b5d0",
                                }
                            }
                        },
                        {
                            source: "万年路",
                            target: "长乐坡",
                            lineStyle: {
                                normal: {
                                    // color: "#12b5d0",
                                }
                            }
                        },
                        {
                            source: "长乐坡",
                            target: "半坡",
                            lineStyle: {
                                normal: {
                                    // color: "#12b5d0",
                                }
                            }
                        },
                       
                        {
                            source: "半坡",
                            target: "纺织城",
                            lineStyle: {
                                normal: {
                                    // color: "#12b5d0",
                                }
                            }
                        },
                       
                     
                    ],
                    lineStyle: {
                        normal: {
                            opacity: 0.6, //线条透明度
                            color: "#53B5EA",
                            curveness: 0, //站点间连线曲度，0表示直线
                            width: 10 //线条宽度
                        }
                    }
                },
                {
                    type: "lines",
                    coordinateSystem: "cartesian2d",
                    z: 1,
                    zlevel: 7,
                    animation: true,
                    effect: {
                        show: true,
                        period: 5,
                        trailLength: 0.71,
                        symbolSize: 14,
                        symbol: "circle",
                        loop: true,
                        color: 'yellow'
                        //   color: "rgba(55,155,255,0.5)"
                    },
                    lineStyle: {
                        normal: {
                            // color: "green",
                            width: 0,
                            curveness: 0 //动画线路的曲度
                        }
                    }
                    , 
                    //data: [{ //一号线
                            //coords: [
                                //[5, 600],
                                //[1000, 900],
                                //[1130, 600]
                            //]
                       // },
                        //{ //二号线
                        //    coords: [
                        //        [680, 50],
                        //        [680, 1050]
                        //    ]
                        //},
                        //   {  //三号线
                        //     coords: [
                        //       [280, 350],
                        //       [1040, 1080]
                        //     ]
                        //   }
                    //]
                },
            ]
        });

        return option;
    }
</script>
</html>

xcagy
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
深圳地铁线路图及站点经纬度，echarts可用，包含6号线、8号线、10号线路
07-18
深圳地铁线路图及站点经纬度，echarts可用，包含6号线、8号线、10号线路；可用于地图展示等；json格式
echarts 北京公交线路-线路效应
li836779537的博客
08-28 2309
echarts 北京公交路线 - 线特效效果图 ** 效果图 ** 注意：有两个地方需要注意，一个是echarts的 lines-bus.json，我把它放在页面的同级目录了（这个随意哈路径写对就行），很多人不知道这个数据从哪来。我也是找了很久，分享给你们去下载 链接: https://pan.baidu.com/s/1eA37UhpvFw_jhCbuW89AHw 提取码: 4cbn 还有一个需要注意的地方是百度的AK，我遇到的情况是页面出来后会提示 “百度未授权使用地图API,可能是因为您提供的密钥不是
ECharts常用图表 饼图
黑马程序员官方博客
12-08 7635
选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可。另外此线路图实时更新！需要课后资料的友友们，可以直接告诉我喔~，表示外半径为可视区尺寸（容器高宽中较小一项）的 20%南丁格尔图指的是每一个扇形的半径随着数据的大小而不同。饼图可以很好地帮助用户快速了解不同分类的数据的。选 'single'：数组的第一项是内半径，第二项是外半径。下一篇：ECharts。组成的字典所形成的数组。，分别表示单选还是多选。可以将饼图设置为圆环图。是一个空空如也的对象。：直接指定外半径值。
echarts 弧形进度条 配置
Rob__的博客
11-21 2344
使用echarts完成弧形进度条
攀枝花市各乡镇街道行政区划shp文件
05-03
攀枝花市各乡镇街道行政区划的shp文件是一种地理信息系统（GIS）数据格式，用于存储和处理空间信息。在GIS领域，shp文件是Esri公司开发的Shapefile格式，这是一种广泛使用的开放地理数据格式，它包含了地理实体的...
攀枝花市区县级别行政区划shp文件
05-05
四川省，攀枝花，区县级别行政区划，shp文件，矢量地图，GIS ，太阳总冠军
攀枝花市5区县乡镇行政边界shp格式全市乡镇边界wgs84坐标来源于正版地图软件
09-29
攀枝花市5区县乡镇行政边界shp格式全市乡镇边界wgs84坐标来源于正版地图软件
Java-springboot攀枝花市教体局门户网站的设计与实现计算机毕业设计程序.zip
07-13
采用java技术构建的一个管理系统。整个开发过程首先对系统进行需求分析，得出系统的主要功能。接着对系统进行总体设计和详细设计。总体设计主要包括系统功能设计、系统总体结构设计、系统数据结构设计和系统安全设计...
计算机毕业设计JAVA攀枝花市教体局门户网站的设计与实现登录mybatis+源码+调试部署+系统+数据库+lw
05-30
项目架构：B/S架构 开发语言：Java语言 开发软件：idea eclipse 前端技术：Layui、HTML、CSS、JS、JQuery等技术 后端技术：JAVA 运行环境：Win10、JDK1.8 数 据 库：MySQL5.7/8.0 运行服务器：Tomcat7.0 CSDN太坑了...
echarts学习2--折线图(折线与平滑的曲线)
qq_43505774的博客
06-02 3176
在于smooth属性默认是false false就是直线 true就是曲线
广东省深湛高铁线路vue（echarts）实现
IT博客技术分享
02-21 893
先上效果图哈： 这里引入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..
echarts动态折线图拉扯变形问题
宋大王的博客
04-11 2159
echarts动态折线图拉扯变形问题 在使用echarts折线图 做动态数据展示时，发现一个bug 当折线图的一个数值较高点紧挨着一个数值为零的点，guyong时图形会被拉扯，应该是echart的bug，如图 我的解决方法是给全部的值加0.01，就不会产生零点，在tooltip的显示值中减0.01 直观上显示的数值不变 ...
ECharts实现动态曲线(上)
richest_qi的博客
05-19 6189
动态曲线
Echarts 折线图拐弯处竖线解决办法，Echarts 折线图二次查询出现竖直线解决办法
weixin_41346436的博客
02-24 2648
Echarts 折线图拐弯处竖线解决，奇葩现象，在有滚动条的情况下，不是100%的展示比例区间就会出现这种情况，二次查询可能会出现竖线的情况 方案一：dataZoom中添加filterMode: ‘empty’,属性 dataZoom: { show: true, realtime: true, height: 15, start: 20, end: 80, bottom: 0, filterM
ehcarts line先从折线变弧线
hjy170314的博客
07-07 889
属性值 smooth: true 要的是这种效果, 一般我们组合的时候的图是这样的 所以需要设置一下 修改 series: [ { name: '蒸发量', type: 'bar', stack :"bar", itemStyle:{ color:"#2C9DFF", barBorderRadius:20
echarts 绘制地铁线路
weixin_38233449的博客
03-29 990
【代码】echarts 绘制地铁线路。
Javascript 之 Echart 实现沈阳地铁图
小虎博客
06-25 1840
要实现这种效果除了掌握echart 线图的配置，数据准备也是关键的一步，如何利用Js通过一张图取出每个点的坐标，就需要我们写一个取点的方法，通过鼠标事件自动取点，这个不是本文讨论的内容，如有兴趣可以私信我。
vue地铁路线图(echarts)
最新发布
qq_44971069的博客
10-30 1354
引入echarts，参考graph图。
攀枝花市上恒广场施工组织设计详解
本文档是关于上恒广场的施工组织设计，由攀枝花市一通建筑工程有限责任公司编制于2013年9月20日。施工组织设计涵盖了多个关键章节，旨在实现项目的优质、高效、经济和合理的施工目标。 首先，在"编制说明及编制依据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xcagy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值