echarts 饼状图 label 字体设置

最新推荐文章于 2025-04-19 19:42:29 发布

weixin_45907435

最新推荐文章于 2025-04-19 19:42:29 发布

阅读量2.9k

点赞数 4

文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_45907435/article/details/136884137

版权

本文介绍了如何在ECharts中为饼图的label设置样式，包括使用formatter格式化内容，并利用rich对象为特定部分添加样式。同时探讨了如何配置legend、tooltip和动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、给label按需设置样式，在 series 的 label 中用 formatter 格式化内容，在rich中设置样式

option = {

tooltip: {

trigger: 'axis'

},

legend: {

orient: 'vertical',

top: 'center',

right: '3%',

itemWidth: 10, // 图例 icon 与 name 之间的距离

itemHeight: 5, // icon 大小

icon: 'circle', // icon 形状

textStyle: {

fontWeight: 'bold' // 字体

}

},

series: [

{

type: 'pie',

radius: ['40%', '70%'], // 圆半径

center: ['42%', '50%'], // 圆中心位置

avoidLabelOverlap: false,

// hoverAnimation: false, // 为false 时关闭动画且 emphasis不设置

emphasis: { // 动画样式--鼠标划过面积时的label动画效果设置

label: {

show: true,

fontSize: 14,

fontWeight: 'bold'

}

},

labelLine: { // 引导线

show: true,

smooth: true // 是否平滑

},

label: { // 自定义label 样式 + 内容
// {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）

formatter: ' { b } \n { c | { c } } 起 ({d} %)',

rich: { // 在rich中可以分别给 a,b,c,d 设置样式

c: {

lineHeight: 26,

fontWeight: 'bold'

}

}

},

data: accidentRankingDataList

}

]

}