Echarts label 换行

饼图中间显示文字

title:{
            text:'4',
            subtext:'Today',
            x:'center',
            y:'center',
            top:'36%',
            textStyle:{
                fontSize: 26,
                fontWeight:700
            },
            subtextStyle:{
                fontSize: 12,
                color: '#333',
                fontWeight:700
            }
        }

效果图


image.png

完全代码

donut() {
        /* data from server */
        let data = [{ value: 323, name: 'a' }, { value: 120, name: 'b' }]

        let myDonut = echarts.init(document.getElementById('donut'))
        let option = {
            title: {
                text: '4',
                subtext: 'Today',
                x: 'center',
                y: 'center',
                top: '36%',
                textStyle: {
                    fontSize: 26,
                    fontWeight: 700
                },
                subtextStyle: {
                    fontSize: 12,
                    color: '#333',
                    fontWeight: 700
                }
            },
            tooltip: {
                show: false,
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left'
            },
            color: ['#12526d', '#d4d4d4'],
            series: [
                {
                    name: 'from',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center',
                            formatter: function () {
                                return '  4 \r\nToday'
                            },
                            textStyle: {
                                color: '#333',
                                fontWeight: 700,
                                fontSize: 16
                            }
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    /* data from server */
                    data: data
                }
            ]
        };
        myDonut.setOption(option);
        myDonut.resize()
    };
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容