主要是根据容器当前宽度,动态取值,通过该值设置echrts图表相关尺寸宽度
<div class="com-container">
<div class="com-chart" ref="seller_ref"></div>
</div>
当浏览器窗口发生变化以及Vue的mounted生命周期函数中调用
// 当浏览器的大小发生变化的时候, 会调用的方法, 来完成屏幕的适配
screenAdapter() {
// offsetWidth获取窗口宽度计算文字大小
const titleFontSize = (this.$refs.seller_ref.offsetWidth / 100) * 3.6;
// 自适应分辨率配置项
const adapterOption = {
title: {
textStyle: {
fontSize: titleFontSize, //标题字体大小
},
},
//背景悬浮框
tooltip: {
axisPointer: {
lineStyle: {
width: titleFontSize,
},
},
},
series: [
{
barWidth: titleFontSize, //控制柱状条粗细(宽)
itemStyle: {
barBorderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0], //左上,右上,右下,左下,上右下左控制柱状条的圆角
},
},
],
};
this.chartInstance.setOption(adapterOption);
this.chartInstance.resize();
},
版权声明:《 echarts图表大屏适配方案(基础版本,待完善) 》为胡光喆原创文章,转载请注明出处!
最后编辑:2023-5-5 11:05:54