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

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: "个位数加法", value: 1,
          }, {
            name: "小数数除法",
            children: [{
              name: "有理数加法", value: 1,
            }, {
              name: "优先级加法", value: 1,
            }]
          }]
        },
        {
          name: "小数减法",
          children: [{
            name: "个位数小数减法", value: 1,
          }, {
            name: "两位数小数减法", value: 1,
          }, {
            name: "分数减法", value: 1
          }]
        },]
    //定义echarts加载的参数
     const option = {
      title: {
        text: 'treemap option类型讲解',
        subtext: '2017/12',
        left: 'leafDepth'
      },
      tooltip: {},
      series: [{
        name: 'option',
        type: 'treemap',
        visibleMin: 300,
        data: data,
        leafDepth: 1,//呈现层级，若为1加载时仅展开一层，接下来的每一层通过单击进入，如上面的效果图所示，
        //每一层级呈现的样式
        levels: [
          {
            itemStyle: {
              normal: {
                borderColor: '#555',
                borderWidth: 4,
                gapWidth: 4
              }
            }
          },
          {
            colorSaturation: [0.3, 0.6],
            itemStyle: {
              normal: {
                borderColorSaturation: 0.7,
                gapWidth: 2,
                borderWidth: 2
              }
            }
          },
          {
            colorSaturation: [0.3, 0.5],
            itemStyle: {
              normal: {
                borderColorSaturation: 0.6,
                gapWidth: 1
              }
            }
          },
          {
            colorSaturation: [0.3, 0.5]
          }
        ]
      }]
    };
    //echarts.init(this.ID)获得render中的画布
    var myChart = echarts.init(this.ID) //初始化echarts
    //myChart加载option
    myChart.setOption(option)

  }
  //画布加载后，加载echarts呈现，其实也可直接在render中呈现。
  componentDidMount() {
    this.initTreemap();
  }

  render() {
    //定义画布大小
    const { width = "100%", height = '700px' } = this.props
    //将id抛出，其他位置获得ID后可直接加载echarts，避免了只能在render中加载的局限
    return <div ref={ID => this.ID = ID} style={{ width, height }}></div>
  }
}

export default App;

补充：在上面代码中，可控制option中的leafDepth属性，若leafDepth=2，结果如图所示。

PS：参考官方文档http://echarts.baidu.com/demo.html#treemap-drill-down

3、控制叶子节点是否移动至中心

3.1选中节点移至中心的效果图

选中叶子节点时，会使叶子节点的位置发生改变，是它移至中心。在我看来，这种效果并不友好，所以我找到了源码，并对源码进行了修改。

3.2源码修改

3.2.1 修改文件路径

node_modules->ehcarts->lib->chart->treemap->treemapAction.js

3.2.2 修改方式

var actionTypes = [ 'treemapRender'];
// var actionTypes = ['treemapZoomToNode', 'treemapRender', 'treemapMove'];

找到actionTypes的定义，将treemapZoomToNode和treemapMove删除，仅保留treemapRender即可完成单击叶子节点，位置不发生移动的效果。

4、结束语

通过此篇博客，想让大家了解到treemap中option类型的表现形式，这种形式可以用作有层级的图形化表示，还是很简单的吧！