ECharts主標題文字設(shè)置

2020-08-11 11:02 更新

title.textStyle   |  *

title.textStyle.color   |   Color

[ default: '#333' ]

主標題文字的顏色。

title.textStyle.fontStyle   |  string

[ default: 'normal' ]

主標題文字字體的風格

可選：

  • 'normal'
  • 'italic'
  • 'oblique'

title.textStyle.fontWeight   |   string

[ default: normal ]

主標題文字字體的粗細

可選：

  • 'normal'
  • 'bold'
  • 'bolder'
  • 'lighter'
  • 100 | 200 | 300 | 400...

title.textStyle.fontFamily    |   string

[ default: 'sans-serif' ]

主標題文字的字體系列

還可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...

title.textStyle.fontSize   |   number

[ default: 18 ]

主標題文字的字體大小

title.textStyle.align   |   string

文字水平對齊方式，默認自動。

可選：

  • 'left'
  • 'center'
  • 'right'

rich 中如果沒有設(shè)置 align，則會取父層級的 align。例如：

{
    align: right,
    rich: {
        a: {
            // 沒有設(shè)置 `align`，則 `align` 為 right
        }
    }
}

title.textStyle.verticalAlign   |   string

文字垂直對齊方式，默認自動。

可選：

  • 'top'
  • 'middle'
  • 'bottom'

rich 中如果沒有設(shè)置 verticalAlign，則會取父層級的 verticalAlign。例如：

{
    verticalAlign: bottom,
    rich: {
        a: {
            // 沒有設(shè)置 `verticalAlign`，則 `verticalAlign` 為 bottom
        }
    }
}

title.textStyle.lineHeight    |   number

行高。

rich 中如果沒有設(shè)置 lineHeight，則會取父層級的 lineHeight。例如：

{
    lineHeight: 56,
    rich: {
        a: {
            // 沒有設(shè)置 `lineHeight`，則 `lineHeight` 為 56
        }
    }
}

title.textStyle.width   |   number, string

文字塊的寬度。一般不用指定，不指定則自動是文字的寬度。在想做表格項或者使用圖片（參見 backgroundColor）時，可能會使用它。

注意，文字塊的 width 和 height 指定的是內(nèi)容高寬，不包含 padding。

width 也可以是百分比字符串，如 '100%'。表示的是所在文本塊的 contentWidth（即不包含文本塊的 padding）的百分之多少。之所以以 contentWidth 做基數(shù)，因為每個文本片段只能基于 content box 布局。如果以 outerWidth 做基數(shù)，則百分比的計算在實用中不具有意義，可能會超出。

注意，如果不定義 rich 屬性，則不能指定 width 和 height。

title.textStyle.height   |   number, string

文字塊的高度。一般不用指定，不指定則自動是文字的高度。在使用圖片（參見 backgroundColor）時，可能會使用它。

注意，文字塊的 width 和 height 指定的是內(nèi)容高寬，不包含 padding。

注意，如果不定義 rich 屬性，則不能指定 width 和 height。

title.textStyle.textBorderColor   |   string

[ default: 'transparent' ]

文字本身的描邊顏色。

title.textStyle.textBorderWidth   |   number

[ default: 0 ]

文字本身的描邊寬度。

title.textStyle.textShadowColor   |   string

[ default: 'transparent' ]

文字本身的陰影顏色。

title.textStyle.textShadowBlur   |   number

[ default: 0 ]

文字本身的陰影長度。

title.textStyle.textShadowOffsetX   |   number

[ default: 0 ]

文字本身的陰影 X 偏移。

title.textStyle.textShadowOffsetY    |   number

[ default: 0 ]

文字本身的陰影 Y 偏移。

以下是一個簡單示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>echarts標題</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #chart_title {
      width: 100vw;
      height: 100vh;
    }
  </style>
</head>
<body>
  <div id="chart_title"></div>
  <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" rel="external nofollow" ></script>
  <script>
    var myChart = echarts.init(document.getElementById('chart_title'));
    option = {
      title: {
        text: 'W3Cschool',//主標題
        link: 'http://www.o2fo.com/',//主標題超鏈接
        subtext: "Echarts \n 主標題和副標題", //副標題 \n 用于換行
        sublink: 'http://www.baidu.com',//副標題超鏈接
        subtarget: 'blank',//副標題超鏈接打開方式
        itemGap: 5,//主副標題間距
        left: 'center',//主副標題的水平位置
        top: 'center',//主副標題的垂直位置
        padding: 20,//標題內(nèi)邊距,
        backgroundColor: '#ccc',//背景顏色；
        borderColor: '#000',//邊框的顏色
        borderWidth: 5,//標簽線框
        borderRadius: 10,//邊框切圓角
        shadowBlur: 10,//圖形陰影模糊大小.
        shadowColor: 'aqua',//陰影顏色
        shadowOffsetX: '60',//陰影水平方向上的偏移距離
        shadowOffsetY: '70',//陰影垂直方向上的偏移距離
        // textAlign: 'auto',//整體（包括 text 和 subtext）的水平對齊
        // textVerticalAlign: 'auto',//整體（包括 text 和 subtext）的垂直對齊。
        textStyle: {//主標題的屬性
          color: '#C28D21',//顏色
          fontSize: 40,//大小
          fontStyle: 'oblique',//斜體
          fontWeight: '700',//粗細
          fontFamily: 'monospace',//字體
          // textBorderColor: "#000",//描邊
          // textBorderWidth: '2',//描邊的寬度
          textShadowColor: 'red',//陰影顏色
          textShadowBlur: '10',//陰影的寬度
          textShadowOffsetX: '-0',//陰影向X偏移
          textShadowOffsetY: '-70',//陰影向Y偏移
        },
        subtextStyle: {//副標題的屬性
          color: '#25664A',
          // 同主標題
        },
      },
    }
    myChart.setOption(option, true);
  </script>
</body>
</html>


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號