Echarts-- 矩形树图

代码：


const dataArr = []
for(let i = 0; i < 10; i++) {const obj = {name: i,value: 20,label: {show: true,verticalAlign: 'top',align: 'center',formatter: function(params) {return ['{a|第n个}', '{b|数字%}'].join('\n')},rich: {a: {color: '#333',fontSize: 12,lineHeight: 17,align: 'center'},b: {color: '#d0021b',fontSize: 12,lineHeight: 17,align: 'center'}}},itemStyle: {borderWidth: 1,borderColor: '#fff',color: 'rgba(242,71,36,0.1)'}}dataArr.push(obj)
}option = {tooltip: {show: true,padding: [16, 20],backgroundColor: 'rgba(0,0,0,0.6)',borderWidth: 0,textStyle: {fontSize: 14,color: '#fff',lineHeight: 14}},series: [{type: 'treemap',width: '100%',height: '100%',breadcrumb: {show: false},nodeClick: false,roam: false,data: dataArr}]}

最终效果：

Echarts-- 矩形树图相关推荐

Echarts 矩形树图使用心得（渐变色、背景图等）
文章目录前言一.矩形树图二.需求描述三.使用 1.引入echarts.js 2.初始化及数据结构 3.具体配置总结参考前言因业务需求需要一个比较炫酷的矩形树图,由于是第一次用,感觉收获 ...
Echarts矩形树图
实现效果: 话不多说,上代码: var option = {title: {show: false,text: title},tooltip: {show: true,formatter: funct ...
关于flask入门教程-ajax+echarts实现矩形树图
矩形树图将层次结构的数据显示为一组嵌套矩形.树的每个分支都有一个矩形,然后用代表子分支的较小矩形平铺. 叶子节点的矩形面积与数据占比成比例.通常,叶节点会用不同的颜色来显示数据的关联维度. 矩形图要比 ...
04 【eCharts样式定制系列】矩形树图自定义颜色
描述在目前的项目中,根据UI设计稿需要实现一个带有大屏的系统首页,在此首页上要添加地图和一些eCharts图表.但是根据UI设计稿,如果要达到美观的目的,需要对eCharts进行定制.此次需要定制的 ...
玩转可视化图表之矩形树图
一片好运来,两串爆竹响,散发好运气,四方来财气,五福升高空,六六都顺心,齐来迎春节,八方收和气,久久享福祉.今年是虎年,小编在这里给大家拜个晚年,祝大家在新的一年,十全十美. 看看小编在新年的第一篇文 ...
【微信小编】矩形树图、雷达图
矩形树图:如下,上半部分就是矩形树图可以用R来画: library(treemap) library(d3Tree) setwd("D://test//")ap.d <- ...
迪赛智慧数——其他图表（矩形树图）：人体每日膳食合理摄入结构
效果图合理摄入膳食对我们身体而言也是至关重要的,可以参考上图的膳食结构.图中可以清晰的看到每类食物在膳食中所占的比重,但是膳食结构不是一成不变的,是可以根据自身的情况进行体调节的,通过均衡调节各类食 ...
Power BI——树状图(矩形树图)
一.概念: 它把整体的数据想象成一颗树,而其中每一个数据就是一个枝叶,不过这个枝叶是放在一个矩形中,然后每一个数据矩形,错落有致的排放在一个整体的大矩形中,矩形树图通过每个矩形的大小.位置和颜色来区分 ...
Python数据可视化 Pyecharts 制作 Treemap 矩形树图
Python 的 Pyecharts 制作 Treemap(矩形树图) 时需要使用的设置参数和常用模板案例,可根据实际情况对案例中的内容进行调整即可. 文章目录 Demo 层级矩阵树图标准矩阵树图 ...
Echart矩形树图：简单实现矩形树图
矩形树图定义:矩形树图( Treemap)也叫矩形式树状结构图,它采用多组面积不等的矩形嵌套而成.在一张图中,所有矩形的面积之和代表了总体数据.各个小矩形的面积表示每个子项的占比,矩形面积越大,表 ...

Echarts-- 矩形树图

代码：

最终效果：

Echarts-- 矩形树图相关推荐

最新文章

热门文章