先看效果图

开始准备

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

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