vue画拓扑图

<template>

  <div id="myChart" :style="{width: '1000px', height: '900px'}"></div>

</template>

<script>

const echarts = require("echarts");

export default {

  name: "hello",

  data() {

    return {

      msg: "Welcome to Your Vue.js App"

    };

  },

  mounted() {

    this.drawLine();

  },

  methods: {

    drawLine() {

      // 基于准备好的dom，初始化echarts实例

      let myChart = echarts.init(document.getElementById("myChart"));

      // 绘制图表

      // myChart.setOption({

      //   title: { text: '在Vue中使用echarts' },

      //   tooltip: {},

      //   xAxis: {

      //     data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']

      //   },

      //   yAxis: {},

      //   series: [

      //     {

      //       name: '销量',

      //       type: 'bar',

      //       data: [5, 20, 36, 10, 10, 20]

      //     }

      //   ]

      // })

      this.option = {

        title: {

          text: "Graph 简单示例"

        },

        tooltip: {},

        animationDurationUpdate: 1500,

        animationEasingUpdate: "quinticInOut",

        series: [

          {

            type: "graph",

            layout: "none",

            symbolSize: 50,

            roam: true,

            label: {

              show: true

            },

            edgeSymbol: ["circle", "arrow"],

            edgeSymbolSize: [4, 10],

            edgeLabel: {

              fontSize: 20

            },

            data: [

              {

                name: "节点1",

                x: 300,

                y: 300

              },

              {

                name: "节点2",

                x: 800,

                y: 300

              },

              {

                name: "节点3",

                x: 550,

                y: 100

              },

              {

                name: "节点4",

                x: 550,

                y: 500

              },

              {

                name: "节点5",

                x: 550,

                y: 300

              }

            ],

            // links: [],

            links: [

              {

                source: 0,

                target: 1,

                symbolSize: [5, 20],

                label: {

                  show: true

                },

                lineStyle: {

                  width: 5,

                  curveness: 0.2

                }

              },

              {

                source: "节点2",

                target: "节点1",

                label: {

                  show: true

                },

                lineStyle: {

                  curveness: 0.2

                }

              },

              {

                source: "节点1",

                target: "节点3"

              },

              {

                source: "节点2",

                target: "节点3"

              },

              {

                source: "节点2",

                target: "节点4"

              },

              {

                source: "节点1",

                target: "节点4"

              }

            ],

            lineStyle: {

              opacity: 0.9,

              width: 2,

              curveness: 0

            }

          }

        ]

      };

      // this.option.series[0].data = this.nodes;

      // this.option.series[0].links = this.links;

      myChart.setOption(this.option);

    }

  }

};

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

</style>

router.beforeEach((to, from, next) => {

  debugger

  if (to.path === "/login") return next();

  //获取token

  const tokenstr = window.sessionStorage.getItem("token");

  //没有token，强制跳转到登录页

  if (!tokenstr) return next("/login");

  if (to.query.username) {

    next();

    return;

  };

  if (from.query.username) {

    let toQuery = JSON.parse(JSON.stringify(to.query));

    toQuery.username = from.query.username;

    next({

      path: to.path,

      query: toQuery

    })

  } else {

    next()

  }

});