apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.56k stars 19.61k forks source link

[Bug] I want to change the distance of the axis from, say, 0,0. Change it to (0,80) #20328

Closed IsXueYi closed 1 month ago

IsXueYi commented 1 month ago

Version

5.2.2

Link to Minimal Reproduction

no

Steps to Reproduce

This is a question

Current Behavior

I want to change the distance of the axis from, say, 0,0. Change it to (0,80); But I looked through the documentation and did not find this feature

Expected Behavior

I wish I could implement this feature so that I could complete such a design draft In addition, areaStyle for line supports one color above 80 and another color below 80 image

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

I'd like to hear back from the team to determine if I didn't find the configuration or if it's not currently supported

acse-hz6215 commented 1 month ago

Hi, I'm not sure what you mean by changing the axis, if you mean changing the size of the rectangle formed by the x-axis and y-axis, you can edit it using grid.width and grid.height https://echarts.apache.org/en/option.html#grid

To set one color above 80 and another color below 80, I suggest using visualMap instead of editing the area style. You can refer to this example: https://echarts.apache.org/examples/en/editor.html?c=area-pieces

IsXueYi commented 1 month ago

First of all, thank you very much for your reply Let me elaborate on my problem:

image

1.My goal is to make a graph that shows the temperature,
And set a critical value: 80°
2.The effect is shown in the figure.
3.I want areaStyle to be displayed based on this critical value,
For example, if my value is 100, 'areaStyle' shows the area 100-80

Do you see what I mean? My problem is that I can implement the above image with echarts。

acse-hz6215 commented 1 month ago

Based on my experience, areaStyle doesn't allow you to set colors based on defined boundaries (I could be wrong though). If you want to achieve what you described, I suggest using visualMap. I have made similar graph like this before image

MatthiasMert commented 1 month ago

You can use the stack property to achieve a similar effect: Example

helgasoft commented 1 month ago

stack with 2 colors - Demo image

IsXueYi commented 1 month ago

Thank you all for your selfless help in solving my problem. I will pass on your great spirit