codecamp

使用ECharts柱状图标线

 ECharts 使用 markLine 来设置柱状图标线,本文是对柱状图标线属性的介绍。

series[i]-bar.markLine.silent   |   boolean 

[ default: false ]

设置柱状图标线是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

series[i]-bar.markLine.symbol   |   string, Array

柱状图标线两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定,具体格式见 data.symbol。

series[i]-bar.markLine.symbolSize   |   number, Array

标线两端的标记大小,可以是一个数组分别指定两端,也可以是单个统一指定。

注意: 这里无法像一般的 symbolSize 那样通过数组分别指定高宽。

series[i]-bar.markLine.precision   |   number

[ default: 2 ]

标线数值的精度,在显示平均值线的时候有用。

series[i]-bar.markLine.label   |   Object

标线的文本。

series[i]-bar.markLine.lineStyle   |   Object

标线的样式

series[i]-bar.markLine.data 

标线的数据数组。每个数组项可以是一个两个值的数组,分别表示线的起点和终点,每一项是一个对象,有下面几种方式指定起点或终点的位置。

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。
  2. 用 coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min', 'max', 'average'。
  3. 直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。
  4. 如果是笛卡尔坐标系的话,也可以通过只指定 xAxis 或者 yAxis 来实现 X 轴或者 Y 轴为某值的标线,见示例 scatter-weight

当多个属性同时存在时,优先级按上述的顺序。

也可以是直接通过 type 设置该标线的类型,是最大值的线还是平均线。同样的,这时候可以通过使用 valueIndex 指定维度。

data: [
    {
        name: '平均线',
        // 支持 'average', 'min', 'max'
        type: 'average'
    },
    {
        name: 'Y 轴值为 100 的水平线',
        yAxis: 100
    },
    [
        {
            // 起点和终点的项会共用一个 name
            name: '最小值到最大值',
            type: 'min'
        },
        {
            type: 'max'
        }
    ],
    [
        {
            name: '两个坐标之间的标线',
            coord: [10, 20]
        },
        {
            coord: [20, 30]
        }
    ], [{
        // 固定起点的 x 像素位置,用于模拟一条指向最大值的水平线
        yAxis: 'max',
        x: '90%'
    }, {
        type: 'max'
    }],
    [
        {
            name: '两个屏幕坐标之间的标线',
            x: 100,
            y: 100
        },
        {
            x: 500,
            y: 200
        }
    ]
]

series[i]-bar.markLine.animation   |   boolean

[ default: true ]

是否开启动画。

series[i]-bar.markLine.animationThreshold   |   number

[ default: 2000 ]

是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。

series[i]-bar.markLine.animationDuration   |   number

[ default: 1000 ]

初始动画的时长,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果:

animationDuration: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

series[i]-bar.markLine.animationEasing   |   string

[ default: cubicOut ]

初始动画的缓动效果。不同的缓动效果可以参考 缓动示例

series[i]-bar.markLine.animationDelay   |   number, Function

[ default: 0 ]

初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。

如下示例:

animationDelay: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

series[i]-bar.markLine.animationDurationUpdate   |   number, Function

[ default: 300 ]

数据更新动画的时长。

支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果:

animationDurationUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

series[i]-bar.markLine.animationEasingUpdate   |   string

[ default: cubicOut ]

数据更新动画的缓动效果。

series[i]-bar.markLine.animationDelayUpdate   |   number, Function

[ default: 0 ]

数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。

如下示例:

animationDelayUpdate: function (idx) {
    // 越往后的数据延迟越大
    return idx * 100;
}

也可以看该示例

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; }