先看效果图
开始准备
echarts版本 cdn.jsdelivr.net/npm/echarts…
echarts配置核心 series.data.label.formatter
series.data.label.rich
配置核心思路
设置字符串模板
美化样式
假设我们要做的布局如下
我们可以分解为 ['{title|{b}}','{left|1÷(5-}','{right|)}','{bottom|{c}}'].join("\n")
;
通过rich {styleName|text content text content}
标记样式名。
样式修改代码如下
{
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你可以理解为往内缩短中心点的距离不是往外增加宽度
下面是我开发的思路
如何将文字通过配置的方式传入到对应的数据
解决办法: 我们通过递归去获取名称或者名称重复通过索引去写入配置 通过一个对象去把配置到对应的数据
例如
{'名称或者索引':{
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]
}
},
},
}}
我们只要对对应的配置项进行读取设置就可以
存在的弊端
我们这些内容是通过写入固定值去展示,如果宽度改变了我们还是要重新调整位置
最后附上代码地址
原文链接:https://juejin.cn/post/7349829638887718950 作者:zhuchangfeng