codecamp

ECharts全局坐标轴指示器的属性设置

axisPointer.show   |   boolean

[ default: false ]

是否显示坐标轴指示器,默认为不显示。但是如果 tooltip.trigger 设置为 'axis' ,或者 tooltip.axisPointer.type 设置为 'cross',则自动显示 axisPointer。

坐标系会自动选择显示显示哪个轴的 axisPointer,也可以使用 tooltip.axisPointer.axis 改变这种选择。

axisPointer.type   |   string

[ default: 'line' ]

ECharts 坐标轴指示器的类型。

可选:

  • 'line' 直线指示器
  • 'shadow' 阴影指示器

axisPointer.snap   |   boolean

坐标轴指示器是否自动吸附到点上。默认自动判断。

这个功能在数值轴和时间轴上比较有意义,可以自动寻找细小的数值点。

axisPointer.z   |   number

坐标轴指示器的 z 值。控制图形的前后顺序。

z 值小的图形会被 z 值大的图形覆盖。

axisPointer.triggerTooltip   |   boolean

[ default: true ]

坐标轴指示器是否触发 tooltip。如果不想触发 tooltip 可以关掉。

axisPointer.value   |   number

[ default: null ]

坐标轴指示器当前的 value。在使用 axisPointer.handle 时,可以设置此值进行初始值设定,从而决定 axisPointer 的初始位置。

axisPointer.status   |   boolean

坐标轴指示器当前的状态,可取值为 'show' 和 'hide'。

axisPointer.link   |   Array

设置不同轴的 axisPointer 可以进行的联动。联动表示轴能同步一起活动。轴依据他们的 axisPointer 当前对应的值来联动。

联动的效果可以看这两个例子:例子A例子B

link 是一个数组,其中每一项表示一个 link group,一个 group 中的坐标轴互相联动。例如:

link: [
    {
        // 表示所有 xAxisIndex 为 0、3、4 和 yAxisName 为 'someName' 的坐标轴联动。
        xAxisIndex: [0, 3, 4],
        yAxisName: 'someName'
    },
    {
        // 表示左右 xAxisId 为 'aa'、'cc' 以及所有的 angleAxis 联动。
        xAxisId: ['aa', 'cc'],
        angleAxis: 'all'
    },
    ...
]

如上所示,每个 link group 中可以用这些方式引用坐标轴:

{
    // 以下的 'some' 均表示轴的维度,也就是表示 'x', 'y', 'radius', 'angle', 'single'
    someAxisIndex: [...], // 可以是一个数组或单值或 'all'
    someAxisName: [...],  // 可以是一个数组或单值或 'all'
    someAxisId: [...],    // 可以是一个数组或单值或 'all'
}

如何联动不同类型(axis.type)的轴?

如果 axis 的类型不同,比如 axisA type 为 'category',axisB type 为 'time',可以在每个 link group 中写转换函数(mapper)来进行值的转换,例如:

link: [{
    xAxisIndex: [0, 1],
    yAxisName: ['yy'],
    mapper: function (sourceVal, sourceAxisInfo, targetAxisInfo) {
        if (sourceAxisInfo.axisName === 'yy') {
            // from timestamp to '2012-02-05'
            return echarts.format.formatTime('yyyy-MM-dd', sourceVal);
        }
        else if (targetAxisInfo.axisName === 'yy') {
            // from '2012-02-05' to date
            return echarts.number.parseDate(dates[sourceVal]);
        }
        else {
            return sourceVal;
        }
    }
}]

mapper 的输入参数:

{number} sourceVal

{Object} sourceAxisInfo 里面包含 {axisDim, axisId, axisName, axisIndex} 等信息

{Object} targetAxisInfo 里面包含 {axisDim, axisId, axisName, axisIndex} 等信息

mapper 的返回值:

{number} 转换结果

axisPointer.triggerOn   |   string

[ default: 'mousemove|click' ]

坐标轴指示器中提示框触发的条件,可选:

  • 'mousemove':鼠标移动时触发。
  • 'click':鼠标点击时触发。
  • 'none':不在 'mousemove' 或 'click' 时触发。
ECharts提示框组件指示器的crossStyle
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; }