素材牛VIP会员
echarts怎么修改title的字体大小
 18***30  分类:JavaScript  人气:8595  回帖:1  发布于6年前 收藏

想在移动端吧饼图的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} <br/>{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;
            }
        }]
    };

讨论这个帖子(1)垃圾回帖将一律封号处理……

Lv6 码匠
gu***yu 软件测试工程师 6年前#1

方法1:将Echarts中的title隐藏,另外写个Title使用Css来控制
方法2:增加window.onresize事件监听窗口变化改变option1的title配置

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取