admin管理员组文章数量:1529460
1、在最近的pc项目中,页面中用到了多个echerts图表,需要自适应浏览器窗口。
原因:因为图表不会根据浏览器的窗口大小而进行适应性的调整大小。
解决方案:在setOption 后引入下边window.addventListener...即可。
drawLine(month, value, index) {
var a = document.getElementsByClassName("myChart");
var e = document.body.clientWidth;
let myChart2 = this.$echarts.init(a[index]);
myChart2.setOption({
// xxxxxxxxx
});
window.addEventListener("resize",function(){
console.log("222222222")
myChart2.resize(); //myChart2指自己定义的echartsDom对象
});
},
2、echerts 字体自适应浏览器。
首先获取到body的大小 :document.body.clientWidth;
在设置x轴y轴样式时,使用fontSize:e/1920*11 乘以对应的字体像素即可,例如:在我的1920*1080的设计图,x轴文字为8px;乘以8即可。
drawLine(month, value, index) {
var a = document.getElementsByClassName("myChart");
var e = document.body.clientWidth;
let myChart2 = this.$echarts.init(a[index]);
myChart2.setOption({
grid: {
left: "1%",
right: "15%",
bottom: "3%",
containLabel: true
},
xAxis: {
type: "category",
data: month[0],
name: "日期",
axisLine: {
show: true,
lineStyle: {
color: "#fff"
}
},
nameTextStyle: {
color: "#fff",
fontSize: e/1920*11
},
splitNumber: 4,
axisTick: {
//x轴刻度线
show: false,
color: "#58f3e1"
},
axisLabel: {
show: true,
textStyle: {
color: "#fff",
fontSize: e/1920*11
}
}
},
yAxis: {
type: "value",
show: true,
max: 2000,
min: 0,
splitNumber: 5,
nameTextStyle: {
color: "#fff",
fontSize: e/1920*11,
padding: [-5, 30, 5, 0]
},
axisLabel: {
show: true,
interval: "auto",
formatter: "{value}%",
margin: 2
},
axisLine: {
show: true,
lineStyle: {
color: "#fff"
}
},
axisTick: {
//y轴刻度线
show: false
},
splitLine: {
show: true,
lineStyle: {
color: "#fff",
opacity: 0.2
}
},
axisLabel: {
show: true,
textStyle: {
color: "#fff",
fontSize: e/1920*11
}
}
},
series: [
{
data: value[0],
type: "line",
itemStyle: {
normal: {
color: "#58f3e1",
width: 6,
height: 6,
lineStyle: {
color: {
type: "linear",
color: "#E47B35"
}
},
label: {
show: true,
position: "top",
color: "#fff",
fontSize: e/1920*11
// formatter:'{c}%'
}
}
}
}
]
});
window.addEventListener("resize",function(){
console.log("222222222")
myChart2.resize(); //myChart指自己定义的echartsDom对象
});
},
版权声明:本文标题:Echarts (第二篇图表自适应浏览器窗口缩放字体自适应浏览器) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1726624773a1078645.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论