Echarts在线免费图表

 
            var dataK = 48; //数值大小
    var maxK = dataK*1.2; //满刻度大小
    option = {
       backgroundColor:'#000',
        title: {
            text: '20-30岁',
            top: '80%',
            left: 'center',
            textStyle: {
                fontSize: 14,
                color: '#fff',
                fontWeight: 400,
                rich: {
                    value: {
                        fontSize: 24,
                        color: '#E7DC65',
                        fontWeight: 400
                    },
                    unit: {
                        fontSize: 20,
                        color: '#E7DC65',
                        padding: [0, 0, 6, 1],
                        fontWeight: 400
    
                    }
                }
            },
            // subtext:'20-30岁',
            // subtextStyle:{
            //     fontSize:  14,
            //     color:'#fff',
            // },
        },
        "color": ["#E7DC65", '#E7DC65', 'RGBA(58, 70, 85, 0.4)'],
        "series": [{
            "type": "pie",
            "center": ["50%", "50%"],
            "radius": ["40%", "46%"],
            "hoverAnimation": false,
            "data": [{
                    "name": "",
                    "value": dataK,
                    "label": {
                        "show": false,
                        "position": "center",
                        "color": "#fff",
                        "fontSize": 38,
                        "fontWeight": "bold",
                        "formatter": function(o) {
                            return dataK
                        },
                        normal: {
                            formatter: function(params){
                                return params.value + '人';
                            },
                            position: 'center',
                            show: true,
                            textStyle: {
                                fontSize: 24,
                                fontWeight: '400',
                                color: '#E7DC65'
                            }
                        }
                    }
                },
                { //画中间的图标
                    "name": "",
                    "value": 0,
                    "label": {
                        position: 'inside',
                        backgroundColor: {
                            image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAAAXNSR0IArs4c6QAABL5JREFUSEt1VU1vG1UUPfe+NzP+Tuyk+WqrFtpKkCxZov4BkJBYZMGeFQsQEiskUJCQWCGkLhC/gE0XrBBiCfwBFjQsWkojpWmcJrEd2xPb77170czYSZrSJ1l+o5k578y5955DeMVSBRW3tgh4MN3PHt7Q6b38nwjT6xfBLr0EFKAZIBjbYDR6ph0ZZq4RUUqqFRUZ6PJpLSCFYB0CZL8tvXzIC+CqW5yDPjoy7Xpik6QW2fEgZsOWHVnAkipEYxfEG+dLiRuPB265P/a4ve+BDSXayg7L1xn4GfAT2M7caRI7U3IiZatSZsslH0wEAkMh1gQnXkae+NSST11sxs1eeYyb8NlXzA7IwadSGOz2om5tLkmCq3pIXR03DIeGqFYJVCKAlTmohDHDDIJSnyz1DCb9ia2k812MigO2QibRFHzT4NGK7SxUSiWxteD8PAwWoLxIZK7baO4uEN0BmRpU+sDkoXMnv0H9HkgOEXBkItsdsR80j9JRJhHR/ZBpmBXQPH+OUgXDmnpqIjJLFHSNbesdjqqbpJS8IGLeG5r6cHJfXe9XNbSnhDaL76aoDq5cwShnn2v96Cg6KS1UNR7Nk5ol5nDdmOb7bKofzEpTFCdDzXZ6tgt+8GOQ3k8ivKsUDpCgM/d8mOL2giPVTYNnG8nQDhsq0SIRrhJFb5l44SsA9oXOnWLn8Jr3N1TVeXf0BdT/qYqnxO6w6qsnWH0wzsEPD1+rVCfRvHJYEUM3rJn/mDi+e95MZ0hT/oR8bnJ0QGX8hw/dexx0h8TsD2PXXVz8NxuKLdvpnFZ5ErWYwhoDrxvT+hbMV851VlBW+wLrfBXaZ/QPgj/+TIDHomZPYnfcbJaHOXi3ixpN/IIhd1XBtyI7/z1ApZnMU4KXjKLQvlg6cr77EUH+CRo91dgezc9jcAF81GKiqzlzW7+nSo384yljdmHaCqHPCjvl3pFw8mnBXJ9KpEdnzI+PUamMXXPCWGXoTbalL5nMmwVE1hmFHjnXWTULwyoKC/3L++HXArMTC56lSdRptZBpvmna7RuluuE5VbskQteJ+T3D0YdnHjFV4GXrK4oaxP2gwf/MTLtE/qAfpLe8vDMq+vwJ4n7SryGKW6SyQso3mOPPAbxRuM9M32lFzx0pa8W/Vdw3SrKjxPtwk+P6uD7ATUyKCd3eio5XUCojbYinBRCtKvgOk/kEwK0MO5N+NkazLlLVhyrhOwI9BsI+G3t4SlG/tY8R1reyIcpe3WTsXov7VKqINY3I+BaUlwKwaoB3CfS2EpbP2kVpX4HfBfILQ/aJ+GDi5dgE6td1lOLa7gS4L1Pjynx8z7TbjbgiWhYu1y3LnAY0lXWOgTqUWmSkIUo9UnQE6JNolwx3vXCP5bSfMp0uL59MgLWQ2e5FyyVsw7YXBlHFRyVLXPGJVI1qNaiWSSgmAudhwToxZNJAmtoxD71Kmlo3Wj6qOaznlpun0oWwmMqzvWHQhO2UTqNoEhITkmRiKWaGBYWsM0VEfeyNC2Y8zoNiVHZY3XMZ44txdynmLuVnE/YwSo21FWOGYzPTPFST4H0aFl0loAP/qhx9KaAvJNM09TcI2CNsr50/u76nwJoCDzTLzf8L5wznP9Jjnz2WM45FAAAAAElFTkSuQmCC'
                        },
                        width: 25,
                        height: 25,
                        borderRadius: 30,
                        padding: 25
                    }
                }, { //画剩余的刻度圆环
                    "name": "",
                    "value": maxK - dataK,
                    "label": {
                        show: false
                    }
                }
            ]
        }]
    }