01-Echarts简化系列之：标题 title

最新推荐文章于 2024-08-09 09:49:16 发布

撒娇的骑士

最新推荐文章于 2024-08-09 09:49:16 发布

阅读量582

点赞数 2

分类专栏： Echarts 开发实战记录文章标签： echarts 前端

本文链接：https://blog.csdn.net/youyudehan/article/details/134039142

版权

Echarts 开发实战记录专栏收录该内容

25 篇文章 11 订阅

订阅专栏

前言：Echarts 在我的可视化数据开发印象中，它的配置和实例是真的很强大，配置文档很详情！很详细！但因为很详细，所以很繁琐，这里简单记录一下文档来方便平时开发。

一、标题的 option 属性配置

 // title 标题
   const option = {
        title: {
            id: '1', // 指定组件
            show: true, //  是否显示标题
            
            text: '主\n标题', // 主标题文本内容，支持 \n 换行
            link: '地址链接', // 指定主标题文本点击跳转的地址
            target: 'self', // 指定打开主标题链接方式 self本窗口 或者 blank 新建窗口
            // 主标题样式
            textStyle: {
                color: 'red', // 颜色
                fontStyle: 'normal', // 字体风格
                fontWeight: 500, //或者 'noraml', //  字体粗细
                fontSize: 16, // 字体大小
                lineHeight: 20, // 行高
                
                textBorderWidth: 20, // 文本描边宽度
                textBorderColor: 'red', //描边颜色
                textBorderType: 'solid', //描边类型
                textBorderDashOffset: 20, // 虚线偏移量

                textShadowBlur: 20, // 文字阴影长度
                textShadowOffsetX: 20, //阴影相当于 X 轴偏移量
                textShadowOffsetY: 20, //阴影相当于 Y 轴偏移量
                overflow: 'truncate', //文字超出宽度如何处理  break 换行
                ellipsis: '...' // 配合 overflow 截断时，展示 ···
            },
            
            subtext: '副\n标题', // 副标题内容
            subtarget: '地址链接', //指定副标题文本点击跳转的地址
            // 副标题样式
            subtextStyle: {
                color: 'red', // 颜色
                fontStyle: 'normal' // 字体风格
                //   ··· 请直接参考主标题样式
            },
            
            triggerEvent:true, // 是否触发事件
            padding : 5, //标题内边距
            itemGap:10, // 标题直接间距 不能为负
            zlevel:1,    // 所有图形的 层级度 zlevel 值，高图层和低图层区别
            z:2,      // 组件的所有图形的 z 值 ，优先级低于zlevel
            left: 'auto', // 或者 200 标题组件在容器中的定位
            top:'auto', // 或者 200 标题组件在容器中的定位
            right:'auto', // 或者 200 标题组件在容器中的定位
            bottom :'auto', // 或者 200 标题组件在容器中的定位
            backgroundColor :'red', // 整个标题的背景颜色
            borderWidth:20, // 标题边框线宽
            borderColor :'red', // 标题的边框颜色
            borderRadius :10,   // 或者[5, 5, 0, 0] 圆角半径
            shadowBlur: 10, //图形阴影模糊程度
            shadowColor: 'red', //阴影颜色
            shadowOffsetX:200, //阴影水平方向上的偏移
            shadowOffsetY:200, //阴影竖直方向上的偏移
        }
    };