【echart】showLoading hideLoading 无数据时显示正在加载
时间:2020-06-10
本文章向大家介绍【echart】showLoading hideLoading 无数据时显示正在加载,主要包括【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>
原文地址:https://www.cnblogs.com/whblogs/p/13083721.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- laravel框架实现为 Blade 模板引擎添加新文件扩展名操作示例
- yii框架使用分页的方法分析
- Linux服务器间文件实时同步的实现
- TP3.2.3框架文件上传操作实例详解
- yii2.0框架场景的简单使用示例
- Laravel5.6框架使用CKEditor5相关配置详解
- 怎么在Linux中自定义bash命令提示符
- Hbase入门详解
- php使用curl模拟多线程实现批处理功能示例
- php实现的简单多进程服务器类完整示例
- Linux磁盘挂载、分区、扩容操作的实现办法
- PHP商品秒杀问题解决方案实例详解【mysql与redis】
- PHP设计模式之组合模式定义与应用示例
- php使用socket调用http和smtp协议实例小结
- Ubuntu删除多余内核的办法