echarts 如何制作杜邦图(树结构函数表达式)

先看效果图

开始准备

echarts版本 cdn.jsdelivr.net/npm/echarts...

echarts配置核心 series.data.label.formatter series.data.label.rich

配置核心思路

设置字符串模板

series.data.label.formatter

美化样式

series.data.label.rich

假设我们要做的布局如下

我们可以分解为 ['{title|{b}}','{left|1÷(5-}','{right|)}','{bottom|{c}}'].join("\n");

通过rich {styleName|text content text content} 标记样式名。 样式修改代码如下

js 复制代码
{
  title: {
    backgroundColor: '颜色',
    width: 80,
    height: 40
  },
  bottom: {
    backgroundColor: '颜色',
    width: 80,
    height: 40
  },
  left: {
    formatter: '{left|1÷(5-}',
    style: {
      color: '#000',
      height: 0,
      padding: [0, 120, 0, 0],
      // padding: [0, 0, 0, 220],
      width: 0
    }
  },
  right: {
    formatter: '{right|)}',
    style: {
      color: '#000',
      height: 0,
      width: 0,
      padding: [0, 0, 0, 100]
    }
  },
}

核心的配置就在于我们需要吧left和right的width改为0 意图在于我们要保留文字但是我们不需要他占高度类似于脱离文档流 所以这个地方神奇!!!

padding的作用是缩短之间的距离 这里要说明一下padding你可以理解为往内缩短中心点的距离不是往外增加宽度

下面是我开发的思路

如何将文字通过配置的方式传入到对应的数据 解决办法: 我们通过递归去获取名称或者名称重复通过索引去写入配置 通过一个对象去把配置到对应的数据 例如

js 复制代码
{'名称或者索引':{
  labelOptin: {
    left: {
      formatter: '{left|1÷(5-}',
      style: {
        color: '#000',
        height: 0,
        align: 'left',
        // padding: [0, 100, 0, 0],
        padding: [0, 0, 0, 220],
        width: 0
      }
    },
    right: {
      formatter: '{right|)}',
      style: {
        color: '#000',
        height: 0,
        align: 'right',
        padding: [0, 240, 0, 0]
      }
    },
  },
}}

我们只要对对应的配置项进行读取设置就可以

存在的弊端 我们这些内容是通过写入固定值去展示,如果宽度改变了我们还是要重新调整位置

最后附上代码地址

GitHub

相关推荐
AliPaPa9 分钟前
你可能忽略了useSyncExternalStore + useOptimistic + useTransition
前端·react.js
parade岁月19 分钟前
nuxt和vite使用环境比变量对比
前端·vite·nuxt.js
小帆聊前端22 分钟前
Lodash 深度解读:前端数据处理的效率利器,从用法到原理全拆解
前端·javascript
Harriet嘉40 分钟前
解决Chrome 140以上版本“此扩展程序不再受支持,因此已停用”问题 axure插件安装问题
前端·chrome
FuckPatience1 小时前
前端Vue 后端ASP.NET Core WebApi 本地调试交互过程
前端·vue.js·asp.net
Kingsdesigner1 小时前
从平面到“货架”:Illustrator与Substance Stager的包装设计可视化工作流
前端·平面·illustrator·设计师·substance 3d·平面设计·产品渲染
一枚前端小能手1 小时前
🔍 那些不为人知但是好用的JS小秘密
前端·javascript
屿小夏1 小时前
JSAR 开发环境配置与项目初始化全流程指南
前端
微辣而已1 小时前
next.js中实现缓存
前端
Dcc1 小时前
纯 css 实现前端主题切换+自定义方案
前端·css