echarts中使用rich 自定义富文本样式

echart新版本 新增了rich属性,可以自定义文本的样式。注意5版本后才可以使用

以下图为例:强调id与变更次数

label: {
        normal: {
          color: '#fff',
          formatter: function(params) {
            let name = params.name
            return '部件 : {part|' + params.data.department + '} \n 需求({id|' + params.data.requirementId + '}):' + name + ' \n变更{style|' + ' ' + params.data.num + ' }次'
          },
          rich: {
            style: {
              fontSize: '19px',
              padding: [8, 0, 6, 0],
              fontWeight: 'bold',
              color: '#0be2ed'
            },
            part: {
              color: '#eee',
              marginLeft: '10px',
              fontWeight: 'bold',
              padding: [8, 0, 6, 0]
            },
            id: {
              fontSize: '14px',
              fontWeight: 'bold',
              color: '#0be2ed'
            }
          }
        },
        data: []
      },

 

如果您在 ECharts 饼图使用富文本标签,并且发现部分标签超出了饼图的区域被遮挡了,可以尝试使用 ECharts 提供的 `rich` 配置项来调整标签的样式和布局,使其适应饼图的大小。 具体来说,您可以在 `series.label` 设置 `formatter` 属性为一个函数,用于格式化标签文本并使用 `rich` 配置项来定义富文本标签的样式。例如: ```javascript option = { series: [{ type: 'pie', label: { formatter: function(params) { return '{a|' + params.name + '}\n{b|' + params.value + '}'; }, rich: { a: { color: '#333', fontSize: 14, lineHeight: 20 }, b: { color: '#999', fontSize: 12, lineHeight: 16 } } }, // ... 其他配置项 }] }; ``` 在上面的示例,我们使用 `{a|...}` 和 `{b|...}` 的方式来定义富文本标签的样式,其 `a` 和 `b` 是自定义样式名称,可以在 `rich` 配置项定义它们的样式。通过设置 `lineHeight` 属性,可以控制文本行之间的距离,以适应饼图的大小。 如果您需要更复杂的富文本布局,可以在 `rich` 配置项定义多个样式名称,并在 `formatter` 函数使用它们来构建富文本布局。例如,您可以使用 `rich` 配置项的 `title`、`value` 和 `percent` 样式,在标签显示标题、数值和百分比信息: ```javascript option = { series: [{ type: 'pie', label: { formatter: function(params) { return '{title|' + params.name + '}\n{value|' + params.value + '}\n{percent|' + params.percent + '%}'; }, rich: { title: { color: '#333', fontSize: 14, lineHeight: 20, fontWeight: 'bold' }, value: { color: '#999', fontSize: 12, lineHeight: 16 }, percent: { color: '#999', fontSize: 12, lineHeight: 16 } } }, // ... 其他配置项 }] }; ``` 在上面的示例,我们使用 `{title|...}`、`{value|...}` 和 `{percent|...}` 的方式来定义不同样式名称,并在 `rich` 配置项分别定义它们的样式。在 `formatter` 函数,我们使用这些样式名称来构建富文本布局,并在标签显示标题、数值和百分比信息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值