博客

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

  • Post category:other

以下是关于“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, 301, 334, 390, 330, 320]
  }, {
    type: 'line',
    data: [220, 182, 191, 234, 290, 330, 310]
  }, {
    type: 'line',
    data: [150, 232, 201, 154, 190, 330, 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, 330, 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, 290, 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中文字的使用方法。

Tags: