美文网首页react native
Echarts label 换行

Echarts label 换行

作者: 骚包霸天虎 | 来源:发表于2017-12-15 17:19 被阅读699次

饼图中间显示文字

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()
    };

相关文章

网友评论

    本文标题:Echarts label 换行

    本文链接:https://www.haomeiwen.com/subject/aumdwxtx.html