javascript - echarts中pie圖位置偏移
問題描述
按照官方實例碼代碼
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);
但pie圖位置總是不在父容器中心
第二層(echarts自己生成的 已經開始歪了)
這是結果 很歪了
題主發現只有類型是pie的會這樣 柱狀圖之類的不會 是哪里沒設置好么 我這里自己加了兩段代碼才讓其居中
$(’#myPie’).children().css(’width’, ’100%’);$(’#myPie’).children().css(’height’, ’100%’);$(’#myPie’).children().children().css(’height’, ’100%’);$(’#myPie’).children().children().css(’width’, ’100%’);
問題解答
回答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;
相關文章:
1. javascript - immutable配合react提升性能?2. javascript - sublime快鍵鍵問題3. javascript - nodejs關于進程間發送句柄的一點疑問4. Apache 已經把網站根目錄的改為allow from all了,但是服務器還是不能訪問?5. 實現bing搜索工具urlAPI提交6. javascript - 移動端上不能實現拖拽布局嗎?7. vue.js - Vue 如何像Angular.js watch 一樣監聽數據變化8. phpstudy8.1支持win11系統嗎?9. 配置Apache時,添加對PHP的支持時語法錯誤10. css - 寫頁面遇到個布局問題,求大佬們幫解答,在線等,急!~

網公網安備