Echarts在线免费图表

 
            option = {
    backgroundColor: '#081736',
    title: {
        show: true,
        text: '党员民资占比', // 当前写死
        top: '50%',
        left: '45%',
        textAlign: 'center',
        textStyle: {
            fontSize: '14',
            fontWeight: 'bold',
            color: "#ffffff"
        },
        subtextStyle: {
            fontSize: '20',
            fontWeight: 'bold'
        }
    },
    color: ['#FFFF00', '#0080FF'],
    grid: {
        left: 0,
        // right: 0,
        bottom: 0,
        top: 0,
        containLabel: true
    },
    grid: {
        bottom: 150,
        left: 100,
        right: '10%'
    },
    series: [
        // 主要展示层的
        {
            radius: ['40%', '50%'],
            center: ['45%', '50%'],
            type: 'pie',
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        textStyle: { fontSize: "16" },
                        formatter: function (val) {   //让series 中的文字进行换行
                            return val.name.split("-").join("\n");
                        }
                    },//饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。可以与itemStyle属性同级，具体看文档
                    labelLine: {
                        show: true,
                    }//线条颜色
                },//基本样式
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',//鼠标放在区域边框颜色
                    textColor: '#000'
                }//鼠标放在各个区域的样式
            },
            data: [
                { "name": "20%-少数民族", "value": 20 },
                { "name": "80%-汉族", "value": 80 }
            ],
        },
        // 边框的设置
        {
            type: 'pie',
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            center: ['45%', '50%'],
            radius: ['35%', '35%'],
            data: [{
                value: 2,
                name: '',
                itemStyle: {
                    normal: {
                        borderWidth: 2,
                        borderColor: '#61bad3'
                    }
                }
            }]
        },
    ]
};