echarts,在保留title的情况下,内容里面展示暂无数据

本文介绍如何在Echarts图表中,当数据为空时,如何在保留title的同时展示'暂无数据'的内容。通过设置Echart的配置项,可以在内容区域显示特定的提示信息。
摘要由CSDN通过智能技术生成

如图:正常展示位图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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值