echarts关系图例子

<template>
  <div class="echartsBox">
    <div
      class="className"
      :id="id"
      :style="{height:'100%',width:'100%',overflow:'auto'}"
      ref="myEchart"
    />
    <div class="scaleBtn" v-if="this.chart&&!isFullScreen" @click="changeFS">
      <i class="el-icon-full-screen" ></i>
    </div>
    <div class="zoomBtn" v-if="this.chart&&isFullScreen" @click="changeFS">
      <i class="el-icon-aim" ></i>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  props: {
    className: {
      type: String,
      default: "yourClassName"
    },
    id: {
      type: String,
      default: "graphCharts"
    },
    graph: {
      type: Object,
      default: () => {
        return {
          nodes:[],
          Links:[]
        };
      }
    }
  },
  mounted() {
    // this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  data() {
    return {
      chart: null,
      params: {},
      isFullScreen:false
    };
  },
  methods: {
    //changeFS
    changeFS(){
      // this.isFullScreen=!this.isFullScreen;
      this.$emit('changeFS',!this.isFullScreen)
    },
    setFontSize(data) {
      data.forEach(ele => {
        ele.label = {
          fontSize: 30
        };
        if (ele.children) {
          this.setFontSize(ele.children);
        }
      });
    },
    initChart() {
      let _this = this;
      let that = this;
      this.chart = echarts.init(this.$refs.myEchart);
      this.chart.showLoading();
      let option = {
        // title: { text: "企业关系" },
        color: [
          "#7294EE",
          "#77C1E9",
          "#E88B7E",
          "#F1B253",
          "#E4C106",
          "#f56c6c",
          "#e6a23c",
          "#409eff",
          "#67c23a"
        ],
        tooltip: {
          formatter: function(x) {
            return x.data.des;
          }
        },
        toolbox: {
              // left: "center",
              feature: {
                saveAsImage: {}
              }
            },
        legend: [
          {
            type: "scroll",
            
            orient: "vertical",
            right: 10,
            top: 40,
            bottom: 20,
            data: [
              "当前节点",
              "企业",
              "人员",
              "服务行业",
              "其他",
              "重大预警",
              "一般预警",
              "中性",
              "利好"
            ]
          }
        ],
        series: [
          {
            type: "graph",
            layout: "force",
            symbolSize: 80,
            roam: true,
            edgeSymbol: ["circle", "arrow"],
            // focusNodeAdjacency: true,
            edgeSymbolSize: [4, 10],
            draggable: true,
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1,
              shadowBlur: 10,
              shadowColor: "rgba(0, 0, 0, 0.3)"
            },
            edgeLabel: {
              normal: {
                show: true,
                formatter: function(x) {
                  return x.data.name;
                }
              }
            },
            label: {
              normal: {
                show: true,
                textStyle: {}
              }
            },
            lineStyle: {
              color: "source",
              curveness: 0.1
            },
            emphasis: {
              lineStyle: {
                width: 10
              }
            },
            data: this.graph.nodes,
            links: this.graph.Links,
            animation: false,
            categories: [
              {
                name: "当前节点",
                symbol: "circle",
                symbolSize: 100
              },
              {
                name: "企业",
                symbol: "circle",
                symbolSize: 70
              },
              {
                name: "人员",
                symbol: "circle",
                symbolSize: 70
              },
              {
                name: "服务行业",
                symbol: "circle",
                symbolSize: 70
              },
              {
                name: "其他",
                symbol: "circle",
                symbolSize: 70
              },
              {
                name: "重大预警",
                symbol:
                  "path://M19,1 Q21,0,23,1 L39,10 Q41.5,11,42,14 L42,36 Q41.5,39,39,40 L23,49 Q21,50,19,49 L3,40 Q0.5,39,0,36 L0,14 Q0.5,11,3,10 L19,1",
                symbolSize: 70
              },
              {
                name: "一般预警",
                symbol:
                  "path://M19,1 Q21,0,23,1 L39,10 Q41.5,11,42,14 L42,36 Q41.5,39,39,40 L23,49 Q21,50,19,49 L3,40 Q0.5,39,0,36 L0,14 Q0.5,11,3,10 L19,1",
                symbolSize: 70
              },
              {
                name: "中性",
                symbol:
                  "path://M19,1 Q21,0,23,1 L39,10 Q41.5,11,42,14 L42,36 Q41.5,39,39,40 L23,49 Q21,50,19,49 L3,40 Q0.5,39,0,36 L0,14 Q0.5,11,3,10 L19,1",
                symbolSize: 70
              },
              {
                name: "利好",
                symbol:
                  "path://M19,1 Q21,0,23,1 L39,10 Q41.5,11,42,14 L42,36 Q41.5,39,39,40 L23,49 Q21,50,19,49 L3,40 Q0.5,39,0,36 L0,14 Q0.5,11,3,10 L19,1",
                symbolSize: 70
              }
            ],
            force: {
              repulsion: 1500,
              edgeLength: [150, 300],
              layoutAnimation: false
            }
          }
        ]
      };
      this.chart.clear();
      this.chart.off("click");
      this.chart.hideLoading(this.chart);
      this.chart.on("dblclick", params => {
        that.$emit("getNodes", params);
      });
      this.chart.on("click", params => {
        if(params.data.userEventId!==""){     
          that.$emit("heightLightId", params);

        }
        that.heightLight(params);
      });
      
      this.chart.setOption(option, true);
      window.onresize = function() {
        that.chart.resize();
      };
    },

    heightLight(params) {
      let that = this;
      if (params.dataIndex != that.params.dataIndex) {
        that.chart.dispatchAction({
          type: "unfocusNodeAdjacency",
          // 使用 dataIndex 来指定目标节点，或者使用 edgeDataIndex 来指定目标边。
          dataIndex: that.params.dataIndex
        });
        that.chart.dispatchAction({
          type: "focusNodeAdjacency",
          // 使用 dataIndex 来指定目标节点，或者使用 edgeDataIndex 来指定目标边。
          dataIndex: params.dataIndex
        });
        that.params = params;
      } else {
        that.chart.dispatchAction({
          type: "unfocusNodeAdjacency",
          // 使用 dataIndex 来指定目标节点，或者使用 edgeDataIndex 来指定目标边。
          dataIndex: params.dataIndex
        });
        that.params = {};
      }
    }
  },
  beforeDestroy() {}
};
</script>

<style lang="less" scoped>
.echartsBox{
  width: 100%;
  height: 100%;
  position: relative;
}
.scaleBtn,
.zoomBtn
{
  position: absolute;
  top: 8px;
  right: 30px;
}
.scaleBtn i,
.zoomBtn i{
  position: relative;
}
.scaleBtn i:hover,
.zoomBtn i:hover
{
  color: #58a6cd;
  cursor: pointer;
}
.scaleBtn:hover::before,
.zoomBtn:hover::before{
  content: '全屏查看';
  color: #58a6cd;
  position: absolute;
  bottom: -16px;
  width: 48px;
  right: 0;
  font-size: 12px;
}
.zoomBtn:hover::before{
  content: '返回页面';
}