Как создать профиль объема (горизонтальные полосы объема), выровненный по правому краю на Echarts ⇐ Javascript

[Anonymous]

Я пытаюсь создать финансовую диаграмму с помощью ECharts, где основным отображением является линейный график цен, а справа у меня есть профиль объема (горизонтальные полосы, показывающие распределение объема по уровню цен).
Я изо всех сил пытаюсь отобразить данные объема на отдельной оси, выровненной по правому краю, при этом гарантируя, что они разделяют шкалу цен (ось Y) с основным линейным графиком.
конфигурация echarts:

Код: Выделить всё

const config = {
"toolbox": {
"show": false
},
"grid": [
{
"left": 0,
"right": 80,
"top": 0,
"bottom": 0
},
{
"left": "auto",
"right": 0,
"width": 80,
"top": 0,
"bottom": 0,
"containLabel": false
}
],
"axisPointer": {
"link": [
{
"xAxisIndex": "all"
}
]
},
"tooltip": {
"trigger": "axis"
},
"brush": {
"yAxisIndex": "all",
"brushLink": "all",
"outOfBrush": {
"colorAlpha": 0.1
}
},
"xAxis": [
{
"type": "category",
"axisLine": {
"show": true
},
"splitLine": {
"show": false
},
"axisTick": {
"show": false
},
"data": [
"2025-10-11T08:35:59.000+00:00",
"2025-10-11T09:35:59.000+00:00",
"2025-10-11T10:35:59.000+00:00",
"2025-10-11T11:36:23.000+00:00",
"2025-10-11T12:36:47.000+00:00",
"2025-10-11T13:37:11.000+00:00",
"2025-10-11T14:37:35.000+00:00",
"2025-10-11T15:37:47.000+00:00",
"2025-10-11T16:38:35.000+00:00",
"2025-10-11T17:38:59.000+00:00"
],
"gridIndex": 0
}
],
"yAxis": [
{
"type": "value",
"scale": true,
"splitLine": {
"show": false
},
"axisLabel": {
"show": false
}
},
{
"type": "value",
"scale": true,
"splitLine": {
"show": false
},
"axisLabel": {
"show": false
},
"axisLine": {
"show": false
},
"axisTick": {
"show": false
},
"position": "right",
"min": 0
}
],
"dataZoom": [
{
"type": "inside",
"xAxisIndex": [
0,
1
]
}
],
"series": [
{
"name": "Fake Data",
"type": "line",
"symbol": "none",
"data":  [
[
"2025-10-11T08:35:59.000+00:00",
1.2155066393580016
],
[
"2025-10-11T09:35:59.000+00:00",
1.2154868909655494
],
[
"2025-10-11T10:35:59.000+00:00",
1.2154729901909682
],
[
"2025-10-11T11:36:23.000+00:00",
1.2154630966833069
],
[
"2025-10-11T12:36:47.000+00:00",
1.2157154516009998
],
[
"2025-10-11T13:37:11.000+00:00",
1.215828837107522
],
[
"2025-10-11T14:37:35.000+00:00",
1.2158148080704236
],
[
"2025-10-11T15:37:47.000+00:00",
1.215785284344764
],
[
"2025-10-11T16:38:35.000+00:00",
1.2157795439485928
],
[
"2025-10-11T17:38:59.000+00:00",
1.215747809495948
]
],
"xAxisIndex": 0,
"yAxisIndex": 0
},
{
"name": "Volume",
"type": "bar",
"yAxisIndex": 1,
"xAxisIndex": 0,
"data":  [
404.1048223893398,
348.4901279262116,
229.7200139704666,
159.5920723866834,
374.3170031064355,
139.1884316523038,
318.1035608559542,
953.4960904308605,
95.65824053434258,
606.4772671877639
]
}
]
}

Как мне изменить конфигурацию сетки, xAxis, yAxis и серии, чтобы получить отображение профиля объема, где:
Столбцы объема располагаются горизонтально (как гистограмма, где категории представляют собой уровни цен).
Столбцы объема содержатся в отдельной области фиксированной ширины в правой части диаграммы.
Вертикальное выравнивание (ось Y) столбцов объема синхронизировано с осью Y цены основного линейного графика.
чего я достиг на данный момент:


чего я ожидаю:


детская площадка
https://echarts.apache.org/examples/en/ ... KAiOPPAGwC M8APGgLgvOr9qQQ8Ady4UAZlEapK1AL4AaWVRoBzGDgAmYgNrL-vfkZqMU4uGIAMSo8Y2qIF7gA5r-27XqYrNj9RqscPTAVu7yvkaGfrSm5mI0UACu9DQRfjT2jj5h xsJacBBirmkedHje3G7RKoHB2dW0AMaEcFA4BAAyUMwojGKS0ig5FHL6ALppCWw4SAAKeO1wKDBiUfwm7QDWusN8aw00bACC00gAkgSaKBzcCYx9u_LDY_qK-mVMu BU8w3T2qst4lBTjRXpNmDBEOJVr8QCcZhcrjdaFI-iV_BCoRAOLsgfdUr88Ml0OIAEKQ6Hcfa2GjNRh4GBHRiYaBWBAARmGoz4bz4h3hSB2HmpxjgIEwKHijSgS1UD JABIOwJmOIIkqpj2MghEYjgkKGDV51RoSEwjBwcFV6p-DT52tE3AGMkN6OMyqQABUcI1thrbf57f0pM7qkbojRNDKoEL_bQAEyWOMAVgAtOzLGn2R7LM5OABmJOcJ MATgQlnLAGpy5xy4rYzQE8m0xn2VnLMX84WS2XK9Xa670o3U-nMx7052i6Xy5Yq5Ya5Y6_6G4nhy2s638wA2ThxvM9md9hcD0pD5uj9lxrecAAsAHZ97P54vbcumyP W2O8_nb5xWw_D8-Bynu-67Xt-nb_nO_aauswFrmOhZ5j-d6QU-x40nB57bnmuYFqh0GxvGK5nh-7I_jhk74QuMETDBagaJoiLXKEHjctQtF8nCILcHowp0WKErxAA blIiSSuhKhINKpi6vqEkCGaFpWjChEmkiIDoSMGBqhvJUwqt0vQqfWgaOlpMFsUYYYGPx4rWjQImMGJgE0lJUjWnqYm6aa5qWu01oiukJmaYM5m6e6XQ9H0frGepQYh S6dHhX5RlLkFTradEVmlO6Xo-ilL5pWZCUHJgeBIBa-AEPEmQWLpwDtCxtgWRQHH-JGrQAFoMCEPHDAFfICXZ7TlVcznGMcpxMcivGxlUsacg0LyseMkyoBoKCCr1 feHAQUDAHZABiUCbCgFAACJRmN6yDfE5pqlddogMArBRbQBCEOJdHtdGW2xjNhEqJhH45hO3bTo-BEA1Q7IIHG7JJkmlibpuebFgWriWOym4wXwrX-v9AOvquo7tqD U69lBR447YMNw0m17OJuzjFu2m4I9exbXtTVB47aBOqUD65zgWlHgwB8keLT8N3nGxYs-yLPFkzcbcy1EvUPz9aC2O7JXruVEPdUUv0yjrNM3meZI8Wqu8w0mtLtr F5XihYuU4b0TG7e0tJlj5Zy8Wzg2-rVD2y-jtfkhv4w67aGq3wxvOHGzjOEh6a3kmcYq4RtvVKHQHESBY5gZHeEx5DUMJ-yDM5pYt6WNeu7Y9nwcUHnxqO4hyH3mXV NQ9DsPw7ezgZ84155ted6blzzeq234aO9huFJgbLfxwPSa3rexb06jDMlknQez3H_iO-RuZgxTsd9xQnt3q4nPb5zgfZzRukTQilzMZUulcR_SKNZZAc_V_C7X2vE AAakwRIYDdI3VuMwWA7taC_3OJ_ZE7I34CimvUY030Yz-mvPXDk9dE67mZhbAOLdx7OAQBzTGcYt5xk3HDLGLdM6llvAmTGqM67XmRpuFu8NSz71rmQ5GKdrxUNvNe BAeYyLljkUjMeCNBGow5MnMeWMM6WxwlQ9kND0wFk3DmBG28G4t23nuDmxiWZjxzMYpMFjl5s0ToQpM49x7JmcC3Yxm5aGbyYV7Zwm8UbW0WlycYZA5AAEoyCyFAJA WAiBNAzEwDKRoEAjiNFwIQUg-hBrcAAOSYkEIU3w-hYAoCgEgX6exhglIgB6WyRS7ooAAJplOGM0BkmgABKUACAAh4sbOMCgb7r03DnKgKCprfzCFZVqMSADcQA

Подробнее здесь: https://stackoverflow.com/questions/798 ... on-echarts