vue项目中使用 echarts 创建一个关系图

vue项目中使用 echarts 创建一个关系图

在页面上需要展示一个关系图，效果图如下：

一、下载并引入echarts

下载： npm install echarts --save

引入：在需要用到的文件中引入import * as echarts from "echarts"

二、使用

在HTML中创建一个容器，并给定相应的样式

<div id="form"></div>


//CSS样式
#form {
  height: 800px;
  width: 800px;
  background-color: rgb(192, 214, 255);
}

js代码部分

let myChart = echarts.init(document.getElementById("form"));
      let option = {
   
        backgroundColor: '#EEF1F3',
        color: ["#ee6666", "#91cc75", "#fac858", "#5470c6", "#73c0de", "#3ba272", "#fc8452", "#9a60b4", "#ea7ccc"],
        title: {
   
            text: "关系图谱",
            textStyle: {
   
                color: "#000",
                fontWeight: 700,
                fontSize: 20,
                left: "center"
            }
        },
        tooltip: {
   
            formatter: function(x) {
   
                return x.data.name;
            },
        },
        legend: [{
    //图例
            x: "right",
            show: true,
            data: ["正义的一方", "黑暗的一方"]
        }],
        series: [{
   
            type: "graph",
            legendHoverLink: true,
            layout: "force",
            categories: [
                {
    name: "正义的一方", symbolSize: 60 },
                {
    name: "黑暗的一方", symbolSize: 70 },

            ],
            force: {
   
                repulsion: [1000, 2000], //节点之间的斥力因子,支持设置成数组表达斥力的范围
                edgeLength: [10, 20],
                layoutAnimation: true,
                friction: 0.1, //节点的移动速度。取值范围 0 到 1。
                edgeLength: [70, 90], //两个节点之间的距离，这个距离也会受 repulsion影响
            },
            symbolSize: 60,
            itemStyle: {
   
                shadowColor: "#666",
                shadowOffsetX: 2,
                shadowOffsetY: 2,
            },
            roam: true, //是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
            draggable: true, //节点是否可拖拽，只在使用力引导布局的时候有用。
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize