快捷導(dǎo)航

vue中使用echarts以及簡(jiǎn)單關(guān)系圖的點(diǎn)擊事件方式

更新時(shí)間：2024年06月12日 10:44:25 作者：宣宣丿

這篇文章主要介紹了vue中使用echarts以及簡(jiǎn)單關(guān)系圖的點(diǎn)擊事件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

1.安裝

在Vue項(xiàng)目中打開(kāi)終端執(zhí)行命令：

npm install echarts --save

下載后在package.json文件中可以看到下載的Echarts版本：

2.導(dǎo)入

在需要使用Echarts圖表的頁(yè)面中導(dǎo)入：

import * as echarts from "echarts";

如果多個(gè)地方使用的話可以通過(guò)全局引入：

import * as echarts from 'echarts'
// 掛載到Vue實(shí)例
Vue.prototype.$echarts = echarts

3.繪制靜態(tài)圖表

在需要用到echarts的地方設(shè)置一個(gè)有寬高的div盒子

<div>
   <div
   ref="chart"
   style="width:800px;height:600px;margin: auto">
    </div>
</div>

定義echarts關(guān)系圖的數(shù)據(jù)

  data() {
   return {
     data: [
       {
         name: "Node 1",
         x: 300,
         y: 300,
       },
       {
         name: "Node 2",
         x: 800,
         y: 300,
       },
       {
         name: "Node 3",
         x: 550,
         y: 100,
       },
       {
         name: "Node 4",
         x: 550,
         y: 500,
       },
     ],
     links: [
       {
         source: 0,
         target: 1,
         symbolSize: [5, 20],
         label: {
           show: true,
         },
         lineStyle: {
           width: 5,
           curveness: 0.2,
         },
       },
       {
         source: "Node 2",
         target: "Node 1",
         label: {
           show: true,
         },
         lineStyle: {
           curveness: 0.2,
         },
       },
       {
         source: "Node 1",
         target: "Node 3",
       },
       {
         source: "Node 2",
         target: "Node 3",
       },
       {
         source: "Node 2",
         target: "Node 4",
       },
       {
         source: "Node 1",
         target: "Node 4",
       },
     ],
     num: 0,  // 點(diǎn)擊次數(shù)
   };
 },

在methods中定義實(shí)例化echarts對(duì)象的方法，在mounted生命周期中調(diào)用（確保dom元素已經(jīng)掛載到頁(yè)面當(dāng)中）

mounted() {
    this.getEchartData();
  },
  methods: {
    getEchartData() {
      const chart = this.$refs.chart;
       // 初始化echarts
      this.mychart = echarts.init(chart);
      let that = this;
       // option就是需要引進(jìn)echarts關(guān)系圖中的代碼
      let option = {
        title: {
          text: "Basic 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,
            },
            lineStyle: {
              opacity: 0.9,
              width: 2,
              curveness: 0,
            },
            // data: []
            data: that.data,
            // links: [],
            links: that.links,
          },
        ],
      };
       // option數(shù)據(jù)放入圖表中
      this.mychart.setOption(option);
    },
  },

啟動(dòng)項(xiàng)目，在頁(yè)面中看到如下效果：

4.關(guān)系圖節(jié)點(diǎn)點(diǎn)擊事件

上面只是展示了靜態(tài)的關(guān)系圖，如節(jié)點(diǎn)數(shù)據(jù)太多，各節(jié)點(diǎn)關(guān)系復(fù)雜，就可只展示主要數(shù)據(jù)，其他可通過(guò)點(diǎn)擊節(jié)點(diǎn)查看各節(jié)點(diǎn)關(guān)系

需求：新建一個(gè)Node5，Node5和Node2有關(guān)系，點(diǎn)擊Node2展示Node5節(jié)點(diǎn)

在上面原本的getEchartData()方法中，添加關(guān)系圖的節(jié)點(diǎn)點(diǎn)擊事件

通過(guò)事件參數(shù)param中的dataType屬性值確認(rèn)點(diǎn)擊的對(duì)象是關(guān)系圖節(jié)點(diǎn)還是節(jié)點(diǎn)之間的邊緣，值為node時(shí)點(diǎn)擊的是節(jié)點(diǎn)，值為edge時(shí)點(diǎn)擊的是邊緣

通過(guò)param中的dataIndex值確定點(diǎn)擊的節(jié)點(diǎn)元素

完整代碼如下：

getEchartData() {
      const chart = this.$refs.chart;
      // 初始化echarts
      this.mychart = echarts.init(chart);
      let that = this;
      // option就是需要引進(jìn)echarts關(guān)系圖中的代碼
      let option = {
        title: {
          text: "Basic 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,
            },
            lineStyle: {
              opacity: 0.9,
              width: 2,
              curveness: 0,
            },
            // data: []
            data: that.data,
            // links: [],
            links: that.links,
          },
        ],
      };

      // echarts圖表的點(diǎn)擊事件，可通過(guò)param參數(shù)確認(rèn)點(diǎn)擊的對(duì)象
      that.mychart.on("click", function (param) {
        if (param.dataType == "node") {
            // Node2的 param.dataIndex 值為1
          if (param.dataIndex == 1) {
              // 判斷點(diǎn)擊的次數(shù)，單數(shù)顯示Node5數(shù)據(jù)，雙數(shù)隱藏
            that.num++;
            if (that.num % 2 == 1) {
              that.data.push({
                name: "Node 5",
                x: 900,
                y: 300,
              });
              that.links.push({
                source: "Node 2",
                target: "Node 5",
              });
              that.mychart.setOption(option);
            } else {
              that.data.pop();
              that.links.pop();
              that.mychart.setOption(option);
            }
          }
        } else {
          console.log("點(diǎn)擊了邊", param);
        }
      });
      // option數(shù)據(jù)放入圖表中
      this.mychart.setOption(option);
    },

最終效果如下：