gogoWebsite

Recently in the writing of a map application, using echarts charts, however, on the face of a confused, if the parent container of the height/width attribute is set to the form of a percentage, then echarts will be warned, and can not properly generate charts. So the height/width of the div container must be specified as px, which is designed for some reason.
The solutions googled are as follows

• Add window.οnresize= after setOption

The height of the chart was compressed to min-height after I added it, which was strange, so I used the following solution myself and posted the code directly.

var worldMapContainer = ('WorldMap');

// Used to make the chart adaptive height and width, through the form height and width to calculate the container height and width.
var resizeWorldMapContainer = function () {
     = +'px';
     = +'px';
};
//Set the container height and width
resizeWorldMapContainer();
// Initialize the echarts instance based on the prepared dom
var myChart = (worldMapContainer);

// Specify the configuration items and data for the chart
var option = {
    title: {
        text: 'ECharts Getting Started Example'
    },
    tooltip: {},
    legend: {
        data:['Sales volume'],
        height: ,
        width: 
    },
    xAxis: {
        data: ["Shirt.","Wool sweater.","Chiffon shirt.","Pants.","High heels.","Socks."]
    },
    yAxis: {},
    series: [{
        name: 'Sales volume',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

// Display the chart using the configuration items and data you just specified.
(option);

// Used to make the chart adaptive in height and width.
 = function () {
    //Reset container height and width
    resizeWorldMapContainer();
    ();
};

At this point, the height and width of the worldMapContainer doesn't matter because we've already set the div container height and width in js.
This method can be used to make ECharts adaptive in both height and width, if you encounter any pitfalls, add them later.

Updated 2017-9-26

• If you need the chart to follow the container adaptively, set the abovecap (a poem)Replace the container element'scap (a poem)can be. The underlying principle is to refresh the chart width and height through JavaScript rather than direct css adaptive (because ECharts does not support)

Updated 2018-5-27
I'm glad I could help, the blogger was preparing for exams in the second half of 2016 so I stopped updating it and subsequently used OneNote to take notes. But now the blog is going to continue to be updated as well, so if you have any questions, you can just comment or email toblog@