codecamp

ECharts柱状图的标注如何实现

ECharts 中使用 markPoint 可以控制柱状图的标注。

series[i]-bar.markPoint

设置 ECharts 柱状图标注,这是一个 Object。

series[i]-bar.markPoint.symbol

[ default: 'pin' ]

柱状图标注的图形设置,取值类型为 string。

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

可以通过 'image://url' 设置为图片,其中 url 为图片的链接,或者 dataURI;

也可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

series[i]-bar.markPoint.symbolSize 

[ default: 50 ]

柱状图标注的大小,值类型为 number、Array、Function;可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10。

如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:

(value: Array|number, params: Object) => number|Array

其中第一个参数 value 为 data 中的数据值。第二个参数 params 是其它的数据项参数。

series[i]-bar.markPoint.symbolRotate number

柱状图标注的旋转角度,值类型为 number。

注意:在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。

series[i]-bar.markPoint.symbolOffset 

[ default: [0, 0] ]

柱状图标注相对于原本位置的偏移,值类型为 Array。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。

例如: [0, '50%'] 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。

series[i]-bar.markPoint.silent

[ default: false ]

柱状图的图形是否不响应和触发鼠标事件,是 boolean 值,默认为 false,即响应和触发鼠标事件。

series[i]-bar.markPoint.label

柱状图标注的文本,为 Object。

series[i]-bar.markPoint.itemStyle

柱状图标注的样式,为 Object。

series[i]-bar.markPoint.data[i] 

柱状图标注的数据数组,为 Object。每个数组项是一个对象,有下面几种方式指定标注的位置。

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。
  2. 用 coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 'min', 'max', 'average'。
  3. 直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 指定是在哪个维度上的最大值、最小值、平均值。或者可以使用 valueDim 指定在哪个维度上的最大值、最小值、平均值。

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

示例:

data: [
    {
        name: '最大值',
        type: 'max'
    }, 
    {
        name: '某个坐标',
        coord: [10, 20]
    }, {
        name: '固定 x 像素位置',
        yAxis: 10,
        x: '90%'
    }, 
    {
        name: '某个屏幕坐标',
        x: 100,
        y: 100
    }
]

series[i]-bar.markPoint.animation

[ default: true ]

柱状图标注是否开启动画,值类型为 boolean,默认开启。

series[i]-bar.markPoint.animationThreshold 

[ default: 2000 ]

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

series[i]-bar.markPoint.animationDuration

[ default: 1000 ]

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

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

series[i]-bar.markPoint.animationEasing 

[ default: cubicOut ]

初始动画的缓动效果,值类型为 string。不同的缓动效果可以参考 缓动示例

series[i]-bar.markPoint.animationDelay 

[ default: 0 ]

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

如下示例:

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

也可以看该示例

series[i]-bar.markPoint.animationDurationUpdate 

[ default: 300 ]

数据更新动画的时长,值类型为 number、Function。

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

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

series[i]-bar.markPoint.animationEasingUpdate 

[ default: cubicOut ]

数据更新动画的缓动效果,值类型为 string。

series[i]-bar.markPoint.animationDelayUpdate 

[ default: 0 ]

数据更新动画的延迟,值类型为 number、Function;支持回调函数,可以通过每个数据返回不同的 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; }