echarts中markarea中文字现实的配置(见注释)

以下是关于“echarts中markarea中文字现实的配置”的完整攻略，包括markarea中文字的基本知识、配置markarea中文字的方法和两个示例等。

markarea中文字的基本知识

在 echarts 中，markarea 是一种用于标记区域的图形元素。markarea 可以用于标记数据的范围趋势等。在 markarea 中，可以添加文字来说明标记的含义。

配置 markarea 中文字

在 echarts 中，可以通过设置 markarea 中的 label 属性来配置 markarea 中的文字。label 属性是一个对象，包含了文字的各种属性，例如文字内容、样式、文字位置等。

以下是一个配置 markarea 中文字的示例：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
 series: [{
    type: 'line',
    data: [820, 932, 901, 934, 1290, 1330, 1320]
  }, {
    type: 'line',
    data: [320, 332, , 334, 390, 330, 320]
  }, {
    type: 'line',
 data: [220, 182, 191, 234, 290, 330, 310]
  }, {
    type: 'line',
    data: [150, 232, 201, 154,190, , 410]
  }, {
    type: 'markArea',
    data: [
      [{
        name: '周末',
        xAxis: 'Sat'
      }, {
        xAxis: 'Sun'
      }],
      [{
        name: '工作日',
        xAxis: 'Mon'
      }, {
        xAxis: 'Fri'
      }]
    ],
    label: {
      show: true,
      position: 'insideTop',
      formatter: function(params) {
        return params.name;
      },
      fontSize: 14,
      fontWeight: 'bold',
      color: '#fff',
      backgroundColor: '#000',
      padding: [5, 10],
      borderRadius: 5
    }
  }]
};

在上面的示例中，我们使用了 markArea 来标记周末和工作日的范围。在 markArea 中，我们设置了 label 属性来配置文字的式和位置。具体来说，我们了文字的内容为 params.name，即 markArea 中的 name 属性；文字的位置为 insideTop，即在 markArea 的上方居中显示；文字的样式包括字体大小、字体粗细、颜色、背景色、内边距和圆角半径等。

示例

以下是两个使用 markarea 文字的示例：

示例一：使用 markarea 标数据范围

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    type: 'line',
    data: [820, 932, 901, 934, 1290, 1330, 1320]
  }, {
    type: 'line',
    data: [320, 332, , 334, 390, 330, 320  }, {
    type: 'line',
    data: [220,182, 191, 234, 290, 330, 310]
  }, {
    type: 'line',
    data: [150, 232, 201, 154, 190, , 410]
  }, {
    type:markArea',
    data: [
      [{
        name: '周末',
        xAxis: 'Sat'
      }, {
        xAxis: 'Sun'
      }],
      [{
        name: '工作日',
        xAxis: 'Mon'
      }, {
        xAxis: 'Fri'
      }]
    ],
    label: {
      show: true,
      position: 'insideTop',
      formatter: function(params) {
        return params.name;
      },
      fontSize: 14,
      fontWeight: 'bold',
      color: '#fff',
      backgroundColor: '#000',
      padding: [5, 10],
      borderRadius: 5
    }
  }]
};

示例二：使用 markarea 标记趋势

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    type: 'line',
    data: [820, 932, 901 934, 1290, 1330, 1320]
  }, {
    type: 'line',
    data: [320, 332, 301, 334, 390, 330, 320]
  }, {
    type: 'line',
    data: [220, 182, 191, 234, , 330, 310]
  {
    type: 'line',
    data: [150, 232, 201, 154, 190, 330, 410]
  }, {
    type: 'markArea',
    data: [
      [{
        name: '上趋势',
        xAxis: 'Mon'
      }, {
        xAxis: 'Wed'
      }],
      [{
        name: '下降趋势',
        xAxis: 'Wed'
      }, {
        xAxis: 'Fri'
      }]
    ],
    label: {
      show: true,
      position: 'insideTop',
      formatter: function(params) {
        return params.name;
      },
      fontSize: 14,
      fontWeight: 'bold',
      color: '#fff',
      backgroundColor: '#000',
      padding: [5, 10],
      borderRadius: 5
    }
  }]
};

结论

在 echarts 中，通过设置 markarea 中的 label 属性来配置 markarea 中的文字。label 属性是一个对象，包含了文字的各种属性，例如文字内容、文字样式、文字位置等。使用示例可以帮助学习和理解 markarea 中文字的使用方法。