echarts 如何让饼图,随着屏幕的大小,而自适应变大变小。
3条回答 默认 最新
- CSDN专家-showbo 2022-06-30 10:11关注
和上个问题差不多,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()
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 R语言卸载之后无法重装,显示电脑存在下载某些较大二进制文件行为,怎么办
- ¥15 java 的protected权限 ,问题在注释里
- ¥15 这个是哪里有问题啊?
- ¥15 关于#vue.js#的问题:修改用户信息功能图片无法回显,数据库中只存了一张图片(相关搜索:字符串)
- ¥15 texstudio的问题,
- ¥15 spaceclaim模型变灰色
- ¥15 求一份华为esight平台V300R009C00SPC200这个型号的api接口文档
- ¥15 字符串比较代码的漏洞
- ¥15 欧拉系统opt目录空间使用100%
- ¥15 ul做导航栏格式不对怎么改?