real3d-portalsite/src/components/echartsTemplate/graph.vue

<template>
  <div id="graph_echart" ref="echart"></div>
  <!-- <div>
    <div class="echars">
      <div ref="first_pie" id="first_pie"></div>
    </div>
  </div> -->
</template>

<script>
let option = {
  backgroundColor: 'rgba(4, 28, 50, 0.5)',
  tooltip: {},
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  legend: {
    type: "scroll",
    orient: "vertical",
    right: 20,
    bottom: 20,
    data: [],
    icon: "circle", //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
    itemWidth: 12, // 设置宽度
    itemHeight: 12, // 设置高度
    itemGap: 10, // 设置间距
    textStyle: {
      //图例文字的样式
      color: "#fff",
      fontSize: 14,
    },
    // textStyle: {
    //   rich: {
    //     name: {
    //       color: "#fff", //#BCD3E5
    //       fontSize: 14,
    //       // width: 60,
    //     },
    //     value: {
    //       color: "#64DAFF",
    //       fontSize: 14,
    //       padding: [5, 0],
    //       align: "center",
    //       // width: 40,
    //     },
    //     unit: {
    //       color: "#fff", //#BCD3E5
    //       fontSize: 14,
    //       // width: 5,
    //     },
    //   },
    // },
  },
  series: [
    {
      type: "graph",
      layout: "force",
      force: {
        repulsion: 1500,
        edgeLength: 120,
        layoutAnimation: true,
      },
      symbolSize: 70,
      nodeScaleRatio: 1, //图标大小是否随鼠标滚动而变
      roam: true, //缩放
      draggable: true, //节点是否可以拖拽
      edgeSymbol: ["none", "arrow"], //线2头标记
      label: {
        normal: {
          show: true,
          position: "inside",
          color: "#FFF",
        },
      },
      edgeLabel: {
        normal: {
          show: true,
          textStyle: {
            fontSize: 12,
            color: "#FFF",
          },
          formatter: "{c}",
        },
      },
      symbolKeepAspect: false,
      focusNodeAdjacency: false, // 指定的节点以及其所有邻接节点高亮
      itemStyle: {
        normal: {
          borderColor: "#29ACFC",
          borderWidth: 2,
          shadowColor: "#29ACFC",
          color: "#29ACFC",
          curveness: 0.08,
        },
      },

      lineStyle: {
        normal: {
          opacity: 0.9,
          width: 2,
          curveness: 0.15,
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#FFF", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#FFF", // 100% 处的颜色
              },
            ],
            globalCoord: false,
          },
        },
      },

      data: [],
      links: [],
    },
  ],
};

export default {
  components: {},
  data() {
    return {
      myChart: null,
      timer: null
    };
  },
  computed: {},
  mounted() {
    // this.setOptions(data, links);
  },
  methods: {
    setOptions(data, links, categors = []) {
      let _this = this;
      if (!this.myChart) {
        this.myChart = echarts.init(this.$refs.echart);
      }
      option.legend.data = categors.map((a) => { return a.name; })
      option.series[0].data = data
      option.series[0].links = links
      option.series[0].categories = categors
      console.log(option.legend);
      this.myChart.setOption(option);
      this.myChart.on("click", (params) => {
        this.$emit("click", params)
      });
      // 监听右键点击事件
      this.myChart.on('contextmenu', function (params) {
        let event = params.event
        // 阻止默认的右键菜单出现 even.preventDefault();
        event.stop()
        var menu = document.getElementById('myContext');
        if (!menu) return
        menu.style.left = event.offsetX + 'px';
        menu.style.top = event.offsetY + 'px';
        menu.style.display = 'block';
        // 关闭弹窗
        document.addEventListener('click', function closeMenu() {
          menu.style.display = 'none';
          document.removeEventListener('click', closeMenu);
        });
      });
      this.myChart.on('mouseout', (params) => {
        if (this.timer) clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          var menu = document.getElementById('myContext');
          if (menu) menu.style.display = 'none';
        }, 3000);
        console.log('out');
      });


      // 自定义弹窗HTML
      //       var contextMenuHtml = `
      // <div id="myContextMenu" style="display:none; position:absolute; z-index:100; background-color:#fff; border:1px solid #ccc;">
      //     <ul>
      //         <li>操作一</li>
      //         <li>操作二</li>
      //         <li>操作三</li>
      //     </ul>
      // </div>`
      //       document.body.appendChild(contextMenuHtml);
      // 图表点击事件监听
      //   this.myChart.on("click", function (params) {
      //     // 刷新数据的逻辑，例如从服务器获取新数据
      //     fetchNewData()
      //       .then(function (newData) {
      //         let that = this
      //         // 更新图表的数据
      //         that.myChart.setOption({
      //           series: [
      //             {
      //               // 假设您要更新的是 series 下的某个数据系列
      //               data: newData[0], // 使用新数据更新 series.data
      //               links: newData[1],
      //             },
      //           ],
      //         });
      //       })
      //       .catch(function (error) {
      //         console.error("Error fetching new data:", error);
      //       });

      //     // 这里可以添加其他需要在点击后执行的代码
      //   });
      // 模拟的数据获取函数，实际应用中应该从服务器获取
      function fetchNewData() {
        // 返回一个新数据的 Promise
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            // 模拟获取到的新数据
            const newData = [
              /* 新数据数组 */
              data2,
              links2,
            ];
            resolve(newData);
          }, 1000); // 延迟 1 秒来模拟异步数据加载
        });
      }
    },
    test() {
      this.initTwo(data2, links2);
    },
  },
  watch: {},

  beforeDestroy() { },
};
</script>

<style lang="less" scoped>
#graph_echart {
  width: 100%;
  height: 100%;
}
</style>