<div class="echart-wrap" :ref="wrapId" :id="wrapId" >
<div :ref="chartsId" :id="chartsId" ></div>
</div>
props: {
wrapId: {
// 需传递外层echarts外层id字符串,已便于动态获取外层宽高
type: String,
default: 'wrapId',
},
chartsId: {
// echarts本身id 以便于dom操作,避免冲突
type: String,
default: 'chartsId',
},
.echart-wrap{
width: 100%;
height: 100%;
position: relative;
}
this.myChart.setOption(this.options, true);
window.addEventListener('resize', () => {
this.echartsResize(this.myChart, this.chartsId, this.wrapId);
});
/**
* echarts resize
*
* @export
* @param {*} myChart echarts 初始化后得到的值
* @param {String} domId echarts的dom id
* @param {String} domWrapId echarts 外层div的 dom id,用来获取宽高
*/
echartsResize(myChart, domId, domWrapId) {
// 重置容器高宽
this.echartsSetWH(domId, domWrapId);
if (myChart) {
myChart.resize();
}
},
/**
* echarts 设置宽高
*
* @export
* @param {String} domId echarts的dom id
* @param {String} domWrapId echarts 外层div的 dom id,用来获取宽高
*/
echartsSetWH(domId, domWrapId) {
const worldMapContainer = document.getElementById(domId);
// // 用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
if (worldMapContainer) {
worldMapContainer.style.width = `${document.getElementById(domWrapId).offsetWidth - 5}px`;
worldMapContainer.style.height = `${document.getElementById(domWrapId).offsetHeight - 5}px`;
}
},
Echarts图表自适应宽高大小