echarts出现警告[echarts Can't get dom width or height]解决方法就是初始化后再填数据,放nextTick中
先上修改好的代码
drawPieAll() {
// myChart paint more times, it will warn
if (
this.myChart != null &&
this.myChart != "" &&
this.myChart != undefined
) {
this.myChart.dispose();
}
this.$nextTick(() => {
console.log("refs", this.$refs.pieAll);
// this.$refs.pieAll.style.width = "500px";
// this.$refs.pieAll.style.height = "450px";
this.myChart = echarts.init(document.getElementById("pieAll"));
var option = {
tooltip: {
//提示框组件。
trigger: "item",
//'item' 数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。
formatter: "{a} <br/>{b} : {c} ({d}%)",
//{a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)
},
series: [
{
name: "打卡统计",
label: {
formatter: "{b}: ({d}%)",
},
type: "pie", // 设置图表类型为饼图
radius: "55%", // 饼图的半径,外半径为可视区尺寸(容器高宽中较小一项)的 55% 长度。
data: [
// 数据数组,name 为数据项名称,value 为数据项值
{ value: this.getAmount("statement", "正常"), name: "正常" },
{ value: this.getAmount("statement", "缺卡"), name: "缺卡" },
{ value: this.getAmount("statement", "早退"), name: "早退" },
{ value: this.getAmount("statement", "迟到"), name: "迟到" },
{
value: this.getAmount("statement", "补打卡"),
name: "补打卡",
},
{
value: this.getAmount("statement", "常用设备异常"),
name: "常用设备异常",
},
],
},
],
};
// if (option && typeof option === "object") {
this.myChart.setOption(option);
// }
// console.log(
// "offset",
// this.myChart.offsetWidth,
// "-",
// this.myChart.offsetHeight
// );
});
},
之前还有个不能重复渲染的问题,判断下是否为空,不为空就dispose清空再做,最前面的1个if判断就是做这个的。
还拓展了下关于ref的知识
ref可以获得DOM元素,绑定就能拿到这个元素信息

想修改可以this.$refs.[elementName].style.width = '100px'
不过不知道为什么查不到这玩意的offsetWidth
人生到处知何似,应似飞鸿踏雪泥。

浙公网安备 33010602011771号