echarts Y轴设置两个刻度的长度,第一个写死,第二个根据内容自动变化

kq0g1dla  于 2022-11-13  发布在  Echarts
关注(0)|答案(3)|浏览(312)

What problem does this feature solve?

如何实现:Y轴设置两个刻度的长度,第一个高度写死,第二个高度根据内容自动变化,效果图如下:

What does the proposed API look like?

帮忙解答,谢谢

2nbm6dog

2nbm6dog1#

@372798735 It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗
TRANSLATED

TITLE

The Y-axis sets the length of two scales, the first is written to death, and the second changes automatically according to the content

BODY

What problem does this feature solve?

How to achieve: the Y axis sets the length of two scales, the first height is written dead, the second height automatically changes according to the content, the rendering is as follows:
https://user-images.githubusercontent.com/52733319/165892758-0874cd33-cf75-42e6-b34f-7f1f0ae77037.png

What does the proposed API look like?

Helpful answers, thank you

8aqjt8rx

8aqjt8rx2#

ECharts 目前不支持你说的这种场景(自动的适应背景高度)。

介于已知信息较少,不确定你目前的实现方案,希望能够补充最小粒度的 Demo,便于问题讨论。
疑问点:Y 轴高度是否固定,是否可以无限往下。【重点】

猜想下,可能的设计思路,使用 bar.markArea 绘制背景,第一个背景固定,第二个通过 柱的个数 * 每个刻度的宽度 - 柱之间的空隙 计算求得动态后的值。

类似如:

markArea: {
    data: [
        [
            {
                name: 'start',
                x: '11%',
            },
            {
                x: '17%'
            }
        ],
        [
            {
                name: '动态',
                x: '19%'
            },
            {
                x: '57%' // 此值,动态变化,计算求得
            }
        ]
    ]
}

上图中,每个柱子width: 6%,gap: 2%,即刻度宽8%。

上述截图 Demo

zfycwa2u

zfycwa2u3#

@372798735 Please provide a demo for the issue either with Official Editor , CodePen , CodeSandbox or JSFiddle .

相关问题