codecamp

ECharts单轴指示器文本标签

singleAxis.axisPointer.label   |   Object

ECharts 单轴指示器文本标签设置。

singleAxis.axisPointer.label.show   |   boolean

[ default: false ]

是否显示单轴指示器文本标签。如果 tooltip.axisPointer.type 设置为 'cross' 则默认显示标签,否则默认不显示。

singleAxis.axisPointer.label.precision   |   number, string

[ default: 'auto' ]

单轴指示器文本标签中数值的小数点精度。默认根据当前轴的值自动判断。也可以指定如 2 表示保留两位小数。

singleAxis.axisPointer.label.formatter   |   string, Function

[ default: null ]

单轴指示器文本标签文字的格式化器。

如果为 string,可以是例如:formatter: 'some text {value} some text,其中 {value} 会被自动替换为轴的值。

如果为 function,可以是例如:

参数:

{Object} params: 含有:

{Object} params.value: 轴当前值,如果 axis.type 为 'category' 时,其值为 axis.data 里的数值。如果 axis.type 为 'time',其值为时间戳。

{Array.<Object>} params.seriesData: 一个数组,是当前 axisPointer 最近的点的信息,每项内容为

{
    componentType: 'series',
    // 系列类型
    seriesType: string,
    // 系列在传入的 option.series 中的 index
    seriesIndex: number,
    // 系列名称
    seriesName: string,
    // 数据名,类目名
    name: string,
    // 数据在传入的 data 数组中的 index
    dataIndex: number,
    // 传入的原始数据项
    data: Object,
    // 传入的数据值
    value: number|Array,
    // 数据图形的颜色
    color: string,

}

每项内容还包括轴的信息:

{
    axisDim: 'x', // 'x', 'y', 'angle', 'radius', 'single'
    axisId: 'xxx',
    axisName: 'xxx',
    axisIndex: 3,
    axisValue: 121, // 当前 axisPointer 对应的 value。
    axisValueLabel: '文本'
}

返回值:

显示的 string。

例如:

formatter: function (params) {
    // 假设此轴的 type 为 'time'。
    return 'some text' + echarts.format.formatTime(params.value);
}

singleAxis.axisPointer.label.margin   |   boolean

[ default: 3 ]

label 距离轴的距离。

singleAxis.axisPointer.label.textStyle   |   boolean

单轴指示器文本标签的文字样式。可以实现如下设置:

  • singleAxis.axisPointer.label.textStyle.color Color
    [ default: '#fff' ]
    文字的颜色。
  • singleAxis.axisPointer.label.textStyle.fontStyle string
    [ default: 'normal' ]
    文字字体的风格
    可选:
    • 'normal'
    • 'italic'
    • 'oblique'
  • singleAxis.axisPointer.label.textStyle.fontWeight string
    [ default: normal ]
    文字字体的粗细
    可选:
    • 'normal'
    • 'bold'
    • 'bolder'
    • 'lighter'
    • 100 | 200 | 300 | 400...
  • singleAxis.axisPointer.label.textStyle.fontFamily string
    [ default: 'sans-serif' ]
    文字的字体系列
    还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
  • singleAxis.axisPointer.label.textStyle.fontSize number
    [ default: 12 ]
    文字的字体大小
  • singleAxis.axisPointer.label.textStyle.lineHeight number
    行高。
    rich 中如果没有设置 lineHeight,则会取父层级的 lineHeight。例如:
    {
       lineHeight: 56
       rich:{
           a:{
                // 没有设置 `lineHeight`,则 `lineHeight` 为 56
           }
        }
    }
  • singleAxis.axisPointer.label.textStyle.width number, string
    文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 backgroundColor)时,可能会使用它。
    注意,文字块的 width 和 height 指定的是内容高宽,不包含 padding。
    width 也可以是百分比字符串,如 '100%'。表示的是所在文本块的 contentWidth(即不包含文本块的 padding)的百分之多少。之所以以 contentWidth 做基数,因为每个文本片段只能基于 content box 布局。如果以 outerWidth 做基数,则百分比的计算在实用中不具有意义,可能会超出。
    注意,如果不定义 rich 属性,则不能指定 width 和 height。
  • singleAxis.axisPointer.label.textStyle.height number, string
    文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 backgroundColor)时,可能会使用它。
    注意,文字块的 width 和 height 指定的是内容高宽,不包含 padding。
    注意,如果不定义 rich 属性,则不能指定 width 和 height。
  • singleAxis.axisPointer.label.textStyle.textBorderColor string
    [ default: 'transparent' ]
    文字本身的描边颜色。
  • singleAxis.axisPointer.label.textStyle.textBorderWidth number
    [ default: 0 ]
    文字本身的描边宽度。
  • singleAxis.axisPointer.label.textStyle.textShadowColor string
    [ default: 'transparent' ]
    文字本身的阴影颜色。
  • singleAxis.axisPointer.label.textStyle.textShadowBlur number
    [ default: 0 ]
    文字本身的阴影长度。
  • singleAxis.axisPointer.label.textStyle.textShadowOffsetX number
    [ default: 0 ]
    文字本身的阴影 X 偏移。
  • singleAxis.axisPointer.label.textStyle.textShadowOffsetY number
    [ default: 0 ]
    文字本身的阴影 Y 偏移。 

singleAxis.axisPointer.label.padding   |   string, Array

[ default: [5, 7, 5, 7] ]

axisPointer 的内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。

使用示例:

// 设置内边距为 5
padding: 5
// 设置上下的内边距为 5,左右的内边距为 10
padding: [5, 10]
// 分别设置四个方向的内边距
padding: [
    5,  // 上
    10, // 右
    5,  // 下
    10, // 左
]

singleAxis.axisPointer.label.backgroundColor   |   string

[ default: 'auto' ]

文本标签的背景颜色,默认是和 axis.axisLine.lineStyle.color 相同。

singleAxis.axisPointer.label.borderColor   |   string

[ default: null ]

文本标签的边框颜色。

singleAxis.axisPointer.label.borderWidth   |   string

[ default: 0 ]

文本标签的边框宽度。

singleAxis.axisPointer.label.shadowBlur   |   number

[ default: 3 ]

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

singleAxis.axisPointer.label.shadowColor   |   Color

[ default: #aaa ]

阴影颜色。支持的格式同color。

singleAxis.axisPointer.label.shadowOffsetX   |   number

[ default: 0 ]

阴影水平方向上的偏移距离。

singleAxis.axisPointer.label.shadowOffsetY   |   number

[ default: 0 ]

阴影垂直方向上的偏移距离。

ECharts单轴的类目标签属性及文字样式
ECharts单轴指示器线条配置
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

ECharts配置项.setOption

ECharts图例组件配置项

ECharts图例组件配置 文本样式

ECharts xAxis配置 直角坐标系x轴

ECharts xAxis配置 x坐标轴名称的文本样式

ECharts xAxis配置 设置x坐标轴轴线

ECharts xAxis配置 x坐标轴刻度设置

ECharts xAxis配置 x坐标轴刻度标签设置

xAxis配置x坐标轴分隔线

xAxis配置坐标轴分隔区域设置

xAxis配置类目数据

ECharts xAxis配置 类目标签的文本样式

ECharts极坐标系的径向轴

如何使用dataZoom组件

ECharts工具栏组件(toolbox)

ECharts工具栏的feature属性

ECharts导出图片的操作

ECharts的数据视图工具

ECharts数据区域缩放工具

ECharts动态类型切换工具

ECharts区域选择组件(brush)

ECharts系列列表:平行坐标系

ECharts系列:主题河流图

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }