如图:正常展示位图1,效果为图2


echart设置:
echart.setOption({
title: {
text: "推荐来源分布",
left: "center",
itemGap: 110,
subtext:'暂无数据...',
subtextStyle: {
fontSize: 18,
color: '#666',
fontWeight: 'normal',
align:'center',
baseline: 'middle',
},
},
})
title里面详细的数据
以下内容转载自文章:https://blog.csdn.net/yuhan_0590/article/details/93488362
title : {
// 是否显示
show: true,
// 主标题文本,'\n'指定换行
text: 'iphone销量',
// 主标题文本超链接
link: 'http://www.baidu.com',
// 指定窗口打开主标题超链接,支持'self' | 'blank',不指定等同为'blank'(新窗口)
target: 'self',
// 副标题文本,'\n'指定换行
subtext: '纯属虚构',
// 副标题文本超链接
sublink: 'http://www.baidu.com',
// 指定窗口打开副标题超链接,支持'self' | 'blank',不指定等同为'blank'(新窗口)
subtarget: 'self',
// 水平安放位置,默认为左侧,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)
x: 'center',
// 垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)
y: 'top',
// 水平对齐方式,默认根据x设置自动调整,可选为: left' | 'right' | 'center
textAlign: 'center',
// 标题背景颜色,默认透明
backgroundColor: 'rgba(0,0,0,0.1)',
// 标题边框颜色
borderColor: '#66FF00',
// 标题边框线宽,单位px,默认为0(无边框)
borderWidth: 1,
// 标题内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距,同css,见下图
padding: [20,40,20,40],
// 主副标题纵向间隔,单位px,默认为10
itemGap: 20,
// 主标题文本样式
textStyle: {
// 颜色
color: '#0066FF',
// 水平对齐方式,可选为:'left' | 'right' | 'center'
align: 'left',
// 垂直对齐方式,可选为:'top' | 'bottom' | 'middle'
baseline: 'bottom',
// 字体系列
fontFamily: 'Arial, 宋体, sans-serif',
// 字号 ,单位px
fontSize: 20,
// 样式,可选为:'normal' | 'italic' | 'oblique'
fontStyle: 'italic',
// 粗细,可选为:'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
fontWeight: 'normal'
},
// 副标题文本样式
subtextStyle: {
// 颜色
color: '#FF7F50',
// 水平对齐方式,可选为:'left' | 'right' | 'center'
align: 'left',
// 垂直对齐方式,可选为:'top' | 'bottom' | 'middle'
baseline: 'bottom',
// 字体系列
fontFamily: 'Arial, 宋体, sans-serif',
// 字号 ,单位px
fontSize: 15,
// 样式,可选为:'normal' | 'italic' | 'oblique'
fontStyle: 'italic',
// 粗细,可选为:'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
fontWeight: 'normal'
}
},
// 工具提示
tooltip : {
// 显示策略,可选为:true(显示) | false(隐藏)
show: true,
// tooltip主体内容显示策略,只需tooltip触发事件或显示axisPointer而不需要显示内容时可配置该项为false
showContent: true,
// 触发类型,默认数据触发,见下图,可选为:'item' | 'axis'
trigger: 'item',
// 位置指定,传入{Array},如[x, y], 固定位置[x, y];传入{Function},如function([x, y]) {return [newX,newY]},默认显示坐标为输入参数,用户指定的新坐标为输出返回。
// position: getTooltipPosi

本文介绍如何在Echarts图表中,当数据为空时,如何在保留title的同时展示'暂无数据'的内容。通过设置Echart的配置项,可以在内容区域显示特定的提示信息。
最低0.47元/天 解锁文章

被折叠的 条评论
为什么被折叠?



