圆环图

描述:当前是关于Echarts图表中的 饼图 示例。
 
            option= {
                title: {
                    text: 600,
                    x: 'center',
                    y: 'center',
                    textStyle: {
                        fontWeight: 'normal',
                        color: '#FFFFFF',
                        fontSize: '20'
                    },
                    subtext: '检查总数',
                    subtextStyle: {
                        fontSize: 14,
                        color: '#FFFFFF',
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['60%', '88%'],
                        center: ['50%', '50%'],
                        data: [
                            { value: 500, name: '合格数', itemStyle: { color: '#45E2BE' } },
                            { value: 100, name: '不合格数', itemStyle: { color: '#FECB00' } }
                        ],
                        itemStyle: {
                            borderColor: '#ffffff',
                            borderWidth: 8
                        },
                        startAngle: 100, // 设置起始角度
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label: {
                            show: true,
                            fontSize: 14,
                            color: '#95B4C9',
                            formatter: function (params) {
                                // params 参数包含当前数据项的信息
                                var name = params.name; // 获取数据项的名称
                                var value = params.value; // 获取数据项的数值
                                // 自定义标签的内容格式
                                return name + '\n' + '\n' + value;
                            },
                        }
                    },
                    {
                        name: '内边框',
                        type: 'pie',
                        tooltip: {
                            show: false
                        },
                        center: ['50%', '50%'],
                        radius: ['50%', '50%'],
                        label: {
                            show: false // 不展示data中的value和name
                        },
                        data: [
                            {
                                value: 1, // 此处的值无所谓是多少
                                name: '', // 因为不展示label,可不填
                                itemStyle: {
                                    // 边框样式,浅蓝色,颜色可自行修改
                                    borderWidth: 10, // 边框宽度
                                    borderColor: '#021A95' // 边框颜色
                                }
                            }
                        ]
                    }
                ]
            }