Echarts中treemap实现知识地图的逐层展开

最新推荐文章于 2024-07-30 11:13:28 发布

zfan520

最新推荐文章于 2024-07-30 11:13:28 发布

阅读量1.2w

点赞数 5

分类专栏： Reactjs React-echarts 文章标签： react echarts treemap option

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

版权

本文介绍了如何使用Echarts的treemap组件创建知识地图，并展示了如何通过调整`leafDepth`属性实现不同层级的展开效果。同时，详细解释了如何修改源码以防止选中叶子节点时移动至中心，提供了具体的文件路径和修改方法，帮助读者更好地理解和控制treemap的交互行为。

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

1、演示效果

2、代码呈现

import React, { Component } from 'react';
import './App.css';
//需要先运行npm install echats,才能这样引入
import echarts from 'echarts';

class App extends Component {

  initTreemap() {
    //数据定义
    const data = [{
          name: "等分数",
          children: [{
            name: "分数除法", value: 1,
          }, {
            name: "分数加法", value: 1,
          }, {
            name: "分数减法", value: 1
          }]
        },
        {
          name: "有理数除法",
          children: [{
            name: "个位数除法", value: 1
          }, {
            name: "两位数除法", value: 1
          }, {
            name: "分数除法", value: 1
          }]
        },
        {
          name: "1-9的加法",
          children: [{
            name: "个位数加法", va