Javascript – Positionsversatz des Kreisdiagramms in E-Charts

Question

Folgen Sie dem offiziellen Beispielcode

this.picChart = echarts.init(document.getElementById('myPie'));
        var pic_option = {
            color: ['#404040'],
            center: ['50%', '50%'],
            legendHoverLink: false,
            series: [
                {
                    type: 'pie',
                    radius: ['100%', '80%'],
                    avoidLabelOverlap: false,
                    data: [
                        {value: 0, name: ''},
                        {value: 1, name: ''}

                    ]
                }
            ]
        };
      
        this.picChart.setOption(pic_option);

Die Position des Kreisdiagramms befindet sich jedoch immer nicht in der Mitte des übergeordneten Containers ist sehr schief
Der Fragesteller hat festgestellt, dass dies nur passiert, wenn es sich um Kreisdiagramme handelt, nicht jedoch bei Balkendiagrammen und dergleichen. Stimmt etwas mit der Einstellung nicht, um es zu zentrieren?

     $('#myPie').children().css('width', '100%');
        $('#myPie').children().css('height', '100%');
        $('#myPie').children().children().css('height', '100%');
        $('#myPie').children().children().css('width', '100%');
        
        
        

Answer 1

你图中#myPie的黄色区域，看起来是margin对应部分。
而margin的部分，是不算在内容区里的，所以父元素的内容区就是左边那一片区域，不包括黄色的部分。
所以建议，在给#myPie写CSS样式的时候，除了定义长款也要定义边距，如下：

#myPie {
    width: 406px;
    height: 406px;
    margin: 0 auto;
}

不加margin: 0 auto;示例（默认靠左布局）

加上margin: 0 auto;示例（因为左右的margin为auto所以自动计算，间距平分）

另外，也有可能是因为缩放的关系，图片大小不会根据缩放改变，加上以下代码即可

window.onresize = this.pieChart.resize;