scwaho 2022-04-12 14:14 采纳率: 25%
浏览 337
已结题

echarts字体大小自适应无法自动刷新

问题遇到的现象和发生背景

我用echarts做条形成绩统计,图表的主标题字体大小自适应,改变窗口不能自动刷新变化。图能,字不能。

img

问题相关代码,请勿粘贴截图

用网上的办法,这个代码通过了。

//获取屏幕宽度并计算比例
function fontSize(res){
clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
if (!clientWidth) return;
fontSize = clientWidth / 1920;
return res*fontSize;
}
    
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById("main"));
// 使用刚指定的配置项和数据显示图表。
//myChart.setOption(option);
</script>

在主标题中能应用,只是当窗口变化后不能自动刷新。

<script>
// 指定图表的配置项和数据
var option = {
backgroundColor: '<%=bg%>',//配置背景颜色,在前面指定的与页面一样
title: {
text: '<%=t_xm%>',//指定标题
top: '3%',//标题距容器顶部
left: 'center',
textStyle: {
color: '#fff',//主标题颜色
fontSize: fontSize(64), //其中数字为64px,但在大屏上太大,在小屏上太小,不好看。原直接写24,即为24px
},
subtext: '共有<%=rs9("ci")%>人次旅行,平均<%=FormatNumber(pjfen,2)%>公里,最长<%=rs9("hf")%>公里,最短<%=rs9("lf")%>公里。',//指定副标题
itemGap: 10,//主副标题纵向间隔,单位px,默认为10
subtextStyle:{
     
color:'#bbb',
fontSize:12
},
},

在副标题,也就是fontsize:12这里不能用了。如果用了fontSize(64)这样的,网页什么也不会出现了。

运行结果及报错内容

这是我尝试过的。加上mounted会出错,不出现东东。加window.addeventliseener那句,没有什么变化。

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option,true);
window.onresize = myChart.resize;//让窗口的宽度自适应,前面设计容器时的宽设成100%
    
//    mounted(){
    //this.init()
    //window.addEventListener("resize", ()=>{
    //this.init()
//})
//},
    
//window.addEventListener("resize", this.mychart.resize);
我想要达到的结果

想在不同窗口或屏幕大小让图表字体大小都合理显示。
谢谢!

  • 写回答

1条回答 默认 最新

  • 溪风沐雪 2022-04-12 14:29
    关注

    你试一下在窗口变化事件监听函数里加一段代码,可以先计算需要的字体大小,然后替换12
    myCahrt.setOption({
    subtextStyle:{fontSize:12}
    如有帮助,望采纳!

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 4月20日
  • 已采纳回答 4月12日
  • 创建了问题 4月12日

悬赏问题

  • ¥15 把VMware项目复制到另一台电脑
  • ¥15 onlyoffice编辑完后立即下载,下载的不是最新编辑的文档
  • ¥15 求caverdock使用教程
  • ¥15 Coze智能助手搭建过程中的问题请教
  • ¥15 12864只亮屏 不显示汉字
  • ¥20 三极管1000倍放大电路
  • ¥15 vscode报错如何解决
  • ¥15 前端vue CryptoJS Aes CBC加密后端java解密
  • ¥15 python随机森林对两个excel表格读取,shap报错
  • ¥15 基于STM32心率血氧监测(OLED显示)相关代码运行成功后烧录成功OLED显示屏不显示的原因是什么