文章目录
- 前言
- 一、矩形树图
- 二、需求描述
- 三、使用
- 1.引入echarts.js
- 2.初始化及数据结构
- 3.具体配置
- 总结
- 参考
前言
因业务需求需要一个比较炫酷的矩形树图,由于是第一次用,感觉收获颇深,以此记一次心得。
一、矩形树图
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