前言

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

一、矩形树图

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 treevalue: 9999children: [{name: '青岛', // First leaf of first treevalue: 888,}, {name: '济南', // Second leaf of first treevalue: 666}]},{name: '潍坊', // First treevalue: 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回调函数使用及样式。

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

Echarts矩形树图
实现效果: 话不多说,上代码: var option = {title: {show: false,text: title},tooltip: {show: true,formatter: funct ...
关于flask入门教程-ajax+echarts实现矩形树图
矩形树图将层次结构的数据显示为一组嵌套矩形.树的每个分支都有一个矩形,然后用代表子分支的较小矩形平铺. 叶子节点的矩形面积与数据占比成比例.通常,叶节点会用不同的颜色来显示数据的关联维度. 矩形图要比 ...
04 【eCharts样式定制系列】矩形树图自定义颜色
描述在目前的项目中,根据UI设计稿需要实现一个带有大屏的系统首页,在此首页上要添加地图和一些eCharts图表.但是根据UI设计稿,如果要达到美观的目的,需要对eCharts进行定制.此次需要定制的 ...
echarts柱状图，不同颜色，立体，lable不同颜色，lable有背景图。
echarts柱状图,不同颜色,立体,lable不同颜色,lable有背景图. 文章目录 echarts柱状图,不同颜色,立体,lable不同颜色,lable有背景图. 配置上下椭圆配置柱状图,和配 ...
echarts热力背景图_Echarts 图表中设置背景图片
在项目开发过程中,遇到在Echarts图表上添加背景图的需求,通过查找Echarts官网的配置项,发现 graphic 能够实现在图表中设置背景图片. image 在Echarts的实例中,找到一个实 ...
html设置渐变色背景图片,css中渐变色作为背景图来使用总结
qt中使用样式设置渐变色背景setStyleSheet()函数设置背景的前期是设置的窗口控件有父窗口ui.widget->setStyleSheet("background-color ...
echarts （二）之canvas设置地图背景图
实现效果如下: echarts效果实现参考:echarts地图连线动效之(一) 接下来说这个背景图是如何利用canvas实现的: 首先在初始化echarts后增加下面代码: `` var chart ...
echarts添加背景图
echarts添加背景图来源:https://www.liuyjuan.com/295.html 1)简单的方法直接给到外层的div元素上 /*比如说这段css样式*/ .TheStatistic ...
echarts圆柱形带背景图
项目有时需要我们将二维的柱状图做出立体的感觉出来,这里是将一个数据柱形放在了后面当背景图使用先给大家看看效果 1. 引入echarts yarn add echaets // 也可以npm下载,看个 ...

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

文章目录

前言