Echarts 矩形树图使用心得（渐变色、背景图等）

---

前言

因业务需求需要一个比较炫酷的矩形树图，由于是第一次用，感觉收获颇深，以此记一次心得。

---

一、矩形树图

Treemap 是一种常见的表达『层级数据』『树状数据』的可视化形式。它主要用面积的方式，便于突出展现出『树』的各层级中重要的节点。

二、需求描述

需要使用矩形树图来展示数据，并且矩形树图的背景色需要渐变色，渐变色的方向还是不一样的，图中文字展示需要背景图片。

三、使用

1.引入echarts.js

代码如下：

import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'
import echarts from 'echarts'

2.初始化及数据结构

init初始化接口，返回ECharts实例； 代码如下：

var myChart = echarts.init(document.getElementById('容器id'));

所需要的data数据结构
有下一级的就用children字段，举例：

data: [
		{
	        name: '山东', // First tree
	        value: 9999
	        children: [
	        	{
		            name: '青岛', // First leaf of first tree
		            value: 888,
	        	}, {
		            name: '济南', // Second leaf of first tree
		            value: 666
	            }
            ]
      	},
		{
			name: '潍坊', // First tree
         	value: 8888
		}
	]

3.具体配置

（1）首先是option中的配置

myChart.setOption({
      series: [{
        name: '标题', // 标题
        type: 'treemap', // 矩形树图类型
        data: _data, // 需要的data数组对象（格式在第二条，这里用的_data是处理后的，下面具体说）
        leafDepth: 1,
        // leafDepth 表示『展示几层』，层次更深的节点则被隐藏起来。点击则可下钻看到层次更深的节点。
		// 例如，leafDepth 设置为 1，表示展示一层节点。
        breadcrumb: {
          show: false // 是否显示下面的面包屑导航
        },
        label: {
          formatter: '{b|{b}}',
          /* 
          * 因为需求的value内容需要背景图片所以在这里这么写（返回html格式没成功，所以用了这种写法）
          * 知识点：
          * {a| 这种表示a样式，而{a}这种有固定的含义，{a}（系列名称）样式里有条竖杠！记得区分。
          * {b}（数据项名称）
          * {c}（数值）
          * {d}（百分比）
          * 看了大佬的文章才知道啥意思，之前就是瞎写
          */
          rich: {
            b: {
              width: 71,
              height: 48,
              align: 'center',
              backgroundColor: {
                image: '图片路径' // 这里导入图片，完成一个需求
              },
              color: '#F9F9F9',
              fontSize: 18,
            },
          }
        },
      }]
    });

（2）然后是渐变色的效果
每一个单独的矩形都要不一样的渐变色，所以需要把data给处理一下，这就是前面说的处理后的data

	let _data = [];
    const _color = ['#1A3C85', '#8D6913', '#077A83', '#C45760', '#6642AA', '#197436']
    data && data.map((i, index) => {
      _data.push(Object.assign({}, i, {  // 这里按照没有子集的data来处理的
        itemStyle: {
        // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 
        // 范围从 0 - 1，相当于在图形包围盒中的百分比，
        // 如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
          color: {
            type: 'linear',          // 渐变色类型
            x: Math.random(),   // 由于是随机方向的渐变，这里用了取随机数的方法，效果还可以
            y: Math.random(),
            x2: Math.random(),
            y2: Math.random(),
            colorStops: [{
              offset: 0,// 0% 处的颜色
              color: _color[index % 6] // 随机遍历的色值
            }, {
              offset: .7, // 70% 处的颜色
              color: '#050731' // 最终趋向的色值固定这里就写死
            }],
            globalCoord: false // 缺省为 false
          },
          borderType: 'dashed', // 矩形边框虚线边框（未能生效，希望有大佬帮忙解答一下，感谢）
          borderColor: _color[index % 6], // 边框颜色和0%处色值一致
          borderWidth: 3, // 边框宽度
        }
      }))
    })

这样就完成了需求所需要的配置，头一次用还真是走了不少弯路

---

总结

以上就是此次使用矩形树图的一些心得。

参考

echarts官网：https://echarts.apache.org/zh/option.html
渐变色参考的 echarts社区：https://www.isqqw.com/#/homepage （之前的打不开了，发现了这个）
样式参考了 CSDN by雷影 这位大佬的 echart的series中label formatter回调函数使用及样式。