理论教育 大数据可视化项目实战-标题设置

大数据可视化项目实战-标题设置

时间:2023-11-26 理论教育 版权反馈
【摘要】:在ECharts 2.x中,单个ECharts实例最多只能拥有一个标题组件。但在ECharts 3中可以存在任意多个标题组件,这需要对标题进行排版。title.target:string类型[default:'blank'],指定窗口打开主标题超链接。title.textStyle:Object类型,该配置项主要用来设置标题字体的样式,以键值对的格式进行配置。在绘制ECharts图表时,经常需要修改的标题样式有color、fontSize、width、height等。富文本标题也有相同的设置,其设置在subtextStyle中。而right和bottom默认是自适应的。

大数据可视化项目实战-标题设置

标题组件包含主标题和副标题

在ECharts 2.x中,单个ECharts实例最多只能拥有一个标题组件。但在ECharts 3中可以存在任意多个标题组件,这需要对标题进行排版。

以下是设置标题时的一些常用属性:

title.show:boolean类型[default:true],是否显示标题组件。

title.text:string类型[default:"],主标题文本,支持使用\n换行。

title.link:string类型[default:"],主标题文本超链接。

title.target:string类型[default:'blank'],指定窗口打开主标题超链接。可选值:‘self’,当前窗口打开,‘blank’,新窗口打开。(www.daowen.com)

title.textStyle:Object类型,该配置项主要用来设置标题字体的样式,以键值对的格式进行配置。在绘制ECharts图表时,经常需要修改的标题样式有color、fontSize、width、height等。富文本标题也有相同的设置,其设置在subtextStyle中。

title.subtext:string类型[default:"],副标题文本,支持使用\n换行。

title.sublink:string类型[default:"],副标题文本超链接,通过配置富文本超链接的信息,可实现单击富文本标题时进行页面跳转。

title.subtarget:string类型[default:'blank'],指定窗口打开副标题超链接。可选值:‘self’当前窗口打开,‘blank’新窗口打开。

title.textAlign:string类型[default:'auto'],整体(包括text和subtext)的水平对齐。可选值:‘auto’‘left’‘right’‘center’。

title.left、title.top、title.right、title.bottom:string、number类型[default:'auto'],grid组件离容器左侧、上侧、右侧、下侧的距离。其值可以是像15这样的具体像素值,也可以是像‘15%’这样相对于容器宽高的百分比。其中,left的值可以是‘left’‘center’‘right’,top的值可以是‘top’‘middle’‘bottom’。而right和bottom默认是自适应的。

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

我要反馈