问题遇到的现象和发生背景
我用echarts做条形成绩统计,图表的主标题字体大小自适应,改变窗口不能自动刷新变化。图能,字不能。
问题相关代码,请勿粘贴截图
用网上的办法,这个代码通过了。
//获取屏幕宽度并计算比例
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);
我想要达到的结果
想在不同窗口或屏幕大小让图表字体大小都合理显示。
谢谢!