This is the third day of my participation in the August More text Challenge. For details, see:August is more challenging

Title Configures the title

Id: indicates the ID of a component. It is not specified by default. Specifying can be used to refer to a component in an Option or API.

Show: Whether to display the title

Text: Indicates the title content

Link: hyperlink to the title

TextStyle: Title style

  • #ff0000, rgba(255, 0, 0, 0.5)
  • FontStyle: Title tilt Settings, support: Normal, ITALic, Oblique
  • FontWeight: Bold title Settings, supported: Normal, Bold, Bolder, and numbers
  • FontFamily: Set of heading fonts
  • FontSize: the fontSize of the title
  • The lineHeight allows you to control the spacing and center of your heading
  • Width: the width of the
  • Height: height
  • TextBorderColor: Stroke color
  • TextBorderWidth: Stroke width
  • TextBorderType: Stroke type support: solid, improvement, and growth
  • TextBorderDashOffset: The offset of stroke
  • TextShadowColor: Title shadow color,
  • TextShadowBlur: Length of the title shadow
  • TextShadowOffsetX: The X-axis offset of the title shadow
  • TextShadowOffsetY: The Y-axis offset of the title shadow
  • Overflow: Overflow processing, used with width, supports: ‘truncate’ truncation, and displays ellipsis configured text at the end, defaults to ‘None ‘, ‘break’ word newline ‘breakAll’ when the width exceeds the newline
  • Ellipsis: Used with overflow truncate to customize the overflow text displayed
  • Rich: The text in the title is configured with different styles, such as: 
    rich: {
     style1: {
         color: 'blue'.fontSize: 16,},style2: {
         color: 'green'.fontSize: 16,}}Copy the code

Subtext: subtitle sublink: hyperlink to subtitle subtextStyle: Subtitle style

  • #ff0000, rgba(255, 0, 0, 0.5)
  • FontStyle: Title tilt Settings, support: Normal, ITALic, Oblique
  • FontWeight: Bold title Settings, supported: Normal, Bold, Bolder, and numbers
  • FontFamily: Set of heading fonts
  • FontSize: the fontSize of the title
  • Align: horizontal text alignment
  • VerticalAlign: Vertical text alignment
  • The lineHeight allows you to control the spacing and center of your heading
  • Width: the width of the
  • Height: height
  • TextBorderColor: Stroke color
  • TextBorderWidth: Stroke width
  • TextBorderType: Stroke type support: solid, improvement, and growth
  • TextBorderDashOffset: The offset of stroke
  • TextShadowColor: Title shadow color,
  • TextShadowBlur: Length of the title shadow
  • TextShadowOffsetX: The X-axis offset of the title shadow
  • TextShadowOffsetY: The Y-axis offset of the title shadow
  • Overflow: Overflow processing, used with width, supports: ‘truncate’ truncation, and displays ellipsis configured text at the end, defaults to ‘None ‘, ‘break’ word newline ‘breakAll’ when the width exceeds the newline
  • Ellipsis: Used with overflow truncate to customize the overflow text displayed
  • Rich: The text in the title is configured with different styles, such as: 
    rich: {
     style1: {
         color: 'blue'.fontSize: 12,},style2: {
         color: 'green'.fontSize: 12,}}Copy the code

Complete code:

html


<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Echarts instance</title>
    <script src="./echarts.js"></script>
</head>

<body>
    <div id="container" style="width: 500px; height:500px;">

    </div>
    <script src="./chart.js"></script>
</body>

</html>

Copy the code

var chart = echarts.init(document.getElementById("container"));

chart.setOption({
    title: {
        text: '{style1 | this text USES the style style1}, {style2 | this text USES the style style2}'.textStyle: {
            color: 'rgba(255, 0, 0, 1)'.fontStyle: 'oblique'.// Normal, italic, oblique,
            textBorderColor: 'black'.width: 250.fontSize: 16.// textBorderWidth: 2,
            // textBorderType: 'dashed',
            // textBorderDashOffset: 30,
            // textShadowColor: 'red',
            // textShadowBlur: 2,
            overflow: 'truncate'.// 'truncate' truncates and displays the ellipsis configuration text at the end, default is... 'break' wrap 'breakAll',
            ellipsis: The '-'.formatter: [
                '{style1 | this text USES the style style1}'.'{style2 | this text USES the style style2} this paragraph with the default style with style x} {x | it'
            ].join('\n'),
            rich: {
                style1: {
                    color: 'blue'.fontSize: 16,},style2: {
                    color: 'green'.fontSize: 16,}}},subtext: 'Subtitle'.sublink: 'http://wwww.baidu.com'.subtarget: '_self'.subtextStyle: {
            color: 'rgba (255, 0, 0, 0.5)'.fontStyle: 'oblique'.// Normal, italic, oblique,
            textBorderColor: 'black'.width: 250.fontSize: 12.align: 'right'.verticalAlign: 'top'.// textBorderWidth: 2,
            // textBorderType: 'dashed',
            // textBorderDashOffset: 30,
            // textShadowColor: 'red',
            // textShadowBlur: 2,
            overflow: 'truncate'.// 'truncate' truncates and displays the ellipsis configuration text at the end, default is... 'break' wrap 'breakAll',
            ellipsis: The '-'.formatter: [
                '{style1 | this text USES the style style1}'.'{style2 | this text USES the style style2} this paragraph with the default style with style x} {x | it'
            ].join('\n'),
            rich: {
                style1: {
                    color: 'blue',},style2: {
                    color: 'green'}}}},xAxis: {
        type: 'category'.data: ['Monday'.'Tuesday'.'Wednesday']},yAxis: {
        type: 'value'
    },
    series: [{
        data: [3.4.5].type: 'line'}]})Copy the code