Echarts学习计之组件---标题(title)

Echarts学习计之组件—标题(title)

下面是-- title文本– 的基本配置项

配置项 注释
show:true 默认值true,可选为:true(显示) / false(隐藏)
text: ‘主标题’ 主标题文本,’\n’指定换行
link:’ ’ 主标题文本超链接,默认值true
target: null 指定窗口打开主标题超链接,支持’self’ /‘blank’,不指定等同为’blank’(新窗口)
subtext: ‘副标题’ 副标题文本,’\n’指定换行
sublink: ’ ’ 副标题文本超链接
subtarget: null 指定窗口打开副标题超链接,支持’self’ / ‘blank’,不指定等同为’blank’(新窗口)

下面是 –title样式– 的基本配置项

配置项 注释
textAlign 整体(包括 text 和 subtext)的水平对齐。可选值:‘auto’、‘left’、‘right’、‘center’。
textVerticalAlign 整体(包括 text 和 subtext)的垂直对齐。可选值:‘auto’、‘top’、‘bottom’、‘middle’。
triggerEvent 是否触发事件。
padding = 5 标题内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。
itemGap = 10 主副标题之间的间距。
zlevel:0 所有图形的 zlevel 值。
z = 2 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。z相比zlevel优先级更低,而且不会创建新的 Canvas。
left = ‘auto’ title 组件离容器左侧的距离,left 的值可以是像 20 这样的具体像素值,可以是像 ‘20%’ 这样相对于容器高宽的百分比,也可以是 ‘left’, ‘center’, ‘right’。如果 left 的值为’left’, ‘center’, ‘right’,组件会根据相应的位置自动对齐
top = ‘auto’ title 组件离容器上侧的距离。top 的值可以是像 20 这样的具体像素值,可以是像 ‘20%’ 这样相对于容器高宽的百分比,也可以是 ‘top’, ‘middle’, ‘bottom’。如果 top 的值为’top’, ‘middle’, ‘bottom’,组件会根据相应的位置自动对齐。
right = ‘auto’ title 组件离容器右侧的距离。right 的值可以是像 20 这样的具体像素值,可以是像 ‘20%’ 这样相对于容器高宽的百分比。默认自适应。
backgroundColor = ‘transparent’ 标题背景色,默认透明。颜色可以使用 RGB 表示,比如 ‘rgb(128, 128, 128)’ ,如果想要加上 alpha 通道,可以使用 RGBA,比如 ‘rgba(128, 128, 128, 0.5)’,也可以使用十六进制格式,比如 ‘#ccc’
borderColor: ‘#ccc’ 标题的边框颜色。支持的颜色格式同 backgroundColor。
borderWidth:0 标题的边框线宽。
borderRadius: 0 圆角半径,单位px,支持传入数组分别指定 4 个圆角半径。 如:borderRadius: 5, // 统一设置四个角的圆角大小borderRadius: [5, 5, 0, 0] //(顺时针左上,右上,右下,左下)
shadowBlur 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。示例:{shadowColor: ‘rgba(0, 0, 0, 0.5)’,shadowBlur: 10}注意:此配置项生效的前提是,设置了 show: true 以及值不为 tranparent 的背景色 backgroundColor。
shadowColor 阴影颜色。支持的格式同color。注意:此配置项生效的前提是,设置了 show: true。
shadowOffsetX:0 阴影水平方向上的偏移距离。注意:此配置项生效的前提是,设置了 show: true
shadowOffsetY:0 阴影水平方向上的偏移距离。注意:此配置项生效的前提是,设置了 show: true。

注:
zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

下面展示一些 在html中的实体举例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title_示例</title>
    <script src="../static/js/echarts/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 1500px;height:1000px;border: 10px solid #79dd2a"
"></div>
<script type="text/javascript">
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    option = {
     
        title: {
     
            // 下面为基本配置项
            text: 'Title示例', //主标题文本,'\n'指定换行
            link: 'https://www.baidu.com/',//主标题文本超链接,默认值true
            target: 'self',      //当前页面打开链接
            subtext: '苏格拉底的石墩',//副标题文本,'\n'指定换行
            sublink: 'https://www.baidu.com/',//副标题文本超链接,默认值true
            subtarget: 'blank',  //新窗口页面打开链接
            left: 'center', //title 组件离容器左侧的距离。


            // 下面为样式配置
            textAlign: 'auto', //水平对齐-自动对齐----可选值:‘auto’、‘left’、‘right’、‘center’。
            textVerticalAlign: 'auto',   //垂直对齐-自动对齐----可选值:‘auto’、‘top’、‘bottom’、‘middle’。
            borderWidth: 5,  //边框线宽
            borderColor: '#9bff2e', // 边框颜色
            backgroundColor: '#2faa97',  // 背景色
            padding: 50,//标题内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距
            itemGap: 20,//主副标题纵向间隔,单位px,默认为10

            // 下面为字体样式配置
            textStyle: {
     //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                fontSize: 50, // 字体尺寸
                color: "#aa4539",
                fontStyle: 'italic', // 斜体
                fontWeight: 'lighter', // 减细  normal--正常
            },
            subtextStyle: {
     //副标题文本样式{"color": "#aaa"}
                fontSize: 20,
                color: "#6836aa",
                fontStyle: 'normal', // 正常
                fontWeight: 'bolder', // 加粗
            },
            zlevel: 0,//一级层叠控制。默认0,每一个不同的zlevel将产生一个独立的canvas,相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层,canvas对象增多会消耗更多的内存和性能,并不建议设置过多的zlevel,大部分情况可以通过二级层叠控制z实现层叠控制。
            z: 6,//二级层叠控制,默认6,同一个canvas(相同zlevel)上z越高约靠顶层。
       

        }

    };

    myChart.setOption(option)


</script>
</body>
</html>

你可能感兴趣的:(javascript,html5,大数据)