vue中echarts关系图动态增删节点以及连线方式

 更新时间:2022年07月31日 16:59:10   作者:JosiahH  
这篇文章主要介绍了vue中echarts关系图动态增删节点以及连线方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

echarts关系图动态增删节点及连线

首先,echarts的关系图有个非常坑的地方,就是节点的id必须连续,否则增删之后节点无法连接!

下面是简单的演示实现,实际要用动态增删的话,要复杂的多得多。

我是用的关系图是力引导图

更新后不会重新渲染,只是动态增加的效果

//假设你已经渲染了关系图
test() {
      let option = this.chart.getOption() //获取option配置项
 
      //START增加节点,假设根据id连线
      // option.series[0].data.push({name: '测试节点', category: 1, id: 6, des: '测试描述'})
      // option.series[0].links.push({source: 0, target: 6, name: '测试连线'})
      //END 
 
      //删除节点START
      let data = option.series[0].data //获取节点数据
      let link = option.series[0].links //获取边的数据
      let flag = -1
      for(let i = 0; i<data.length;i++){//假设删除id为1的节点
        if (data[i].id===1){
          data.splice(i,1)
          link.splice(i-1,1)
          flag = i
          break
        }
      }
      for(let i = flag; i<data.length;i++){
        data[i].id--
        if (i!==data.length){
          link[i-1].target--
        }
      }
      //删除节点END
 
      //更新关系图
      this.chart.setOption(option)
    },

echarts关系图vue完整代码

vue 使用echarts 实现关系图,效果如下:

说明: 关系图可以有两种,一种是指定坐标x,y。 另外一种就是通过设置series属性

layout: "force",
force: {
          repulsion: [-2, 100], //节点之间的斥力因子。支持数组表达斥力范围,值越大斥力越大。
          gravity: 0.03, //节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
          edgeLength: [20, 200], //边的两个节点之间的距离,这个距离也会受 repulsion:[10, 50]值越小则长度越长
          layoutAnimation: false,
        },

vue全部代码如下

<template>
  <div class="uni-chart-container">
    <div class="uni-bar-charts" :id="id"></div>
  </div>
</template>
<script>
import echarts from "echarts";
import resize from "../mixins/resize";
export default {
  name: "uniGraph",
  mixins: [resize],
  components: {},
  data() {
    return {
      options: {
        title: {
          text: "",
        },
        series: [],
      },
      barData: [],
      myChart: null,
      seriesName: "",
    };
  },
  props: {
    id: {
      type: String,
      require: true,
    },
    sortMethod: {
      type: String,
      default: "desc",
    },
    title: {
      type: String,
    },
    optionsSetup: {
      type: Object,
      default: () => {
        return {};
      },
    },
    isVertical: {
      type: Boolean,
      default: true,
    },
    chartsData: {
      type: Object,
      default: function () {
        return {
          nodes: [
            {
              name: "李志强",
              category: 0,
              symbolSize: 30,
              value: ["确诊"],
              color: "#F10F0F",
            },
            {
              name: "张亮",
              category: 2,
              symbolSize: 30,
              value: ["密接"],
              color: "#FFC001",
            },
            {
              name: "王飞",
              category: 1,
              symbolSize: 30,
              value: ["次密接"],
              color: "#1D84C6",
            },
            {
              name: "王丽",
              category: 2,
              symbolSize: 30,
              value: ["密接"],
              color: "#FFC001",
            },
            {
              name: "符华",
              category: 1,
              symbolSize: 30,
              value: ["次密接"],
              color: "#1D84C6",
            },
            {
              name: "钱峰",
              category: 1,
              symbolSize: 30,
              value: ["次密接"],
              color: "#1D84C6",
            },
            {
              name: "吴梦",
              category: 1,
              symbolSize: 30,
              color: "#1D84C6",
              value: ["次密接"],
            },
            {
              name: "杨月",
              category: 1,
              symbolSize: 30,
              color: "#1D84C6",
              value: ["次密接"],
            },
          ],
          links: [
            {
              source: "李志强",
              target: "张亮",
              linkTip: "聚餐",
            },
            {
              source: "张亮",
              target: "王飞",
              linkTip: "出现在同一场所",
            },
            {
              source: "李志强",
              target: "王丽",
              linkTip: "出现在同一场所",
            },
            {
              source: "张亮",
              target: "钱峰",
              linkTip: "聚餐",
            },
            {
              source: "张亮",
              target: "符华",
              linkTip: "家庭聚集",
            },
            {
              source: "张亮",
              target: "杨月",
              linkTip: "出现在同一场所",
            },
            {
              source: "张亮",
              target: "吴梦",
              linkTip: "出现在同一场所",
            },
          ],
          categories: [
            {
              name: "确诊",
            },
            {
              name: "次密接",
            },
            {
              name: "密接",
            },
          ],
        };
      },
    },
    customColor: {
      type: Array,
      default: function () {
        return ["#1890FF"];
      },
    },
    // 展示前5条 可传5
    maxL: {
      default: "auto",
    },
    codeStatus: {
      type: Array,
    },
  },
  watch: {
    chartsData: {
      deep: true,
      immediate: true,
      handler: function (v) {
        let _this = this;
        this.$nextTick(function () {
          _this.init();
        });
      },
    },
  },
  beforeDestroy() {
    if (!this.myChart) {
      return;
    }
    this.myChart.dispose();
    this.myChart = null;
  },
  methods: {
    init() {
      //构建3d饼状图
      if (this.myChart) this.myChart.dispose();
      this.myChart = echarts.init(document.getElementById(this.id));
      this.editorOptions(this.chartsData);
      // 传入数据生成 option
      this.myChart.setOption(this.options);
    },
    editorOptions(val) {
      let series = this.getSeries(val);
      var options = {
        tooltip: {
          // formatter: (e) => {
          //   console.log(e);
          //   return e.name + e.data.value;
          // },
        },
        animationDuration: 1500,
        animationEasingUpdate: "quinticInOut",
        color: this.customColor,
        grid: this.setOptionsMargin(),
        series: series,
      };
      this.options = options;
    },
    getSeries(newData) {
      const series = [];
      series.push({
        name: "关系图谱",
        type: "graph",
        hoverAnimation: true,
        layout: "force",
        force: {
          repulsion: [-2, 100], //节点之间的斥力因子。支持数组表达斥力范围,值越大斥力越大。
          gravity: 0.03, //节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
          edgeLength: [20, 200], //边的两个节点之间的距离,这个距离也会受 repulsion:[10, 50]值越小则长度越长
          layoutAnimation: false,
        },
        nodeScaleRatio: 0.6,
        draggable: true,
        roam: false, //鼠标缩放和平移
        symbol: "circle",
        edgeSymbol: ["circle", "arrow"],
        data: newData.nodes,
        links: newData.links,
        categories: newData.categories,
        cursor: "pointer",
        focusNodeAdjacency: true,
        scaleLimit: {
          //所属组件的z分层,z值小的图形会被z值大的图形覆盖
          min: 0, //最小的缩放值
          max: 9, //最大的缩放值
        },
        edgeLabel: {
          //连接线上文字
          normal: {
            show: true,
            textStyle: {
              fontSize: 10,
            },
            formatter: (e) => {
              return e.name;
            },
          },
        },
        label: {
          normal: {
            show: true,
          },
        },
        lineStyle: {
          normal: {
            width: 1.5,
            curveness: 0,
            type: "solid",
          },
        },
      });
      return series;
    },
    // 边距设置
    setOptionsMargin() {
      const optionsSetup = this.optionsSetup;
      const grid = {
        left: optionsSetup.marginLeft,
        right: optionsSetup.marginRight,
        bottom: optionsSetup.marginBottom,
        top: optionsSetup.marginTop,
        containLabel: true,
      };
      return grid;
    },
  },
};
</script>
<style lang="scss">
.uni-chart-container,
.uni-bar-charts {
  width: 100%;
  height: 100%;
}
</style>

resize文件如下:debounce可以自行实现

import {
  debounce
} from "@/utils/utils.js";
export default {
  data() {
    return {};
  },
  mounted() {
    this.initListener();
  },
  beforeDestroy() {
    this.destroyListener();
  },
  deactivated() {
    this.destroyListener();
  },
  methods: {
    initListener() {
      window.addEventListener("resize", debounce(this.resize, 100));
    },
    destroyListener() {
      window.removeEventListener("resize", this.resize);
    },
    resize() {
      const {
        myChart
      } = this;
      myChart && myChart.resize();
    },
  },
};

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo

    elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo

    这篇文章主要介绍了elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • Vue虚拟Dom到真实Dom的转换

    Vue虚拟Dom到真实Dom的转换

    本文主要介绍了Vue虚拟Dom到真实Dom的转换,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2021-07-07
  • 详解Vue项目中出现Loading chunk {n} failed问题的解决方法

    详解Vue项目中出现Loading chunk {n} failed问题的解决方法

    这篇文章主要介绍了详解Vue项目中出现Loading chunk {n} failed问题的解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 简单说说如何使用vue-router插件的方法

    简单说说如何使用vue-router插件的方法

    这篇文章主要介绍了如何使用vue-router插件的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 利用vue3+threejs仿iView官网大波浪特效实例

    利用vue3+threejs仿iView官网大波浪特效实例

    最近好几个vue项目都是用ivew作为UI框架,所以下面这篇文章主要给大家介绍了关于如何利用vue3 + threejs仿iView官网大波浪特效的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2021-12-12
  • vue实现从外部修改组件内部的变量的值

    vue实现从外部修改组件内部的变量的值

    这篇文章主要介绍了vue实现从外部修改组件内部的变量的值,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 基于Vue+Webpack拆分路由文件实现管理

    基于Vue+Webpack拆分路由文件实现管理

    这篇文章主要介绍了基于Vue+Webpack拆分路由文件实现管理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-11-11
  • vue3常用的API使用简介

    vue3常用的API使用简介

    这篇文章主要介绍了vue3常用的API使用简介,帮助大家更好的理解和学习使用vue,感兴趣的朋友可以了解下
    2021-03-03
  • vue 输入框输入任意内容返回数字的实现

    vue 输入框输入任意内容返回数字的实现

    本文主要介绍了vue 输入框输入任意内容返回数字的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-03-03
  • Vue 3中toRaw和markRaw的使用教程

    Vue 3中toRaw和markRaw的使用教程

    toRaw和markRaw是Vue 3中引入的新API,用于更精细地控制对象的代理和响应性,它们提供了在需要时绕过代理或禁用响应性的能力,有助于提高性能和更好地与第三方库进行集成,本文给大家介绍Vue 3中toRaw和markRaw的使用,感兴趣的朋友一起看看吧
    2023-10-10

最新评论