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加载optionmyChart.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类型的表现形式，这种形式可以用作有层级的图形化表示，还是很简单的吧！

Echarts中treemap实现知识地图的逐层展开相关推荐

echarts中设置地图背景图片
1.geo设置背景 (设置 color) 官方属性说明实现效果: options配置: options: {tooltip: {triggerOn: `onmousemove`,trigger: ` ...
echarts中formatter修改鼠标悬浮事件信息操作、echarts地图块、散点区分触发点击事件只触发散点问题详解
这里写目录标题 1.实例 2.案例详解 1.实例这次我拿echarts中地图组合散点图的实例 !!!实现效果:滑到散点显示不同于地图块的信息及 formatter 提示窗自定义!!! 这个显示项 ...
echarts中的地图与Axure交互
1.将echarts中的地图嵌入Axure中实现可视化https://echarts.apache.org/examples/zh/editor.html?c=map-polygon. 2.将echa ...
在echarts中使用百度地图，卫星地图
在echarts中使用百度地图,卫星地图  <script src="https://cdnjs.cloudflare.com/ajax/ ...
【数据架构系列-03】数据仓库、大数据平台、数据中台... 我不太认同《DataFun数据智能知识地图》中的定义
关注DataFunTalk有2年多了,DataFun确实像创始人王大川讲的那样,践行选择.努力和利他原则,专注于大数据.人工智能技术应用的分享与交流,秉承着开源开放的精神,免费的共享了很多有营养的行业 ...
Echarts中对地图的指定区域文字展示指定的颜色
Echarts中对地图的指定区域文字展示指定的颜色项目场景: 为提高客户满意度,修改地图中某个区域的文字颜色解决方案: 通过修改series-map.data.label.color属性参考链接 ...
Vue中使用Echarts中的地图组件报错：TypeError: api.coord is not a function
首先,既然你是Vue开发者,那么其它的就不多讲,简短的说下本人是Java开发,所以有些地方可能不适用所有人,接受大家的建议. 一. 既然在Vue中使用Echarts,那将echarts引入到vue项 ...
echarts中地图与表格联动效果
echarts中地图与表格数据联动,当鼠标在地图上滑入某个区域时,不仅地图中该区域高亮显示,数据表格中的该条数据也会高亮显示.另外当鼠标移入表格中的某条数据时,地图中想对应的区域会自动高亮提示. 鼠标 ...
Echarts中引入中国地图
摘要:最近公司要求开发大屏大数据展示界面,其中有个需求是迁徙图,以下是自己的相关总结,如有些的不好的地方请大家多多指教,我会虚心学习并修改不足的地方. 思考:1.迁徙图实现的第一步是引入中国地图,那如 ...