The size of the echarts container adapts to the screen

describe:

The echarts container stipulates that the width and height must be fixed, and the previous attempt to use percentages also failed. The reason is that its container size will only be obtained once during the initial loading, whether it is fixed or percentage, it will only be obtained once. In this way, the container changes itself when the page is pulled, but the chart does not change.

solve:

Set the listening event for the window, and listen to the change of the window to reacquire the container size of echarts.

1. First, you need to set the width and height of the parent container of the container (percentage or pixel can be used)

2. Set the width and height of the container as a percentage

#chart {
  margin-top: 50px;
  width: 100%;
  height: 75%;
  transform: translateY(-40px);
}

3. Set the timer after setoption

   chart.setOption(option);
      setTimeout(function() {
        window.onresize = function() {
          chart.resize();
        };
      });

Renderings:

Confuse:

Now there is no way to scale the chart container proportionally. The desired result should be to keep the center horizontally and vertically (you can set the position percentage) and scale the chart proportionally.

After searching, it is found that the more common method of proportionally scaling the container is to replace the height with the upper and lower padding, because the padding is based on the percentage of the width. But for echarts, it cannot be rendered without height.

For the time being, this effect can only be achieved. It may be necessary to obtain the width of the container in the created cycle, then calculate the height by percentage and return it to css, and then add this function to the window change function to change the height of the container. Have time to try again.