柱体顶部显示数字
如何实现柱体上面显示数值?
首先我们需要让它显示,然后定位,设置样式,并且明确显示的数值,废话不多说,看下代码。
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用法(可以参考此网页)