Echarts在线免费图表

 
            //职称结构取数

var rich = {
    name: {
        color: "#666666",
        fontSize: 14,
        padding: [8, 30, 0, 30],
        fontWeight: '400',
        align: 'left'
    },
    value: {
        color: "#333",
        fontSize: 15,
        padding: [0, 30, 8, 30],
        fontWeight: '500',
        align: 'left'
    },
    percent: {
        color: "#FFF",
        align: 'right',
        fontSize: 15,
        fontWeight: '500',
        //padding: [0, 5]
    },
    hr: {
        borderColor: '#DFDFDF',
        width: '100%',
        borderWidth: 1,
        height: 0,
    },
    cir: {
        fontSize: 26,
    }
}
//职称结构图表
var colorList = ['#507AFF', '#51D9A2', '#FFC371', '#797AFF'];
option = {
    series: [{
        itemStyle: {
            normal: {
                color: function(params) {
                    return colorList[params.dataIndex]
                }
            }
        },
        type: 'pie',
        radius: ['20%', '50%'],
        center: ["50%", "50%"],
        
        label: {
            normal: {
                position: 'inner',
                formatter: params => {
                    return (
                        '{percent|' + params.percent.toFixed(0) + '%}'
                    );
                },
                rich: rich,
            }
        },
        data: [{"name":"小说","value":300},{"name":"辅助教材","value":200},{"name":"期刊","value":100},{"name":"其他","value":50}]
    },{
                        name: '外边框', 
                        type: 'pie',
                        tooltip: {
                            show: false,
                        },
                        clockWise: false, //顺时加载
                        hoverAnimation: false, //鼠标移入变大
                        center:['50%','50%'],//这里跟上面那组一样即可
                        radius: ['52%', '52%'],//这里根据自己的需要自行调整，但是两个值要一样大哦，如果小于上方设置的最小内圆30%则为内阴影，大于外圆60%则为外阴影
                        label: {
                            normal: {
                                show: false //重点：此处主要是为了不展示data中的value和name
                            }
                        },
                        data: [{
                            value: 1,//此处的值无所谓是多少
                            name: '',//因为不展示label，可不填
                            itemStyle: { //边框样式，此处我们设置的浅蓝色，颜色可自行修改
                                normal: {
                                    borderWidth: 20,//边框宽度
                                    borderColor: 'rgba(94, 183, 249,  0.13)'//边框颜色
                                }
                            }
                        }]
                    }
                     ]
};