vue地铁路线图(echarts)

效果如图：

引入echarts，参考graph图
全部代码：

<template>
  <div>
    <div id="main" style="width: 1800px;height:800px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: "CarpiaoPage",
  data () {
    return {
      // 随便的数据


    }
  },
  mounted () {
    this.load()
  },
  methods: {
    // 使用index关联起来
    load () {
      var chartDom = document.getElementById('main')
      var myChart = echarts.init(chartDom)
      var option
      option = {
        title: {
          text: '成都四号线万盛到太平园'
        },
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        // backgroundColor: '#d0d9c2',
        series: [
          {
            type: 'graph',
            layout: 'none',
            symbolSize: 13,//节点大小为17
            roam: true,
            itemStyle: {//给所有节点的类型一个默认样式，特殊的可在其节点下单独修改样式
              normal: {
                color: "#FFFFFF",//颜色默认白色
                borderColor: "#009900"//边框默认绿色
              }
            },
            label: {//给所有的节点字体一个默认样式
              normal: {
                show: true,//显示
                position: "bottom",//下方显示
                color: "#000",//默认颜色灰色
                fontSize: 12//字体样式
              }
            },
            lineStyle: {//给所有连线一个默认样式
              normal: {
                width: 2,

                color: "#009900"
              }
            },
            data: [
              {//节点，name不可重复
                name: '万盛',
                x: 0,
                y: 40,

              },
              {
                name: '杨柳河',
                x: 30,
                y: 30,

              }, {
                name: '凤溪河',
                x: 60,
                y: 20
              }, {
                name: '南熏大道',
                x: 90,
                y: 10
              }, {
                name: '光华公园',
                x: 120,
                y: 0
              }, {
                name: '涌泉',
                x: 150,
                y: -10,
              }, {
                name: '凤凰大街',
                x: 180,
                y: -10,
              },
              {
                name: '马厂坝',
                x: 210,
                y: -10,
              },
              {
                name: '非遗博览园',
                x: 250,
                y: -10,
              },
              {
                name: '蔡桥',
                x: 290,
                y: -10,
              },
              {
                name: '中坝',
                x: 330,
                y: -10,
              },
              {
                name: '成都西站',
                x: 360,
                y: -10,
              },
              {
                name: '清江西路',
                x: 400,
                y: -10,
              },
              {
                name: '文化宫',
                x: 430,
                y: -10,
                symbol: 'image://' + require('../assets/update.webp'),
                symbolSize: 20,
                itemStyle: {
                  normal: {
                    borderColor: 'red'
                  },
                },
              },
              {
                name: '西南财大',
                x: 460,
                y: -10,
                itemStyle: {
                  normal: {
                    borderColor: 'red'
                  },
                },
              },
              {
                name: '草堂北路',
                x: 490,
                y: -10,
                itemStyle: {
                  normal: {
                    borderColor: 'red'
                  },
                },
              },
              {
                name: '中医大省医院',
                itemStyle: {//给特殊的节点设置不同的样式
                  normal: {
                    borderColor: "red",
                  }
                },
                x: 530,
                y: -10,
              },
              {
                name: '宽窄巷子',
                x: 570,
                y: -10,
              },
              {
                name: '骡马市',
                x: 610,
                y: -10,
              },
              {
                name: '太升南路',
                x: 650,
                y: 10,
              },
              {
                name: '市二医院',
                x: 690,
                y: 10,
              },
              {
                name: '玉双路',
                x: 710,
                y: 20,
              },
              {
                name: '双桥路',
                x: 740,
                y: 20,
              },
              {
                name: '万年场',
                x: 760,
                y: 20,
              },
              {
                name: '槐树店',
                x: 790,
                y: 20,
              },
              {
                name: '来龙',
                x: 810,
                y: 20,
              },
              {
                name: '十陵',
                x: 830,
                y: 20,
              },
              {
                name: '成都大学',
                x: 850,
                y: 20,
              },
              {
                name: '明蜀王陵',
                x: 880,
                y: 20,
              },
              {
                name: '西河',
                x: 910,
                y: 20,
              },
              {
                name: '东坡路',
                x: 430,
                y: 20,
                itemStyle: {
                  normal: {
                    borderColor: '#3baeca'
                  },
                },
              },
              {
                name: '龙爪堰',
                x: 430,
                y: 50,
                itemStyle: {
                  normal: {
                    borderColor: '#3baeca'
                  },
                },
              }, {
                name: '武侯大道',
                x: 430,
                y: 80, itemStyle: {
                  normal: {
                    borderColor: '#3baeca'
                  },
                },
              }, {
                name: '太平园',
                x: 450,
                y: 120, itemStyle: {
                  normal: {
                    borderColor: '#3baeca'
                  },
                },
              },
            ],
            links: [
              {//连线的source和target可以选择index，也可选择name，这里方便查看理解我用了name
                source: '万盛',
                target: '杨柳河',
              }, {
                source: '杨柳河',
                target: '凤溪河',
              }, {
                source: '凤溪河',
                target: '南熏大道'
              }, {
                source: '南熏大道',
                target: '光华公园'
              }, {
                source: '光华公园',
                target: '涌泉'
              }, {
                source: '涌泉',
                target: '凤凰大街'
              },
              {
                source: '凤凰大街',
                target: '马厂坝',
              }, {
                source: '马厂坝',
                target: '非遗博览园',
              }, {
                source: '非遗博览园',
                target: '蔡桥'
              }, {
                source: '蔡桥',
                target: '中坝'
              }, {
                source: '中坝',
                target: '成都西站'
              }, {
                source: '成都西站',
                target: '清江西路'
              }, {
                source: '清江西路',
                target: '文化宫'
              },
              {
                source: '文化宫',
                target: '西南财大',
                lineStyle: {
                  normal: {
                    color: "red"
                  }
                }
              }, {
                source: '西南财大',
                target: '草堂北路',
                lineStyle: {
                  normal: {
                    color: "red"
                  }
                }
              }, {
                source: '草堂北路',
                target: '中医大省医院',
                lineStyle: {
                  normal: {
                    color: "red"
                  }
                }
              }, {
                source: '中医大省医院',
                target: '宽窄巷子'
              }, {
                source: '宽窄巷子',
                target: '骡马市'
              },
              {
                source: '骡马市',
                target: '太升南路',
              }, {
                source: '太升南路',
                target: '市二医院',
              }, {
                source: '市二医院',
                target: '玉双路'
              }, {
                source: '玉双路',
                target: '双桥路'
              }, {
                source: '双桥路',
                target: '万年场'
              }, {
                source: '万年场',
                target: '槐树店'
              }, {
                source: '槐树店',
                target: '来龙'
              },
              {
                source: '来龙',
                target: '十陵'
              }, {
                source: '十陵',
                target: '成都大学'
              }, {
                source: '成都大学',
                target: '明蜀王陵'
              }, {
                source: '明蜀王陵',
                target: '西河'
              },
              {
                source: '文化宫',
                target: '东坡路',
                lineStyle: {
                  normal: {
                    color: "#3baeca"
                  }
                }
              }, {
                source: '东坡路',
                target: '龙爪堰',
                lineStyle: {
                  normal: {
                    color: "#3baeca"
                  }
                }
              }, {
                source: '龙爪堰',
                target: '武侯大道',
                lineStyle: {
                  normal: {
                    color: "#3baeca"
                  }
                }
              }, {
                source: '武侯大道',
                target: '太平园',
                lineStyle: {
                  normal: {
                    color: "#3baeca"
                  }
                }
              },


            ],
          }
        ]
      }
      option && myChart.setOption(option)
    },
  },
}
</script>