ECharts - 自定义label标签的样式（formatter、rich、添加图标）
作者：hangge | 2021-10-27 08:10
在使用 Echarts 图表时，如果觉得默认标签的内容或者样式不能满足需求，可以借助 formatter 内容格式器来进行调整。同时 formatter 支持字符串模板和回调函数两种形式，下面通过样例进行演示。
（2）样例代码如下：
（2）样例代码如下：
1，默认效果
（1）这里以饼图为例，默认 label 样式如下：
（2）样例代码如下：
<template>
<div style="width: 40%; height: 50%" ref="chart">
</div>
</template>
<script>
let Echarts = require('echarts'); //基础实例 注意不要使用import
export default {
name: 'Home',
data () {
return {
chart: null //图表实例
}
},
mounted() {
this.showChart();
},
methods:{
//显示图表
showChart() {
//1.初始化
this.chart = Echarts.init(this.$refs.chart);
//2.配置数据
let option = {
tooltip: {
trigger: 'item'
},
series: [
{
name: '--- 访客来源 ---',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: '直接访问' },
{ value: 735, name: '搜索引擎' },
{ value: 580, name: 'Email' },
{ value: 484, name: '广告' }
]
}
]
};
// 3.传入数据
this.chart.setOption(option);
}
}
}
</script>
<style scoped>
</style>
2，使用字符串模板方式进行格式化
（1）下面通过 formatter 进行文本内容的格式化，效果图如下：（2）样例代码如下：
这里我使用字符串模板进行设置，其中模版变量 {a}, {b}, {c}, {d} 在不同图表类型下代表数据含义为：
- 折线（区域）图、柱状（条形）图、K 线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
- 散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
- 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
- 饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
//1.初始化
this.chart = Echarts.init(this.$refs.chart);
//2.配置数据
let option = {
tooltip: {
trigger: 'item'
},
series: [
{
name: '--- 访客来源 ---',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: '直接访问' },
{ value: 735, name: '搜索引擎' },
{ value: 580, name: 'Email' },
{ value: 484, name: '广告' }
],
label: {
normal: {
formatter: '{a}\n来源：{b}\n数量：{c}\n比例：{d}%'
}
}
}
]
};
// 3.传入数据
this.chart.setOption(option);
3，使用富文本标签样式
（1）虽然 label 无法设置 html 文本，echarts 提供了丰富的文本标签配置项进行样式设置，效果图如下：echarts 提供了丰富的文本标签配置项，包括：
- 字体基本样式设置：fontStyle、fontWeight、fontSize、fontFamily
- 文字颜色：color
- 文字描边：textBorderColor、textBorderWidth
- 文字阴影：textShadowColor、textShadowBlur、textShadowOffsetX、textShadowOffsetY
- 文本块或文本片段大小：lineHeight、width、height、padding
- 文本块或文本片段的对齐：align、verticalAlign
- 文本块或文本片段的边框、背景（颜色或图片）：backgroundColor、borderColor、borderWidth、borderRadius
- 文本块或文本片段的阴影：shadowColor、shadowBlur、shadowOffsetX、shadowOffsetY
- 文本块的位置和旋转：position、distance、rotate
//1.初始化
this.chart = Echarts.init(this.$refs.chart);
//2.配置数据
let option = {
tooltip: {
trigger: 'item'
},
series: [
{
name: '--- 访客来源 ---',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: '直接访问' },
{ value: 735, name: '搜索引擎' },
{ value: 580, name: 'Email' },
{ value: 484, name: '广告' }
],
label: {
normal: {
formatter: '{title|{a}}{abg|}\n{bTitle|来源：}{bValue|{b}}\n{hr|}\n'
+ '{leftGap|}{cIcon|}{cValue|{c}}\n{leftGap|}{dIcon|}{cValue|{d}%}',
backgroundColor: '#eee', //标签背景颜色
borderColor: '#777', //外层边框颜色
borderWidth: 1, //外层边框宽度
borderRadius: 4, //外层边框圆角
rich: {
title: {
color: '#eee',
align: 'center'
},
abg: {
backgroundColor: '#333',
width: '100%',
align: 'right',
height: 25,
borderRadius: [4, 4, 0, 0]
},
bTitle: {
color: '#333',
height: 24,
padding: [0, 5, 0, 5],
align: 'left'
},
bValue: {
color: '#333',
height: 24,
padding: [0, 5, 0, 5],
align: 'right'
},
hr: {
borderColor: '#777',
width: '100%',
borderWidth: 0.5,
height: 0
},
leftGap: {
width:5,
align: 'left',
},
cIcon: {
height: 15,
align: 'left',
margin: [0, 5, 0, 5],
backgroundColor: {
image: '/static/countIcon.png'
}
},
cValue: {
height: 25,
padding: [0, 10, 0, 30],
align: 'right'
},
dIcon: {
height: 15,
align: 'left',
backgroundColor: {
image: '/static/percentIcon.png'
}
},
dValue: {
height: 25,
padding: [0, 10, 0, 30],
align: 'right'
},
}
}
}
}
]
};
// 3.传入数据
this.chart.setOption(option);
4，使用回调函数进行内容格式化
（1）通过回调函数方式可以对格式化内容进行更自由的设置，比如下面样例只有“直接访问”这个区块使用大标签，其他都是用小标签：//1.初始化
this.chart = Echarts.init(this.$refs.chart);
//2.配置数据
let option = {
tooltip: {
trigger: 'item'
},
series: [
{
name: '--- 访客来源 ---',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: '直接访问' },
{ value: 735, name: '搜索引擎' },
{ value: 580, name: 'Email' },
{ value: 484, name: '广告' }
],
label: {
normal: {
formatter: (params) => {
console.log(params);
//只有“直接访问”使用大标签，其他都使用小标签
if(params.data.name == '直接访问') {
return '{title|' + params.seriesName +'}{abg|}\n{bTitle|来源：}{bValue|'
+ params.data.name + '}\n{hr|}\n{leftGap|}{cIcon|}{cValue|'
+ params.data.value + '}\n{leftGap|}{dIcon|}{cValue|'
+ params.percent + '%}';
} else {
return '{bTitle|来源：}{bValue|' + params.data.name + '}';
}
},
backgroundColor: '#eee', //标签背景颜色
borderColor: '#777', //外层边框颜色
borderWidth: 1, //外层边框宽度
borderRadius: 4, //外层边框圆角
rich: {
title: {
color: '#eee',
align: 'center'
},
abg: {
backgroundColor: '#333',
width: '100%',
align: 'right',
height: 25,
borderRadius: [4, 4, 0, 0]
},
bTitle: {
color: '#333',
height: 24,
padding: [0, 5, 0, 5],
align: 'left'
},
bValue: {
color: '#333',
height: 24,
padding: [0, 5, 0, 5],
align: 'right'
},
hr: {
borderColor: '#777',
width: '100%',
borderWidth: 0.5,
height: 0
},
leftGap: {
width:5,
align: 'left',
},
cIcon: {
height: 15,
align: 'left',
margin: [0, 5, 0, 5],
backgroundColor: {
image: '/static/countIcon.png'
}
},
cValue: {
height: 25,
padding: [0, 10, 0, 30],
align: 'right'
},
dIcon: {
height: 15,
align: 'left',
backgroundColor: {
image: '/static/percentIcon.png'
}
},
dValue: {
height: 25,
padding: [0, 10, 0, 30],
align: 'right'
},
}
}
}
}
]
};
// 3.传入数据
this.chart.setOption(option);
全部评论（0）