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对象
});
},