ECharts 定制 label 样式

ECharts 定制 label 样式

起因

实现对 label 的样式定制,自定义字体颜色、大小等属性;效果如下图


实现

itemStyle: {
    normal: {
        color: '#f7ba0e',
        label: {
            show: true,
            position: 'top',
            formatter: function(params) {
                for (var i = 0,
                l = option.xAxis[0].data.length; i < l; i++) {
                    if (option.xAxis[0].data[i] == params.name) {
                        var val1 = params.value || 0;
                        var val2 = option.series[0].data[i] || 0;
                        return '{color1|' + val1 + '}/{color2|' + val2 + '}';
                    }
                }
            },
            rich: {
                color1: {
                    color: '#f7ba0e'
                },
                color2: {
                    color: '#42a1fe'
                }
            },
            textStyle: {
                color: '#333'
            }
        }
    }
}
(1)通过“formatter”实现内容自定义;

(2)通过“rich”项控制内容样式;
    '{color1|' + val1 + '}/{color2|' + val2 + '}' 用“color1”的样式显示“val1”,用“color2”的样式显示val2;

(3)下方有对“color1”和“color2”样式的具体定义;

官方文档
官方文档有更加详细的描述:
  • 5
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值