echarts知识图谱自用

<template>
  <div class="container" id="chartRef"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { reactive, ref, onMounted, watch } from 'vue';
import $bus from '/@/bus';
import { useRuleDevelopmentStore } from '@/store/modules/ruleDevelopment/index';
const ruleDevelopmentStore = useRuleDevelopmentStore();

const state = reactive({
  isRouterAlive: true,
  myChart: '',
  nodes: [],
  links: [],
  lastClickId: '',
  // chartList: props.chartList,
  count: 1,
  // dataList: {
  //   nodes: [
  //     {
  //       id: '',
  //       name: '',
  //       depth: '',
  //     },
  //   ] as any,
  //   links: [
  //     {
  //       source: '',
  //       target: '',
  //       name: '',
  //     },
  //   ] as any,
  // },
  // rgba(0,246,255,1)
  // "#00ADD0",蓝色
  // 	"#FFA12F",橙色
  // 	"#B62AFF",紫色
  // 	"#604BFF",浅紫色
  // 	"#6E35FF",深紫色
  // 	"#002AFF",深蓝色
  // 	"#20C0F4",浅蓝色
  // 	"#95F300",绿色
  // 	"#04FDB8",
  // 	"#AF5AFF"
   dataList: {
    nodes: [
      {
        id: '',
        name: '',
        depth: '',
      },
    ] as any,
    links: [
      {
        source: '',
        target: '',
        name: '',
      },
    ] as any,
  },
  color0: 'rgba(0,246,255,1)',
  color1: '#20C0F4',
  color2: '#002AFF',
  color3: '#20C0F4',
  color4: '#006699',
  // color0: '#FAF1D5',
  // color1: '#F9E1B1',
  // color2: '#FAC896',
  // color3: '#51C7E7',
  // color4: '#1973CF',
  drawerVisible: false,
  choosedContent: '',
  choosedConRelation: '',
});
// const state1 = reactive({
//   dataList: {
// nodes: [
//   {
//     id: '',
//     name: '',
//   }
// ],
// links: [
//   {
//     source: "",
//     target: "",
//     name: ''
//   }
// ]
//   }
// })
onMounted(() => {
  // init();2024-1-23修改
});
//接收本地仓库的数据
$bus.on('sendLocalStroageDada', () => {
  state.dataList = {}
  Object.assign(state.dataList,JSON.parse(JSON.stringify(ruleDevelopmentStore.allInfoToTableKnowledgeGraphMindById[0])))
  // state.dataList =  ruleDevelopmentStore.allInfoToTableKnowledgeGraphMindById[0]
  // console.log(ruleDevelopmentStore.allInfoToTableKnowledgeGraphMindById[0])
  init();
  // state.dataList = JSON.parse(localStorage.getItem('knowledgeGraphListObject') as any);2024-1-23修改
});
//接收清除数据的请求
$bus.on('clearData', () => {
  // state.dataList.links = [];
  // state.dataList.nodes = [];
  state.dataList.links.length = 0;
  state.dataList.nodes.length = 0;

});
//初始化echarts
const init = () => {
  let dom = document.getElementById('chartRef');
  // echarts.dispose(dom);
  let myChart = echarts.init(dom, null, {
    renderer: 'canvas',
    useDirtyRect: false,
  });
  myChart.clear();
  if (state.dataList.nodes) {
    state.dataList.nodes.forEach((node) => {
      if (node.depth === 0) {
        node.symbolSize = 100;
        node.itemStyle = {
          color: state.color0,
          // opacity:0,
        };
      } else if (node.depth === 1) {
        node.itemStyle = {
          color: state.color1,
          // opacity:0.4
        };
      } else if (node.depth === 2) {
        node.itemStyle = {
          color: state.color2,
          // opacity:0.4
        };
      } else if (node.depth === 3) {
        node.itemStyle = {
          color: state.color3,
          // opacity:0.4
        };
      } else if (node.depth === 4) {
        node.itemStyle = {
          color: state.color4,
          // opacity:0.4
        };
      }
    });

    state.dataList.links.forEach((link) => {
      link.label = {
        align: 'center',
        fontSize: 12,
      };
    });
  }
  // "#00ADD0",
  // 	"#FFA12F",
  // 	"#B62AFF",
  // 	"#604BFF",
  // 	"#6E35FF",
  // 	"#002AFF",
  // 	"#20C0F4",
  // 	"#95F300",
  // 	"#04FDB8",
  // 	"#AF5AFF"
  let option = {
    // title: {
    //   text: '知识图谱'
    // },
    backgroundColor: 'rgba(128, 128, 128, 0)',
    toolbox: {
      // feature: {
      //   saveAsImage: {}
      // }
    },
    series: [
      {
        type: 'graph',
        //力引导布局
        layout: 'force',
        // 节点标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
        symbolSize: 58,
        // 节点是否可拖拽。
        draggable: true,
        // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
        roam: true,
        lineStyle: {
          color: '#FFFFFF',
          curveness: 0,
          borderWidth: 'solid',
          width: 1,
          opacity: 0.4,
        },
        itemStyle: {
          opacity: 0.4,
        },
        focusNodeAdjacency: true,
        // categories: categories.value,
        // 边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。默认不显示标记，常见的可以设置为箭头，如下：
        // edgeSymbol: ['circle', 'arrow']
        edgeSymbol: ['', 'arrow'],
        //边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。
        edgeSymbolSize: [80, 10],
        edgeLabel: {
          normal: {
            show: true,
            textStyle: {
              fontSize: 14,
              color: '#FFFFFF',
            },
            formatter(x) {
              return x.data.name;
            },
          },
        },
        label: {
          // 是否显示标签。
          // color: '#FFFFFF',
          textStyle: {
            color: '#ffffff',
            fontSize: 14,
          },
          show: true,
          //控制大于9个字其他显示...
          formatter(x) {
            return x.data.name.length > 9 ? `${x.data.name.substr(0, 9)}...` : x.data.name;
          },
        },
        force: {
          // 节点之间的斥力因子。 支持设置成数组表达斥力的范围，此时不同大小的值会线性映射到不同的斥力。值越大则斥力越大
          // repulsion: [500, 1000],
          repulsion: [5000, 10000],
          // 边的两个节点之间的距离，这个距离也会受 repulsion。支持设置成数组表达边长的范围，此时不同大小的值会线性映射到不同的长度。值越小则长度越长。如下示例
          // 值最大的边长度会趋向于 10，值最小的边长度会趋向于 50
          edgeLength: [100, 1000]

          // edgeLength: 300,
        },
        emphasis: {
          disabled: true,
        },
        data: state.dataList.nodes || [],
        links: state.dataList.links || [],
      },
    ],
  };
  myChart.setOption(option);
};
// watch(
//   () => state,
//   (newValue, oldValue) => {
// // console.log('watch')
// //     console.log('newValue', newValue);
// //     state.dataList = newValue;
// //     init();
//   }
// );
</script>

<style scoped lang="less">
.container {
  width: 100%;
  height: 73vh;
}
</style>