Echarts饼状图设置

  //数据
        var workList = [
            { name: '李晓燕', value: '120' },
            { name: '魔尊', value: '220' },
            { name: '天蓬', value: '220' },
            { name: '景天', value: '180' },
            { name: '雪见', value: '100' },
            { name: '李逍遥', value: '300' },
            {name: '灵儿', value: '120' },
            { name: '唐宇', value: '220' },
            { name: '摸到', value: '220' },
            { name: '风来', value: '180' },
            { name: '褚阿生', value: '100' },
            { name: '十号', value: '300' },
        ]
        //配置
        var optionWorkFlow = {
            //提示框
            tooltip: {
                trigger: 'item'
            },
            //设置图例
            legend: {
                show: true,
                 // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
                orient: 'horizontal',
                 // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                x: 'left',
                // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                y: 'top',
                itemWidth: 20,   // 设置图例图形的宽
                itemHeight: 16,  // 设置图例图形的高
                // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
                itemGap: 30,
                backgroundColor: '#666',  // 设置整个图例区域背景颜色
                textStyle: { //图例文字的样式
                    color: '#000',
                    fontSize: 16
                },
                data: ['李晓燕', '魔尊', '天蓬', '景天', '雪见', '李逍遥', '灵儿', '唐宇', '摸到', '风来', '褚阿生', '十号']
            },
            graphic: {       //图形中间文字
                type: "text",
                left: "center",
                top: "center",
                style: {
                    text: '',
                    textAlign: "center",
                    fill: "#000000",
                    fontSize: 60
                }
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: ['40%', '70%'],   // radius: '50%',  // 设置饼状图大小，100%时，最大直径=整个图形的min(宽，高)
                    avoidLabelOverlap: false,
                     // itemStyle 设置饼状图扇形区域样式
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    // 设置值域的指向线
                    label: {
                        //show: false, \n
                        normal: {
                            show: false,
                            //设置标签显示内容 
                            formatter: "{b}：{c}"
                        },
                        emphasis: {
                            show: true,
                        }
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '40',
                            fontWeight: 'bold'
                        }
                    },
                  // 设置值域的那指向线
                    labelLine: {
                        show: false
                    },
                    data: workList
                }
            ]
        };
        setTimeout(function () {
            //获取容器宽高
            var workFlowInfoWidth = document.getElementById('chartsTutorLifeCycle').offsetWidth + 'px'
            document.getElementById('chartsTutorLifeCycle').style.width = workFlowInfoWidth
            var workFlowBarCharts = echarts.init(document.getElementById('chartsTutorLifeCycle'));
            workFlowBarCharts.hideLoading();
            workFlowBarCharts.setOption(optionWorkFlow);
            //监听窗口变化
            window.addEventListener('resize', function () {
                //Performance1BarCharts.resize()
                var workFlowInfoWidth = document.getElementById('chartsTutorLifeCycle').offsetWidth + 'px'
                document.getElementById('chartsTutorLifeCycle').style.width = workFlowInfoWidth
                workFlowBarCharts.resize()
            })
        }, 0)

效果：