echarts 暂无数据的完美解决办法

前景

很简单的一个思想 我希望没有数据的时候 不显示图表，并且用empty来替换 但是直接使用v-if 会出错 因为调用的时候 拿不到dom了 v-if直接把dom干掉了 怎么办呢

直接上步骤

1、第一步，我们应该在每次点击按钮的时候，发送数据的请求，然后根据数据的变化来决定让谁出现，请求结果出来后，如果有数据就调用initchart方法去初始化echarts图表，完成表格的渲染。代码如下

btn() {this.$nextTick( async () => {await this.$refs.refPower.getPowerData()this.$refs.refPower.initChart()})
}

btn 是控制图形展示的按钮，点击的时候 使用this.$nextTick在dom更新的时候调用请求数据的接口，并且我们等待数据请求完成，在调用初始化echarts表格的函数，两个代码分别如下

async getPowerData(params) {
// 请求接口 有参数就传参数 没参数就调用近七天的数据const res = await powerReport(params? params: {deviceCode: this.deviceCode,createStartTime: moment().subtract(7, "days").startOf().unix(),createEndTime: moment().endOf().unix(),});this.powerData = res.data  //需要监听的数据if (res.data.length > 0 ) {this.xData = []  //清空 因为用的push 不清空数据会越来越多 每次请求都保证是空的this.yData = []this.showPower = true;   //控制图表的显示和隐藏res.data.forEach((item) => {this.xData.push(item.createTimeName);this.yData.push(item.rssi);});} else{this.showPower = false;}},

initChart() {let chartDom = document.getElementById("idchart");if (this.showPower) {  // 只有有数据的时候 这里才初始化 没数据就不需要了 所以加个判断 不然会报错 拿不到dom为nullecharts图表相关内容}
}

下面是监听器的东西

 watch: {powerData: {handler: function () {let chartDom = document.getElementById("idchart");if(chartDom !== null) {this.destroyChart()  //每次必须清理上一个图 不然不更新数据 这里是我自己定义的}this.initChart();},},},

销毁图表的方法

 destroyChart() {echarts.init(this.$refs.chartDom).dispose();},

经过这些步骤，就可以完美实现 echarts有数据展示数据 没数据就显示empty

这里是控制显示和隐藏的代码

有什么问题可以一起交流，目前这个方法没有发现什么问题 如果发现问题 我会及时更新！

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！