echarts中间有字饼图Demo1

echarts链接：http://gallery.echartsjs.com/editor.html?c=xHy2vIPzLQ

代码：

option = {
    backgroundColor: 'black',
    title: {
        text: '标题',
        x: 'center',
        textStyle: {
            fontWeight: 'normal',
            color: 'white',
            fontSize: 18
        },
    },
    color: ['#f69846', '#00ffb4', '#44aff0', '#f6d54a', '#45dbf7',
        '#ad46f3', '#f845f1', '#ff4343', '#ffa800', '#39E7FB', '#FAC901',
    ], //饼图颜色

    tooltip: { //弹框
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },

    legend: {
        orient: 'horizontal', //horizontal横向，vertical纵向
        x: 'center',
        y: 'bottom',
        data: ['直接访问', '邮件营销', '联盟广告'],
        textStyle: {
            color: 'white'
        }
    },
    graphic: { //中间
        type: 'text',
        left: 'center', // 相对父元素居中
        top: 'middle', // 相对父元素居中
        //可设置颜色 字体等等
        style: {
            fill: 'white', //text颜色
            text: '456',
            font: '20px Microsoft YaHei'
        }
    },
    series: [{
        name: '访问来源',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: true,
        label: {
            normal: {
                show: true, //表示文字是否显示
                textStyle: {
                    fontSize: 18
                }
            },
            emphasis: {
                show: true
            }
        },
        labelLine: {
            show: true //表示线是否显示
        },
        data: [{
                value: 335,
                name: '直接访问'
            },
            {
                value: 310,
                name: '邮件营销'
            },
            {
                value: 234,
                name: '联盟广告'
            },
        ]
    }]
};