在vue中使用echarts以及簡單關系圖的點擊事件

1.安裝

在Vue項目中打開終端執行命令：

npm install echarts --save

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

微信圖片_20230115010307.png

2.導入

在需要使用Echarts圖表的頁面中導入：

import * as echarts from "echarts";

如果多個地方使用的話可以通過全局引入：

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

3.繪制靜態圖表

在需要用到echarts的地方設置一個有寬高的div盒子

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

定義echarts關系圖的數據

  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,  // 點擊次數
   };
 },

在methods中定義實例化echarts對象的方法，在mounted生命周期中調用（確保dom元素已經掛載到頁面當中）

mounted() {
    this.getEchartData();
  },
  methods: {
    getEchartData() {
      const chart = this.$refs.chart;
       // 初始化echarts
      this.mychart = echarts.init(chart);
      let that = this;
       // option就是需要引進echarts關系圖中的代碼
      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數據放入圖表中
      this.mychart.setOption(option);
    },
  },

啟動項目，在頁面中看到如下效果：

3.png

4. 關系圖節點點擊事件

上面只是展示了靜態的關系圖，如節點數據太多，各節點關系復雜，就可只展示主要數據，其他可通過點擊節點查看各節點關系

需求：新建一個Node5，Node5和Node2有關系，點擊Node2展示Node5節點

在上面原本的getEchartData()方法中，添加關系圖的節點點擊事件

通過事件參數param中的dataType屬性值確認點擊的對象是關系圖節點還是節點之間的邊緣，值為node時點擊的是節點，值為edge時點擊的是邊緣

通過param中的dataIndex值確定點擊的節點元素

完整代碼如下：

getEchartData() {
      const chart = this.$refs.chart;
      // 初始化echarts
      this.mychart = echarts.init(chart);
      let that = this;
      // option就是需要引進echarts關系圖中的代碼
      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圖表的點擊事件，可通過param參數確認點擊的對象
      that.mychart.on("click", function (param) {
        if (param.dataType == "node") {
            // Node2的 param.dataIndex 值為1
          if (param.dataIndex == 1) {
              // 判斷點擊的次數，單數顯示Node5數據，雙數隱藏
            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("點擊了邊", param);
        }
      });
      // option數據放入圖表中
      this.mychart.setOption(option);
    },

最終效果如下：

2.gif