echarts 动态设置标题_echarts怎么修改title的字体大小

博客围绕在移动端使用 ECharts 绘制饼图时,遇到标题字号设置问题展开。最初使用百分比设置字号效果不佳,在火狐浏览器下还会出现重叠情况,进而探讨如何监听宽度变化来动态改变字体大小,并给出了饼图的相关配置代码。

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

想在移动端吧饼图的title的字号改小 开始写百分比发现效果不好而且在火狐下会重叠

怎么监听宽度的变化改变字体的大小呢

option1 = {

title: [

{

text: 'Part 1',

left: "49%",

top: '32%',

textAlign: 'center',

textStyle: {

color: '#333333',

fontWeight: 'bold',

fontSize: 30

}

},

{

text: '财务规划,\n绩效和控制',

left: "49%",

top: '42%',

textAlign: 'center',

textStyle: {

color: '#333333',

fontWeight: 'bold',

fontSize: 20,

}

}, {

text: 'Financial Reporting ,\nPlanning,Performance\nand Control',

left: "49%",

top: '52%',

textAlign: 'center',

textStyle: {

color: '#333333',

fontSize: 10

}

}

],

tooltip: {

trigger: 'item',

formatter: "{a}
{b}:({d}%)"

},

itemStyle: dataStyle,

roseType: 'angle',

series: [{

name: '',

type: 'pie',

hoverOffset: 40,

radius: ['43%', '100%'],

color: ['#32e0f0', '#54caf6', '#1d7fe4'],

label: {

normal: {

show: false,

textStyle: {

color: "#fff",

fontSize: 18

},

position: 'inner'

},

emphasis: {

show: true,

textStyle: {

color: "#fff",

fontSize: 18

},

position: 'inner'

}

},

tooltip: {

show: false

},

data: [{

value: 20,

name: '20%\n成本管理'

}, {

value: 20,

name: '20%\n绩效管理'

}, {

value: 15,

name: '15%\n对外财务\n报告决策'

}, {

value: 15,

name: '15%\n内部控制'

}, {

value: 30,

name: '30%\n规划预算\n编制与预测'

}],

animationType: 'scale',

animationEasing: 'elasticOut',

animationDelay: function (idx) {

return Math.random() * 200;

}

}]

};

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值