eCharts——柱状图中柱体上面显示数字和关于formatter的用法

柱体顶部显示数字

如何实现柱体上面显示数值？

首先我们需要让它显示，然后定位，设置样式，并且明确显示的数值，废话不多说，看下代码。

 series: [{
                label: { //柱体上显示数值
                    show: true,//开启显示
                    position: 'top',//在上方显示
                    textStyle: {//数值样式
                        fontSize: '7px',
                        color: '#666'
                    },
                    formatter: '{c}',
                }
            }]

接下来我们再说一下关于formatter

formatter用法

formatter是什么？它就是内容格式器，把一些不够人性化的内容通过某种处理让其变得人性化，便于用户更好的理解内容，支持字符串模板和回调函数两种形式。

1.legend.formatter

用来格式化图例文本。

示例：

formatter: 'Legend {name}'
// 使用回调函数
formatter: function (name) {
    return 'Legend ' + name;
}

2.xAxis.axisLabel.formatter/yAxis.axisLabel.formatter

刻度标签的内容格式器

示例：

// 使用字符串模板，模板变量为刻度默认标签 {value}
formatter: '{value} kg'
// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
formatter: function (value, index) {
    // 格式化成月/日，只在第一个刻度显示年份
    var date = new Date(value);
    var texts = [(date.getMonth() + 1), date.getDate()];
    if (index === 0) {
        texts.unshift(date.getYear());
    }
    return texts.join('/');
}

3.tooltip.formatter

提示框浮层内容格式器

（1）字符串模板
模板变量有{a},{b},{c},{d},{e},分别表示系列名，数据名，数据值等。在trigger为’axis’的时候，会有多个系列的数据，此时可通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：

折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）

散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）

地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）

饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）

更多其它图表模板变量的含义可以见相应的图表的 label.formatter 配置项。

示例：

formatter: '{b0}: {c0}<br />{b1}: {c1}'

（2）回调函数
回调函数格式：
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string

4.series.label.formatter
标签内容格式器，字符串模板与回调函数返回的字符串均支持用n换行

字符串模板 模板变量有：

{a}：系列名。
{b}：数据名。
{c}：数据值。
{@xxx}：数据中名为’xxx’的维度的值，如{@product}表示名为’product’的维度的值。
{@[n]}：数据中维度n的值，如{@[3]}` 表示维度 3 的值，从 0 开始计数。

示例：

formatter: '{b}: {@score}'

附：formatter部分的知识转载于 Echarts之formatter用法（可以参考此网页）