echart--仪表盘

    var myCharts = echarts.init(document.getElementById(id));
    // var colors = ['#30BB57', '#FF9726', '#1A79FF']
    var colors = ['red', 'green', 'blue']
    var option = {
        tooltip: {
            show: false,
            formatter: '{a} <br/>{b} : {c}%'
        },
        //仪表盘起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
        series: [{
                radius: '80%',
                center: ['31%', '55%'],
                startAngle: 235,
                endAngle: 49,
                type: 'gauge',
                splitLine: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                detail: {
                    show: false
                },
                pointer: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: 2,
                        type: 'dashed',
                        color: [
                            [
                                1, new echarts.graphic.LinearGradient(
                                    0, 0, 1, 0, [{
                                            offset: 0,
                                            color: '#FF9626'
                                        },
                                        {
                                            offset: 1,
                                            color: '#E7B325'
                                        }
                                    ]
                                )
                            ],
                        ]
                    }
                }
            },
            {
                radius: '62%',
                center: ['31%', '55%'],
                startAngle: 235,
                endAngle: 49,
                type: 'gauge',
                splitLine: {
                    show: true,
                    length: 5,

                    lineStyle: {
                        color: '#FF9626',
                    }
                },
                axisLabel: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                detail: {
                    show: false
                },
                pointer: {
                    show: false
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        width: 2,
                        type: 'dashed',
                    }
                }
            },
            {
                name: '女生',
                type: 'gauge',
                detail: {
                    color: '#FF9626',
                    formatter: [
                        '{a|700人}',
                        '{b|女生}'
                    ].join('\n'),
                    rich: {
                        a: {
                            color: '#FF9626',
                            fontSize: 24,
                            fontWeight: 'bold',
                            lineHeight: 50
                        },
                        b: {
                            fontSize: 14,
                            color: '#C2D6E4'
                        },
                    },
                    offsetCenter: [0, '60%']
                },

                data: [{
                    value: 700,
                    name: ''
                }],
                radius: '70%',
                center: ['31%', '55%'],
                startAngle: 235,
                endAngle: 49,
                max: 1000,
                splitLine: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: 8,
                        color: [
                            [
                                1, new echarts.graphic.LinearGradient(
                                    0, 0, 1, 0, [{
                                            offset: 0,
                                            color: '#FF9626'
                                        },
                                        {
                                            offset: 1,
                                            color: '#E7B325'
                                        }
                                    ]
                                )
                            ],
                        ]
                    }
                },
                axisLabel: {
                    show: false,
                },
                axisTick: {
                    show: false
                },
                pointer: {
                    length: '50%',
                },

            },

            {
                radius: '95%',
                center: ['50%', '50%'],
                startAngle: 240,
                endAngle: -60,
                type: 'gauge',
                splitLine: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                detail: {
                    show: false
                },
                pointer: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: 2,
                        type: 'dashed',
                        color: [
                            [1, '#30BB57']
                        ]
                    }
                }
            },
            {
                radius: '78%',
                startAngle: 240,
                endAngle: -60,
                type: 'gauge',
                splitLine: {
                    show: true,
                    length: 5,

                    lineStyle: {
                        color: '#30BB57',
                    }
                },
                axisLabel: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                detail: {
                    show: false
                },
                pointer: {
                    show: false
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        width: 2,
                        type: 'dashed',
                        color: [
                            [0.2, '#91c7ae'],
                            [0.8, '#63869e'],
                            [1, '#c23531']
                        ]
                        //   color: 'pink', 
                    }
                }
            },
            {
                name: '学生总数',
                type: 'gauge',
                detail: {
                    formatter: [
                        '{a|1500人}',
                        '{b|学生总数}'
                    ].join('\n'),
                    rich: {
                        a: {
                            color: '#00C566',
                            fontSize: 24,
                            fontWeight: 'bold',
                            lineHeight: 50
                        },
                        b: {
                            fontSize: 14,
                            color: '#C2D6E4'
                        },
                    },
                    offsetCenter: [0, '60%']
                },
                data: [{
                    value: 60,
                    name: '',
                }],
                radius: '85%',
                startAngle: 240,
                endAngle: -60,
                max: 2000,
                splitLine: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: 8,
                        color: [
                            [
                                1, new echarts.graphic.LinearGradient(
                                    0, 0, 1, 0, [{
                                            offset: 0,
                                            color: '#00C566'
                                        },
                                        {
                                            offset: 1,
                                            color: '#34D07A'
                                        }
                                    ]
                                )
                            ],
                        ]
                    }
                },
                axisLabel: {
                    show: false,
                },
                axisTick: {
                    show: false
                },
                pointer: {
                    length: '50%',

                },

            },


            {
                radius: '80%',
                center: ['67%', '55%'],
                startAngle: 120,
                endAngle: -55,
                type: 'gauge',
                splitLine: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                detail: {
                    show: false
                },
                pointer: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: 2,
                        type: 'dashed',
                        color: [
                            [
                                1, new echarts.graphic.LinearGradient(
                                    0, 0, 1, 0, [{
                                            offset: 0,
                                            color: '#3088FE'
                                        },
                                        {
                                            offset: 1,
                                            color: '#3088FE'
                                        }
                                    ]
                                )
                            ],
                        ]
                    }
                }
            },
            {
                radius: '62%',
                center: ['67%', '55%'],
                startAngle: 120,
                endAngle: -55,
                type: 'gauge',
                splitLine: {
                    show: true,
                    length: 5,

                    lineStyle: {
                        color: '#3088FE',
                    }
                },
                axisLabel: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                detail: {
                    show: false
                },
                pointer: {
                    show: false
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        width: 2,
                        type: 'dashed',
                        // color: [
                        //     [0.2, '#91c7ae'],
                        //     [0.8, '#63869e'],
                        //     [1, '#c23531']
                        // ]
                        //   color: '#FF9626', 
                    }
                }
            },
            {
                name: '男生',
                type: 'gauge',
                detail: {
                    color: '#FF9626',
                    formatter: [
                        '{a|800人}',
                        '{b|男生}'
                    ].join('\n'),
                    rich: {
                        a: {
                            color: '#3088FE',
                            fontSize: 24,
                            fontWeight: 'bold',
                            lineHeight: 50
                        },
                        b: {
                            fontSize: 14,
                            color: '#C2D6E4'
                        },
                    },
                    offsetCenter: [0, '60%']
                },

                data: [{
                    value: 800,
                    name: ''
                }],
                radius: '70%',
                center: ['67%', '55%'],
                startAngle: 120,
                endAngle: -55,
                max: 1000,
                splitLine: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: 8,
                        color: [
                            [
                                1, new echarts.graphic.LinearGradient(
                                    0, 0, 1, 0, [{
                                            offset: 0,
                                            color: '#3088FE'
                                        },
                                        {
                                            offset: 1,
                                            color: '#3088FE'
                                        }
                                    ]
                                )
                            ],
                        ]
                    }
                },
                axisLabel: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                pointer: {
                    length: '50%',

                },

            }
        ],
    };
    var res = {
        ns1: 700,
        ns2: 800,
        count: 1500
    };
    if (!res.ns1 && !res.ns2 && !res.count) {
        $('#' + id).html(_err)
    } else {
        option.series[2].data[0].value = res.ns1;
        option.series[2].detail.formatter = [
                '{a|' + res.ns1 + '人}',
                '{b|女生}'
            ].join('\n'),
            option.series[2].max = res.count;
        option.series[5].data[0].value = res.count;
        option.series[5].detail.formatter = [
                '{a|' + res.count + '人}',
                '{b|学生总数}'
            ].join('\n'),
            option.series[5].max = res.count + res.count / 2;
        option.series[8].data[0].value = res.ns2;
        option.series[8].detail.formatter = [
                '{a|' + res.ns2 + '人}',
                '{b|男生}'
            ].join('\n'),
            option.series[8].max = res.count;
    }
    myCharts.setOption(option);
    window.addEventListener("resize", function () {
        myCharts.resize();
    });