echarts 如何让饼图,随着屏幕的大小,而自适应变大变小。
和上个问题差不多,resize事件更新option
pie达到自适应用到window.onresize,根据页面可视宽度动态调整下series的center,radius
var timer;
function checkWindowWidth() {
var cw = document.documentElement.clientWidth;//页面可视宽度
var chartWidth = $('#myChart1').width();//3个容器一样宽度,用其中一个计算
//调整series
if (cw > 1024) {//大于1024以上
option.series[0].center = ['15%', '25%'];
option.series[0].radius = ['35%', '28%'];
}
else {//720~1024
option.series[0].center = ['50%', '30%'];
option.series[0].radius = ['60%', '53%'];//放大半径
}
myChart.setOption(option);
myChart.resize();
}
var myChart = echarts.init(document.getElementById('myChart'));
window.onresize = function () {
clearTimeout(timer);//防抖
timer = setTimeout(checkWindowWidth, 200);
};
checkWindowWidth()
window.addEventListener("resize", function () {
myChart.resize(); // myChart 是实例对象
});