项目描述:
请求接口有数据时,展示echarts图表(display:block
),
否则就展示默认提示无数据(图表:display:none
),
DOM元素设置高度400px,宽度100%;
// 其中父元素为 '#fatherGraph',当前元素为'#chartGraph',根据变量'elementShow'判断是否展示
<div id="fatherGraph" :class="elementShow ? 'displayBlock' : 'displayNone'">
<div ref="chartGraph" id="chartGraph"></div>
</div>
<style>
.displayBlock{ display: block;}
.displayNone{ display: none;}
</style>
问题描述:数据从有-无-有
来回切换
后,echart绘图后宽度却只有100px
(echart自带的)
网上查阅资料:
1、mychart.resize()
; // 本项目中不生效
2、v-if
; // 本项目不可使用v-if / v-else,否则会导致报错
解决方案:
获取父元素的宽度,通过element.style.width 设置元素的宽度;
公共方法提出来 放到src/utils/下的一个setAttr.js文件中,先引用,后调用;
1、setAtt.js文件中声明两个方法
/** 获取元素的 css样式 */
function getStyle(obj, attr) {
//原生js写法,兼容IE(currentStyle),第一个参数,element,第二个属性,css样式
return obj.currentStyle
? obj.currentStyle[attr]
: document.defaultView.getComputedStyle(obj, null)[attr];
}
/** 根据 父元素和当前元素 设置当前元素等CSS样式*/
function setChartAttrByFatherAndCurrentElement(fatherElement, currentElement) {
//获取父元素
let father = document.querySelector(fatherElement);
if (father) {
//获取父元素宽高
let chartWidth = getStyle(father, "width");
let chartHeight = getStyle(father, "height");
//获取图表元素
let myChart = document.querySelector(currentElement);
//将父元素宽高赋值给图表
myChart.style.width = chartWidth;
myChart.style.height = chartHeight;
}
}
export { setChartAttrByFatherAndCurrentElement };
2、在.vue文件中引入setAttr.js文件:
import {setChartAttrByFatherAndCurrentElement} from "@/utils/setAttr";
3、在返回数据时,绘图前调用
/** 传入父元素,和当前元素: 解决echart图宽度为100px问题*/
setChartAttrByFatherAndCurrentElement("#fatherGraph", "#chartGraph"); // 父元素 fatherGraph,当前元素chartGraph
正确展示: