在vue3中使用Echarts中的graph实现关系图谱 |
您所在的位置：网站首页 › 前端关系图谱插件vue › 在vue3中使用Echarts中的graph实现关系图谱 |
|
官网：series-graph 官网示例：关系图 前提是项目中有Echarts包，要是没有，则需要添加该包npm install Echarts。该文用的版本是"echarts": "^5.4.3"。 关系图组件a.vue {{ obj.label }} //放echart图标的 配置项及逻辑处理 import { ref, unref, reactive, nextTick, onMounted, onUnmounted, defineProps, watch} from 'vue'; import * as echarts from 'echarts'; const chartContainer = ref(null); let myChart = reactive({}); const selectedLevel = ref('1'); const levelOptions = ref([ { label: '一级关系', value: '1' }, { label: '二级关系', value: '2' }, { label: '三级关系', value: '3' }, ]); // 接口返回的数据格式如下 let data = reactive({ // 关键点，nodes的那么不能重复，所以需要加上id加以区别，让data中的节点的name不能重复。 nodes: [ { id: '0', name: '张三', level: '0', parent: '', itemStyle: {color: '#ee6666'} }, { id: '1', name: '李四', level: '1', parent: '张三', itemStyle: {color: '#9fe080'} }, { id: '2', name: '王五', level: '1', parent: '张三', itemStyle: {color: '#9fe080'} }, { id: '3', name: '赵六', level: '2', parent: '李四', itemStyle: {color: '#fc8452'} }, { id: '4', name: '孙七', level: '2', parent: '王五', itemStyle: {color: '#fc8452'} }, { id: '5', name: '孙七', level: '2', parent: '张三', itemStyle: {color: '#fc8452'} }, { id: '6', name: '周八', level: '2', parent: '王五', itemStyle: {color: '#fc8452'} }, ], links: [ { source: 0, target: 1, level: '1', category: "夫妻" }, { source: 0, target: 2, level: '1', category: "邻居" }, { source: 1, target: 0, level: '1', category: "夫妻" }, { source: 1, target: 3, level: '2', category: "堂兄弟" }, { source: 2, target: 4, level: '2', category: "夫妻" }, { source: 4, target: 0, level: '2', category: "祖孙" }, { source: 2, target: 5, level: '2', category: "姐妹" }, { source: 2, target: 6, level: '2', category: "姐妹" }, ] }); let timmer = ref(null); const props = defineProps({ cstGxGraphData: { type: Object, default: ()=>{} }, }); const option = reactive({ series: [{ type: 'graph', // 图形类别-graph关系图 layout: 'force', // 布局方式，force为力引导布局 symbolSize: 40, // 节点的大小-圆圈 roam: true, // 允许用户拖动和缩放图表 label: { // 图形上的文本标签-圆圈里边展示的内容 show: true, }, edgeSymbol: ['circle', 'arrow'], // 连接线两端的形状,此为一端圆圈一端箭头 edgeSymbolSize: [4, 8], //连接线两端形状的大小 edgeLabel: { show: true, fontSize: 14, formatter: function(param) {// 标签内容-category return param.data.category; } }, data: [],// 数据 links: [],// 关系连接线及关系内容 lineStyle: { // 连接线的样式 width: 2, curveness: 0 }, emphasis: { // 高亮状态的图形样式。 focus: 'adjacency', lineStyle: { width: 3, curveness: 0 } }, force: { // 力引导布局相关的配置项 repulsion: 100,//节点之间的斥力因子,即值越大节点间的连线越长 edgeLength: 90 //引力因子,值越大越往中心靠拢 }, zoom: 2, // 默认图标放大的倍数 scaleLimit: {// 限制放大缩小的倍数 min: 1, max: 5 }, //组件离容器上下左右侧的距离。 left: 10, right: 10, top: 10, bottom: 10, }] }); // 监听父组件传递过来的数据，由于改数据是在父组件中异步请求回来的数据，有延迟，需要监听，否则，拿出来的数据是上一次的数据 watch( () => props.cstGxGraphData, (newValue, oldValue) => { if(newValue.nodes.length) { data.nodes = newValue.nodes; nextTick(() => { // console.log(newValue, 'DOM已更新watch:', oldValue,); if(Object.keys(myChart).length) { updateChart(); } }); } if(newValue.links.length) { data.links = newValue.links; } },{ deep:true, immediate:true, }); // 生命周期 onMounted(()=>{ // 初始化echart myChart = echarts.init(chartContainer.value); // console.log(chartContainer.value, 'myChart1：',myChart); //随着屏幕大小调节图表 window.addEventListener("resize", () => { console.log('窗口变化啦'); timmer.value = setTimeout(function (){ myChart.resize(); },200) }); }); onUnmounted(() => { // 移除监听 window.removeEventListener('resize', () => { myChart.resize() }); // 组件销毁前移除事件监听 }); // 关系图配置项 function updateChart() { const level = selectedLevel.value; // console.log(level); // 根据层级过滤对应的数据 const nodes = data.nodes.filter(node => node.level link.level |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |