echarts 无数据时提示文字

需求：要求图表没有数据时，文字提示“暂无数据”

思路：使用echarts的title做提示，通过有无数据，设置title的show属性为true / false

echarts 设置 title的API：

https://echarts.apache.org/zh/option.html#title

效果图：

①没数据时显示文字“暂无数据”

②有数据时：

代码：

HTML:
<div id="main" style="width: 100%;height: 100%;"></div>JS:// 这里判断后端有无值，设置是否显示title
let showed = this.list.data.length ? false : truevar echarts = require('echarts')
let myCharts = echarts.init(document.getElementById('main'))
let bingOption = {title: {show: showed, // 是否显示titletext: '暂无数据',left: 'center',top: 'center',textStyle: {color: 'pink',fontSize: 16,fontWeight: 400}},tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c} ({d}%)'},legend: {orient: 'vertical',left: 'right',data: this.list.example},series: [{name: '访问来源',type: 'pie',radius: '50%',center: ['50%', '50%'],data: this.list.data,emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]
}
myCharts.setOption(bingOption, true)

echarts 无数据时提示文字相关推荐

html输入时提示文字消失,html中input文字框，初始里边有文字提示。当点选时，文字消失，怎么改？...
html中input文字框,初始里边有文字提示.当点选时,文字消失,怎么改?以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧 ...
关于echarts无数据时显示问题
我是做java开发的,最近公司让我做前端统计图表柱形图之类的,我用的就是echarts,版本是2.2.7,接下来,就说说我遇到的问题,因为我是小白,所以记录一下. ajax请求返回数据为空时显示暂无数 ...
echarts环形图高亮提示文字位置位于中间_CAD多行文字的格式设置
不同版本的界面不太一样,低版本或用经典界面弹出的是工具栏,高版本的RIBBON界面是命令面板,不同版本功能也略有差异,版本如果过低,功能非常少.这里以2014版为例来给大家介绍,下图是2014版的文字 ...
html输入时提示文字消失,inpuhtml文本框代码t 初始里边有文字提示当点击时文字消失怎么设置...
文本域() 本例演示如何在HTML页面创建文本域.用户可以在文本域写入文本. 密码域本例演示如何创建HTML的密码域. 复选框本例演示如何在HTML页中创建文本框.用户可以选中或取消选取复选框. ...
echarts无数据时显示无数据_钣金无腻子数据还原
钣金修复就是把将汽车金属外壳变形部分进行修复,比如车体外壳被撞了个坑,就可以通过钣金使之恢复原样,然后再通过喷涂专门设计油漆,使变形的汽车金属表面恢复到与其他完好的地方一样,光亮如初. 传统的汽车修复 ...
axure文本框单击提示文字消失_Axure基础原件使用
本内容从网上搜索,仅供参考学习 1. 添加元件到工作区在左侧元件中选择要使用的元件,按住鼠标左键不放,拖到画布适合的位置上松开. 2. 添加元件名称在检视面板的元件名称文本框中输入元件自定义名称. ...
友盟分享微信提示文字弹出两次
前言使用友盟分享遇到一个问题,这里记录一下.分享到微信以及微信朋友圈时,分享成功后或者客户端不存在时提示文字提示了两次,而且都是微信的,提示文字也不一样.分享到QQ时客户端没有安装又什么提示都没有. ...
【WPF】设置TextBox内容为空时的提示文字
原文:[WPF]设置TextBox内容为空时的提示文字 <TextBox Width="150" Margin="5"><TextBox.Re ...
echarts使用总结（使用echarts画工字型标记线；无数据时设置纵坐标刻度0-1；tooltip数据展示；工具栏 toolBox 图标配置）
1. 使用echarts画标记线(工字型) 1.1 实现效果 1.2 使用属性详细参数可查看echarts官网,markline属性 https://echarts.apache.org/zh/op ...

echarts 无数据时提示文字

echarts 无数据时提示文字相关推荐

最新文章

热门文章