【echart】showLoading hideLoading 无数据时显示正在加载
1.要实现的功能当echart无数据时显示数据加载中!有数据显示echarts图形
2.实现步骤(showLoading可根据要求设置样式)
myChart.showLoading({ text: '数据加载中...', color: '#c23531', textColor: '#ffffc2', maskColor: 'rgba(255, 255, 255, 0)', zlevel: 0 });
3.全部代码
<template> <div > <div id="top" style="width: 100%;height: 100%" ></div> </div> </template> <script> import {getFlow} from '@/api/dashboard'; export default { name: "TopRightChart", data(){ return{ dataFlow:{}, } }, mounted(){ this.drawLine() }, methods:{ drawLine() { // 基于准备好的dom,初始化echarts实例 var myChart = this.$echarts.init(document.getElementById('top')) myChart.showLoading({ text: '数据加载中...', color: '#c23531', textColor: '#ffffc2', maskColor: 'rgba(255, 255, 255, 0)', zlevel: 0 }); getFlow('60').then(res=>{ this.dataFlow=res.data.data myChart.hideLoading(); myChart.setOption({ xAxis: { data: this.dataFlow.xdata }, series: [{ // 根据名字对应到相应的系列 data: this.dataFlow.deny }] }); }) var option={ xAxis: [ //部分样式省略 { data:[], } ], series: [ { data: [] //部分样式省略 } ] } myChart .setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); } } } </script> <style scoped> </style>