//在使用之前要安装Echarts 插件，在入口文件main.js 引入注册
<template>
<div class="panel-container">
<!-- <div class="tooltip">
<div class="top"></div>
<div class="bottom"></div>
</div> -->
<div class="map" ref='map' style="height:100vh;width:100%;"></div>
</div>
</template>
<script>
import CommonFun from "@/utils/commonFun";
// CommonFun.formatNumberToThousands(count),
export default {
data() {
return {};
},
methods: {
async BjSubwayMap() {
var ditie = {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "Polygon",
coordinates: [
[
[0, 0],
[0, 2118],
[2646, 2118],
[2646, 0],
],
],
},
properties: {
name: "地铁图",
},
},
],
};
var data = [
// 地铁9号线l
{
name: "地铁9号线",
tooltip: {
formatter: "{b}: 19999<br />",
},
symbolSize: 0.1,
value: [5, 100],
x: 800,
y: 400,
fixed: true,
// draggable: false,
category: 1,
label: {
color: "#90c232",
position: "bottom",
fontSize: 24,
fontWeight: 1000,
},
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#157eff",
},
{
offset: 1,
color: "#35c2ff",
},
]),
},
},
},
// 地铁14号线l
{
name: "地铁14号线",
tooltip: {
formatter: "{b}: 19999<br />",
},
symbolSize: 0.1,
value: [920, 1050],
x: 800,
y: 400,
fixed: true,
// draggable: false,
category: 1,
label: {
color: "#d8b0ab",
position: "bottom",
fontSize: 24,
fontWeight: 1000,
},
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#157eff",
},
{
offset: 1,
color: "#35c2ff",
},
]),
},
},
},
// 地铁4号线l
{
name: "地铁4号线",
tooltip: {
formatter: "{b}: 19999<br />",
},
symbolSize: 0.1,
value: [450, 100],
x: 800,
y: 400,
fixed: true,
// draggable: false,
category: 1,
label: {
color: "#1a9aa6",
position: "bottom",
fontSize: 24,
fontWeight: 1000,
},
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#157eff",
},
{
offset: 1,
color: "#35c2ff",
},
]),
},
},
},
// 地铁7号线l
{
name: "地铁7号线",
tooltip: {
formatter: "{b}: 19999<br />",
},
symbolSize: 0.1,
value: [1040, 100],
x: 800,
y: 400,
fixed: true,
// draggable: false,
category: 1,
label: {
color: "#f6cb93",
position: "bottom",
fontSize: 24,
fontWeight: 1000,
},
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#157eff",
},
{
offset: 1,
color: "#35c2ff",
},
]),
},
},
},
// 地铁2号线l
{
name: "地铁2号线",
tooltip: {
formatter: "{b}: 19999<br />",
},
symbolSize: 0.1,
value: [300, 650],
x: 800,
y: 400,
fixed: true,
// draggable: false,
category: 1,
label: {
color: "#1a6fa3",
position: "bottom",
fontSize: 24,
fontWeight: 1000,
},
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#157eff",
},
{
offset: 1,
color: "#35c2ff",
},
]),
},
},
},
// 地铁13号线l
{
name: "地铁13号线",
tooltip: {
formatter: "{b}: 19999<br />",
},
symbolSize: 0.1,
value: [500, 1050],
x: 800,
y: 400,
fixed: true,
// draggable: false,
category: 1,
label: {
color: "#e9d844",
position: "bottom",
fontSize: 24,
fontWeight: 1000,
},
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#157eff",
},
{
offset: 1,
color: "#35c2ff",
},
]),
},
},
},
// 地铁13号线
{
name: "大钟寺",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#efefef",
position: "left",
},
value: [310, 835],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#e9d844",
},
{
offset: 1,
color: "#e9d844",
},
]),
},
},
},
{
name: "上地",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#efefef",
position: "left",
},
value: [310, 950],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#e9d844",
},
{
offset: 1,
color: "#e9d844",
},
]),
},
},
},
{
name: "清河站",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#efefef",
position: "left",
},
value: [310, 1000],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#e9d844",
},
{
offset: 1,
color: "#e9d844",
},
]),
},
},
},
{
name: "西二旗",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#efefef",
position: "left",
},
value: [310, 1080],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#e9d844",
},
{
offset: 1,
color: "#e9d844",
},
]),
},
},
},
{
name: "立水桥",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#efefef",
position: "top",
},
value: [800, 1080],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#e9d844",
},
{
offset: 1,
color: "#e9d844",
},
]),
},
},
},
{
name: "柳芳",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#efefef",
position: "left",
},
value: [800, 835],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#e9d844",
},
{
offset: 1,
color: "#e9d844",
},
]),
},
},
},
//地铁2号线
{
name: "积水潭",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#efefef",
position: "left",
},
value: [410, 770],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#1a6fa3",
},
{
offset: 1,
color: "#1a6fa3",
},
]),
},
},
},
{
name: "雍和宫",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#efefef",
position: "top",
},
value: [730, 770],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#1a6fa3",
},
{
offset: 1,
color: "#1a6fa3",
},
]),
},
},
},
{
name: "东直门",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#efefef",
position: "left",
},
value: [760, 740],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#1a6fa3",
},
{
offset: 1,
color: "#1a6fa3",
},
]),
},
},
},
{
name: "建国门",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#efefef",
position: "left",
},
value: [760, 500],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#1a6fa3",
},
{
offset: 1,
color: "#1a6fa3",
},
]),
},
},
},
{
name: "磁器口",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#efefef",
position: "bottom",
},
value: [680, 450],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#1a6fa3",
},
{
offset: 1,
color: "#1a6fa3",
},
]),
},
},
},
{
name: "北京站",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#efefef",
position: "bottom",
},
value: [730, 450],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#1a6fa3",
},
{
offset: 1,
color: "#1a6fa3",
},
]),
},
},
},
{
name: "长椿街",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#efefef",
position: "left",
},
value: [410, 450],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#1a6fa3",
},
{
offset: 1,
color: "#1a6fa3",
},
]),
},
},
},
{
name: "复兴门",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#efefef",
position: "left",
},
value: [380, 500],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#1a6fa3",
},
{
offset: 1,
color: "#1a6fa3",
},
]),
},
},
},
// 地铁9号线
{
name: "军事博物馆",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#efefef",
position: "left",
},
value: [200, 550],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#90c232",
},
{
offset: 1,
color: "#90c232",
},
]),
},
},
},
{
name: "六里桥东",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#efefef",
position: "left",
},
value: [170, 400],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#90c232",
},
{
offset: 1,
color: "#90c232",
},
]),
},
},
},
{
name: "六里桥",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#efefef",
position: "left",
},
value: [120, 350],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#90c232",
},
{
offset: 1,
color: "#90c232",
},
]),
},
},
},
{
name: "七里庄",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#efefef",
position: "left",
},
value: [80, 300],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#90c232",
},
{
offset: 1,
color: "#90c232",
},
]),
},
},
},
{
name: "郭公庄",
symbol: "circle",
symbolSize: [20, 20],
label: {
color: "#efefef",
position: "left",
},
value: [80, 100],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 1, 1, 0, [
{
offset: 0,
color: "#90c232",
},
{
offset: 1,
color: "#90c232",
},
]),
},
},
},
//地铁7号线
{
name: "北京西站",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#f6cb93",
position: "right",
},
value: [200, 500],
x: 1000,
y: 1000,
// fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#d8b0ab",
},
{
offset: 1,
color: "#d8b0ab",
},
]),
},
},
},
{
name: "湾子",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#f6cb93",
position: "bottom",
},
value: [300, 400],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#d8b0ab",
},
{
offset: 1,
color: "#d8b0ab",
},
]),
},
},
},
{
name: "广安门内",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#f6cb93",
position: "bottom",
},
value: [450, 400],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#d8b0ab",
},
{
offset: 1,
color: "#d8b0ab",
},
]),
},
},
},
{
name: "虎坊桥",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#f6cb93",
position: "bottom",
},
value: [550, 400],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#d8b0ab",
},
{
offset: 1,
color: "#d8b0ab",
},
]),
},
},
},
{
name: "大郊亭",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#f6cb93",
position: "top",
},
value: [950, 400],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#d8b0ab",
},
{
offset: 1,
color: "#d8b0ab",
},
]),
},
},
},
{
name: "百子湾",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#f6cb93",
position: "right",
},
value: [1000, 400],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#d8b0ab",
},
{
offset: 1,
color: "#d8b0ab",
},
]),
},
},
},
{
name: "欢乐谷景区",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#f6cb93",
position: "right",
},
value: [1000, 250],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#d8b0ab",
},
{
offset: 1,
color: "#d8b0ab",
},
]),
},
},
},
{
name: "花庄",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#f6cb93",
position: "right",
},
value: [1100, 100],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#d8b0ab",
},
{
offset: 1,
color: "#d8b0ab",
},
]),
},
},
},
// 地铁4号线
{
name: "安河桥北",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "white",
position: "bottom",
},
value: [50, 1050],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#1a9aa6",
},
{
offset: 1,
color: "#1a9aa6",
},
]),
},
},
},
{
name: "圆明园",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "white",
position: "right",
},
value: [200, 1050],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#1a9aa6",
},
{
offset: 1,
color: "#1a9aa6",
},
]),
},
},
},
{
name: "国家图书馆",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#fff",
position: "left",
},
value: [200, 700],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#1a9aa6",
},
{
offset: 1,
color: "#1a9aa6",
},
]),
},
},
},
{
name: "动物园",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#fff",
position: "bottom",
},
value: [330, 700],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#1a9aa6",
},
{
offset: 1,
color: "#1a9aa6",
},
]),
},
},
},
{
name: "西直门",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#fff",
position: "right",
},
value: [380, 700],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#1a9aa6",
},
{
offset: 1,
color: "#1a9aa6",
},
]),
},
},
},
{
name: "新街口",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#fff",
position: "right",
},
value: [500, 700],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#1a9aa6",
},
{
offset: 1,
color: "#1a9aa6",
},
]),
},
},
},
{
name: "宣武门",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#fff",
position: "right",
},
value: [500, 450],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#1a9aa6",
},
{
offset: 1,
color: "#1a9aa6",
},
]),
},
},
},
{
name: "菜市口",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#fff",
position: "right",
},
value: [500, 400],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#1a9aa6",
},
{
offset: 1,
color: "#1a9aa6",
},
]),
},
},
},
{
name: "陶然亭",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#fff",
position: "right",
},
value: [500, 370],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#1a9aa6",
},
{
offset: 1,
color: "#1a9aa6",
},
]),
},
},
},
{
name: "马家堡",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#fff",
position: "right",
},
value: [500, 300],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#1a9aa6",
},
{
offset: 1,
color: "#1a9aa6",
},
]),
},
},
},
{
name: "天宫院",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#fff",
position: "right",
},
value: [500, 20],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#1a9aa6",
},
{
offset: 1,
color: "#1a9aa6",
},
]),
},
},
},
//地铁14号线
{
name: "北京南站",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#efefef",
position: "left",
},
value: [500, 350],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#d8b0ab",
},
{
offset: 1,
color: "#d8b0ab",
},
]),
},
},
},
{
name: "永定门外",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#efefef",
position: "bottom",
},
value: [600, 350],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#d8b0ab",
},
{
offset: 1,
color: "#d8b0ab",
},
]),
},
},
},
{
name: "方庄",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#efefef",
position: "right",
},
value: [780, 350],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#d8b0ab",
},
{
offset: 1,
color: "#d8b0ab",
},
]),
},
},
},
{
name: "十里河",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#efefef",
position: "bottom",
},
value: [850, 300],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#d8b0ab",
},
{
offset: 1,
color: "#d8b0ab",
},
]),
},
},
},
{
name: "北工大西门",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#efefef",
position: "right",
},
value: [920, 300],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#d8b0ab",
},
{
offset: 1,
color: "#d8b0ab",
},
]),
},
},
},
{
name: "九龙山",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#efefef",
position: "right",
},
value: [920, 400],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#d8b0ab",
},
{
offset: 1,
color: "#d8b0ab",
},
]),
},
},
},
{
name: "大望路",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#efefef",
position: "right",
},
value: [920, 500],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#d8b0ab",
},
{
offset: 1,
color: "#d8b0ab",
},
]),
},
},
},
{
name: "将台",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#efefef",
position: "right",
},
value: [920, 700],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#d8b0ab",
},
{
offset: 1,
color: "#d8b0ab",
},
]),
},
},
},
{
name: "望京南",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#efefef",
position: "right",
},
value: [850, 800],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#d8b0ab",
},
{
offset: 1,
color: "#d8b0ab",
},
]),
},
},
},
{
name: "善各庄",
symbol: "circle",
symbolSize: [10, 10],
label: {
color: "#efefef",
position: "right",
},
value: [850, 1080],
x: 1000,
y: 1000,
fixed: true,
category: 2,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#d8b0ab",
},
{
offset: 1,
color: "#d8b0ab",
},
]),
},
},
},
];
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,
},
},
/* geo: {
map: "ditie",
width: "95%",
height: "95%",
roam: true,
itemStyle: {
color: "transparent",
borderWidth: 0,
},
label: {
show: false,
},
emphasis: {
itemStyle: {
color: "transparent",
borderWidth: 0,
},
label: {
show: false,
},
},
}, */
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: [
//地铁13号线
{
source: "大钟寺",
target: "清河站",
lineStyle: {
normal: {
color: "#e9d844",
},
},
},
{
source: "清河站",
target: "西二旗",
lineStyle: {
normal: {
color: "#e9d844",
},
},
},
{
source: "西二旗",
target: "立水桥",
lineStyle: {
normal: {
color: "#e9d844",
},
},
},
{
source: "立水桥",
target: "柳芳",
lineStyle: {
normal: {
color: "#e9d844",
},
},
},
//地铁二号线连接
{
source: "西直门",
target: "积水潭",
lineStyle: {
normal: {
// color: "red",
},
},
},
{
source: "积水潭",
target: "雍和宫",
lineStyle: {
normal: {
// color: "red",
},
},
},
{
source: "柳芳",
target: "东直门",
lineStyle: {
normal: {
color: "#e9d844",
},
},
},
{
source: "雍和宫",
target: "东直门",
lineStyle: {
normal: {
// color: "red",
},
},
},
{
source: "东直门",
target: "建国门",
lineStyle: {
normal: {
// color: "red",
},
},
},
{
source: "建国门",
target: "北京站",
lineStyle: {
normal: {
// color: "red",
},
},
},
{
source: "北京站",
target: "磁器口",
lineStyle: {
normal: {
// color: "red",
},
},
},
{
source: "磁器口",
target: "宣武门",
lineStyle: {
normal: {
// color: "red",
},
},
},
{
source: "宣武门",
target: "长椿街",
lineStyle: {
normal: {
// color: "red",
},
},
},
{
source: "长椿街",
target: "复兴门",
lineStyle: {
normal: {
// color: "red",
},
},
},
{
source: "复兴门",
target: "西直门",
lineStyle: {
normal: {
// color: "red",
},
},
},
// 地铁9号线
{
source: "军事博物馆",
target: "北京西站",
lineStyle: {
normal: {
color: "#90c232",
},
},
},
{
source: "湾子",
target: "北京西站",
lineStyle: {
normal: {
color: "#f6cb93",
},
},
},
{
source: "北京西站",
target: "六里桥东",
lineStyle: {
normal: {
color: "#90c232",
},
},
},
{
source: "六里桥东",
target: "六里桥",
lineStyle: {
normal: {
color: "#90c232",
},
},
},
{
source: "六里桥",
target: "七里庄",
lineStyle: {
normal: {
color: "#90c232",
},
},
},
{
source: "七里庄",
target: "郭公庄",
lineStyle: {
normal: {
color: "#90c232",
},
},
},
// 地铁7号线
{
source: "湾子",
target: "百子湾",
lineStyle: {
normal: {
color: "#f6cb93",
},
},
},
{
source: "百子湾",
target: "欢乐谷景区",
lineStyle: {
normal: {
color: "#f6cb93",
},
},
},
{
source: "欢乐谷景区",
target: "花庄",
lineStyle: {
normal: {
color: "#f6cb93",
},
},
},
// 北京地铁4号线地铁绘制
{
source: "安河桥北",
target: "圆明园",
lineStyle: {
normal: {
color: "#1a9aa6",
},
},
},
{
source: "军事博物馆",
target: "国家图书馆",
lineStyle: {
normal: {
color: "#90c232",
},
},
},
{
source: "圆明园",
target: "国家图书馆",
lineStyle: {
normal: {
color: "#1a9aa6",
},
},
},
{
source: "国家图书馆",
target: "动物园",
lineStyle: {
normal: {
color: "#1a9aa6",
},
},
},
{
source: "大钟寺",
target: "西直门",
lineStyle: {
normal: {
color: "#e9d844",
},
},
},
{
source: "动物园",
target: "西直门",
lineStyle: {
normal: {
color: "#1a9aa6",
},
},
},
{
source: "西直门",
target: "新街口",
lineStyle: {
normal: {
color: "#1a9aa6",
},
},
},
{
source: "新街口",
target: "陶然亭",
lineStyle: {
normal: {
color: "#1a9aa6",
},
},
},
{
source: "陶然亭",
target: "北京南站",
lineStyle: {
normal: {
color: "#1a9aa6",
},
},
},
{
source: "北京南站",
target: "马家堡",
lineStyle: {
normal: {
color: "#1a9aa6",
},
},
},
{
source: "马家堡",
target: "天宫院",
lineStyle: {
normal: {
color: "#1a9aa6",
},
},
},
// 北京地铁14号线线路
{
source: "北京南站",
target: "永定门外",
lineStyle: {
normal: {
color: "#d8b0ab",
},
},
},
{
source: "永定门外",
target: "方庄",
lineStyle: {
normal: {
color: "#d8b0ab",
},
},
},
{
source: "方庄",
target: "十里河",
lineStyle: {
normal: {
color: "#d8b0ab",
},
},
},
{
source: "十里河",
target: "北工大西门",
lineStyle: {
normal: {
color: "#d8b0ab",
},
},
},
{
source: "北工大西门",
target: "九龙山",
lineStyle: {
normal: {
color: "#d8b0ab",
},
},
},
{
source: "九龙山",
target: "大望路",
lineStyle: {
normal: {
color: "#d8b0ab",
},
},
},
{
source: "大望路",
target: "将台",
lineStyle: {
normal: {
color: "#d8b0ab",
},
},
},
{
source: "将台",
target: "望京南",
lineStyle: {
normal: {
color: "#d8b0ab",
},
},
},
{
source: "望京南",
target: "善各庄",
lineStyle: {
normal: {
color: "#d8b0ab",
},
},
},
],
lineStyle: {
normal: {
opacity: 0.6, //线条透明度
color: "#53B5EA",
curveness: 0, //站点间连线曲度，0表示直线
width: 3, //线条宽度
},
},
},
{
type: "effectScatter",
scaling: 1.5,
color: "#00FF7F",
//该系列使用的坐标系
coordinateSystem: "cartesian2d",
symbolSize: function (val) {
return val[2] * 0.8;
},
data: [
{ name: "北京站", value: [730, 450, 30.89] },
{ name: "北京西站", value: [200, 500, 27.64] },
{ name: "北京南站", value: [500, 350, 30.89] },
{ name: "北京北站", value: [380, 700, 27.64] },
{ name: "清河站", value: [310, 1000, 27.64] },
// { name: "客村", value: [1076.62, 768.05, 26.43] },
// { name: "广州火车站", value: [733.94, 1118.14, 25.15] },
// { name: "海珠广场", value: [733.94, 933.67, 18.72] },
// { name: "嘉禾望岗", value: [898.0, 1349.8, 17.92] },
// { name: "杨箕", value: [994.72, 982.55, 17.42] },
// { name: "车陂南", value: [1358.46, 892.2, 16.85] },
],
showEffectOn: "render",
effectType: "ripple",
rippleEffect: {
period: 4,
scale: 4,
brushType: "stroke",
},
hoverAnimation: true,
},
{
type: "lines",
coordinateSystem: "cartesian2d",
z: 2,
zlevel: 7,
animation: true,
effect: {
show: true,
period: 8,
trailLength: 0.71,
// symbolSize: 14,
symbolSize: 10,
symbol: "circle",
loop: true,
color: "",
// color: "rgba(55,155,255,0.5)"
},
lineStyle: {
normal: {
color: "green",
width: 0,
opacity: 1, //尾迹线条透明度
curveness: 0, //动画线路的曲度
},
},
//设置这个属性用于可以沿着曲线路径运动
polyline: true,
data: [
{
// name: "13号线",
lineStyle: {
width: 3,
color: "#e9d844",
},
// 13号线
coords: [
[760, 740],
[800, 835],
[800, 1080],
[310, 1080],
[310, 835],
[380, 700],
// [750,1080],
// [],
// [],
],
},
{
// name: "2号线",
lineStyle: {
width: 3,
color: "#1a6fa3",
},
// 2号线
coords: [
[380, 500],
[410, 450],
[730, 450],
[760, 500],
[760, 740],
[730, 770],
[410, 770],
[380, 700],
[380, 500],
// [],
],
},
{
// name: "7号线",
lineStyle: {
width: 3,
color: "#f6cb93",
},
//7号线
coords: [
[200, 500],
[300, 400],
[1000, 400],
[1000, 250],
// g
[1100, 100],
// [200,700],
].reverse(),
},
{
//9号线
// name: "9号线",
lineStyle: {
width: 3,
color: "#90c232",
},
coords: [
[80, 100],
[80, 300],
[120, 350],
[170, 400],
// g
[200, 500],
[200, 700],
],
},
{
// name: "4号线",
lineStyle: {
width: 3,
color: "#1a9aa6",
},
//4号线
coords: [
[500, 20],
[500, 700],
// g
[200, 700],
[200, 1050],
[50, 1050],
],
},
{
//14号线
// name: "14号线",
lineStyle: {
width: 3,
color: "#d8b0ab",
},
coords: [
[500, 350],
[780, 350],
[850, 300],
[920, 300],
[920, 700],
[850, 800],
[850, 1080],
].reverse(),
},
],
},
],
};
// var mycharts = this.$this.$echarts.init()
var mycharts = this.$echarts.init(
this.$refs.map || document.getElementById("map")
);
this.$echarts.registerMap("ditie", ditie);
mycharts.setOption(option);
mycharts.getZr().on("click", function (params) {
let pointInPixel = [params.offsetX, params.offsetY];
if (mycharts.containPixel("grid", pointInPixel)) {
let xIndex = mycharts.convertFromPixel({ seriesIndex: 0 }, [
params.offsetX,
params.offsetY,
])[0];
console.log(xIndex);
}
});
},
},
computed: {},
created() {},
mounted() {
this.BjSubwayMap();
},
};
</script>
<style lang="less" scoped>
.panel-container {
width: 100%;
height: 100%;
position: relative;
.map {
height: 100%;
width: 100%;
}
.tooltip {
height: 100px;
width: 400px;
background-color: #0b1b58;
position: absolute;
left: 20px;
top: 20px;
z-index: 100;
}
}
</style>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
