占比环图 ECharts Gallery

20:11:45图表已生成
代码
var requiedList = [{
    name: '硕士',
    value: 110
}, {
    name: '博士',
    value: 320
}, {
    name: '其他',
    value: 840
}, ];
var chartColor = [{ // 完成的圆环的颜色
    colorStops: [{
        offset: 0,
        color: '#ff6a6a'
    }, {
        offset: 1,
        color: '#fd4547'
    }]
},{ 
    colorStops: [{
        offset: 0,
        color: '#3f0fd2'
    }, {
        offset: 1,
        color: '#c24ff4'
    }]
}, { 
    colorStops: [{
        offset: 0,
        color: '#3eaec2'
    }, {
        offset: 1,
        color: '#63ecae'
    }]
}, ]
var fontColor = ["#ff9494", "#007eff", '#63ecae','#c24ff4',]
var requiedData = [],
    requiedSeries = [],
    sumVal = 0;
requiedList.forEach((item, idx) => {
    requiedData.push({
        name: item.name,
        textStyle: {
            color: fontColor[idx],
        },
    });
    sumVal += item.value;
})
requiedList.forEach((item, index) => {
    let chartData = [];
    requiedList.forEach((cItem, cIndex) => {
        if (cIndex == index) {
            chartData.push({
                value: cItem.value,
                name: cItem.name,
            
                label: {
                    formatter: cItem.name + '  ' + parseFloat(cItem.value / sumVal).toFixed(4) * 100 + '%'
                ,
                    color:fontColor[cIndex],
                },
            })
        } else {
            chartData.push({
                value: cItem.value,
                name: ' ',
                itemStyle: {
                    color: "rgba(0,0,0,0)"
                }
            })
        }
    })
    if (index != requiedList.length - 1) {
        // 处理每个环的data


        requiedSeries.push({
            name: '达标率',
            type: 'pie', //设为饼图
            radius: ['70%', '75%'], //设置内半径和外半径，形成环状
            startAngle: 90, //设置起始角度
            clockWise: false, //默认逆时针
            avoidLabelOverlap: true, //避免标注重叠
            hoverAnimation: false, //移入放大
            silent: true,
            center: '50%',
            label: {
                emphasis: {
                    //show: false,
                    textStyle: {
                        fontSize: '10',
                        fontWeight: 'bold',
                    }
                }
            },
            data: chartData,
        }, {
            value: 2,
            name: '111',
            type: 'pie', //设为饼图
            radius: ['70%', '75%'], //设置内半径和外半径，形成环状
            startAngle: 90, //设置起始角度
            clockWise: false, //默认逆时针
            avoidLabelOverlap: true, //避免标注重叠
            hoverAnimation: false, //移入放大
            silent: true,
            center: '50%',
            label: {
                emphasis: {
                    show: false,
                    textStyle: {
                        fontSize: '10',
                        fontWeight: 'bold'
                    }
                }
            },
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    },
                    color: 'rgba(0, 0, 0, 0)',
                    borderColor: 'rgba(0, 0, 0, 0)',
                    borderWidth: 0
                }
            }
        })

    } else {

        requiedSeries.push({
            name: '达标率',
            type: 'pie', //设为饼图
            radius: ['65%', '70%'], //设置内半径和外半径，形成环状
            startAngle: 90, //设置起始角度
            clockWise: false, //默认逆时针
            avoidLabelOverlap: false, //避免标注重叠
            hoverAnimation: false, //移入放大
            silent: true,
            center: '50%',
            label: {
                emphasis: {
                    //show: false,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            data: chartData,
        })

    }
    console.log(JSON.stringify(requiedSeries))
})


option = {
    legend: { //配置图例
        orient: 'vertical',
        //orient: 'horizontal', //布局方式，默认水平布局，另可选vertical
        x: 'left',
        y: 'center', //垂直放的位置，可以写top，center，bottom，也可以写px或者百分比。x轴方向同理，默认center
        //icon: "circle",

        selectedMode: false, //选中哪个图例 false后图例不可点击
        textStyle: {
            fontSize: 14,
        },
        data: requiedData,


    },
    color: chartColor, //环形的颜色
    graphic: [{ //环形图中间添加文字
        type: 'text', //通过不同top值可以设置上下显示
        left: 'center',
        top: 'center',
        style: {
            text: '学历数', //（自己设置显示内容）,
            textAlign: 'center',
            fill: '#000', //文字的颜色
            width: 30,
            height: 30,
            fontSize: 18,
            color: "#4d4f5c",
            fontFamily: "Microsoft YaHei"
        }
    }, ],
    series: requiedSeries

};
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
