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

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 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题