定制开发网上参考了很多答案，定制开发基本都没用。定制开发问过几个同事也没有现定制开发成的解决方案，定制开发有方案也大多不完美。定制开发我们要实现的效果是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) {} }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
重要的事说一遍，先看注释！，接下来对标记的数据进行处理，完整代码太长，这里只贴有用的部分，如果还有不明白的可以留言问我。
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, }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
以上基本就可以实现如图的效果了。
还是那句话：
花费了一些时间，抱着分享的心态来分享一下心得，希望不要转载
对你有帮助的话麻烦点个赞或收藏，感激，赠人玫瑰，手有余香🌹