按钮实现echarts添加与删除节点

最新推荐文章于 2024-07-22 16:11:13 发布

zfan520

最新推荐文章于 2024-07-22 16:11:13 发布

阅读量5.6k

点赞数

分类专栏： React-echarts 文章标签： React-echarts 子父组件传参兄弟组件传参监听传值

本文链接：https://blog.csdn.net/zfan520/article/details/78623272

版权

本文介绍了如何使用Echarts实现图形的动态更新，包括删除和添加节点。通过React组件间的通信，利用reducer传递节点信息，实现Echarts图表的实时更新。在PieReact组件中，根据接收到的父组件传来的删除或添加标志，更新图表数据。在Addknowledge组件中，用户输入新节点信息并触发更新，通过父组件的handleAdd方法将信息回传，完成节点的添加。

摘要由CSDN通过智能技术生成

1、echarts文件将节点信息通过reducer传出

import React from 'react'
import echarts from 'echarts/lib/echarts' //必须
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/graph'
import { connect } from 'react-redux';
import $ from 'jquery';
 
class PieReact extends React.Component {
  constructor(props) {
    super(props)
    this.initPie = this.initPie.bind(this)
    this.state = {
      echartsdata: null,
      echartslinks: null
    }
  }
  initPie() {
    //节点数据
    const TestNodeOption = {
      animationDurationUpdate: 1500,
      animationEasingUpdate: 'quinticInOut',
      series: [
        {
          type: 'graph',
          zoom: 2,
          layout: 'force',
          hoverAnimation: true,
          // 节点大小
          name: 'aiii',
          symbolSize: 30,
          focusNodeAdjacency: true,
          roam: true,
          categories: [{
            name: '一级节点',
            itemStyle: {
              normal: {
                color: "#009800", //颜色
              }
            }
          }, {
            name: '二级节点',
            itemStyle: {
              normal: {
                color: "#9ccc65",
              }
            }
          }, {
            name: '三级节点',
            itemStyle: {
              normal: {
                color: "#f2b368",
              }
            }
          }, {
            name: '四级节点',
            itemStyle: {
              normal: {
                color: "#53bc65",
              }
            }
          }, {
            name: '五级节点',
            itemStyle: {
              normal: {
                color: "#778866",
              }
            }
          }],
          // 节点标签
          label: {
            normal: {
              show: true,
              textStyle: {
                fontSize: '12rem'
              },
            }
          },
          //放大程度
          force: {
            repulsion: 200
          },
          edgeSymbolSize: [4, 50],
          // 数据
            //可获取网络数据data:this.state.echartsdata
            //采用写死的数据
          data: [
            { category: 0, name: "六年级数学知识大纲", dataid: 1 }
            ,
            { category: 1, name: "数与代数", dataid: 2 }
            ,
            { category: 1, name: "图形与几何", dataid: 3 }
            ,
            { category: 1, name: "统计与概率", dataid: 4 }
            ,
            { category: 1, name: "综合与实践", dataid: 5 }
            ,
            { category: 2, name: "分数乘法", dataid: 6 }
            ,
            { category: 2, name: "分数除法", dataid: 7 }
            ,
            { category: 2, name: "比", dataid: 8 }
            ,
            { category: 2, name: "百分数", dataid: 9 }
            ,
            { category: 2, name: "位置与方向", dataid: 10 }
            ,
            { category: 2, name: "圆", dataid: 11 }
            ,
            { category: 2, name: "统计", dataid: 12 }
            ,
            { category: 2, name: "确定起跑线", dataid: 13 }
            ,
            { category: 2, name: "数学广角", dataid: 14 }
            ,
            { category: 2, name: "string", dataid: 894 }
          ],
          // 建立关系
            //可获取网络关系links:this.state.echartslink