网上参考了很多答案，基本都没用。问过几个同事也没有现成的解决方案，有方案也大多不完美。我们要实现的效果是label标签全部显示并实现一上一下，完成结果如图所示，想了很久，代码不是很难，难的是实现的思路。
花费了一些时间，抱着分享的心态来分享一下心得，希望不要转载
对你有帮助的话麻烦点个赞或收藏，感激，赠人玫瑰，手有余香🌹
如图：
要实现上图的效果，我想过几种思路：
-
获取同一坐标轴上的坐标点，然后对比同一纬度的大小给设置positon方式。
事实证明行不通，首先坐标我查阅文档查了半天也在网上进行搜索，都是答非所问。其次，就算坐标找到了，没有办法直接在option的label里动态设置positon. 官方文档似乎就几种固定的属性，没有看到position有设置回调的方法。
-
文档也看了好几遍了，也没发现可以动态设置offset的方式，试过了不行。接下来说可以实现的方式。
-
实现思路：
3-1. 在异步获取折线图数据时添加一个标记position，这个标记表示当前数据在图标中的位置是上还是下。
3-2. 举个例子，用当前值和同期值做对比，如果当前值大于同期值，那么数值应该在上方，反之下方。
3-3. 有个值得注意的点是，折线图不设置position时默认都是top,所以我们只要对标记为bottom的数值做位置上的处理就行。
3-4. 最后通过设置padding的方式实现了。
具体实现代码如下：
const queryCargoTrendData = async (chartParams) => {
try {
lineOption.series[0].data = []
lineOption.series[1].data = []
const { data } = await queryCargoTrend(chartParams)
if (data.records && data.records.length > 0) {
lineOption.xAxis.data = data.records.map(item => item.dateCode)
data.records.forEach(item => {
/***
* 0 注释很重要，必看
* 1 通过遍历的方式给series的两个数组分别添加 position 标记
* position1 表示当月数据在折线图中的上下位置
* position2 表示同期数据在折线图中的上下位置
* 2 添加好标记后去label的formatter格式化函数进行数据处理
*
*/
let position1 = item.value > item.valuelwd ? 'top':'bottom'
let position2 = item.value > item.valuelwd ? 'bottom':'top'
/***
* 3 这里有个注意的地方，如果数据映射到图标，那么必须得有个字段是value,否则不显示，
* 其他的随便你怎么加，不清楚就按照下面的添加
*/
lineOption.series[0].data.push({value: item.value, position: position1})
lineOption.series[1].data.push({value: item.valuelwd, position: position2})
})
}
} catch (e) {}
}
重要的事说一遍，先看注释！，接下来对标记的数据进行处理，完整代码太长，这里只贴有用的部分，如果还有不明白的可以留言问我。
series: [
{
name: '每日数据',
type: 'line',
color: '#7C25FF',
label: {
show: true,
color: colors[0],
formatter: (params) => { // 实现
/***
* data 映射的数据源； value 折线图实际取值； 《如果实在不明白请查阅文档》
* 这里有个点，上文说过了，由于默认position的位置是‘top’,
* 所以这里只需对bottom位置的数据进行处理
* 最后通过rich给样式设置padding可以实现。
*/
const { data, value } = params;
let arr = data.position == 'bottom' ? ['{bottom|'+ value +'}'] : [value];
return arr.join('')
},
textStyle: {
rich: {
bottom: {
padding: [0, 0, -50, 0]
},
}
}
},
symbol: 'circle',
symbolSize: 8,
lineStyle: {
width: 1
},
itemStyle: {
borderWidth: 1,
borderColor: '#fff',
},
data: []
},
{
name: '上周同期',
type: 'line',
color: '#ffa65e',
label: {
show: true,
color: colors[1],
formatter: (params) => {
// data 映射的数据源； value 折线图实际取值；
const { data, value } = params;
let arr = data.position == 'bottom' ? ['{bottom|'+ value +'}'] : [value]
return arr.join('')
},
textStyle: {
rich: {
bottom: {
padding: [0, 0, -50, 0]
}
}
}
},
symbol: 'circle',
symbolSize: 8,
lineStyle: {
width: 1
},
itemStyle: {
borderWidth: 1,
borderColor: '#fff',
},
data: []
}
],
dataZoom: {
type:'inside',
orient: 'horizontal',
start: 0,
end: 20,
height: 12,//组件高度
borderColor: "#F4F4F4",
zoomLock: true,
}
以上基本就可以实现如图的效果了。
还是那句话：
花费了一些时间，抱着分享的心态来分享一下心得，希望不要转载
对你有帮助的话麻烦点个赞或收藏，感激，赠人玫瑰，手有余香🌹