梁洁--20221116-js第十四天

var myChart21 = echarts.init(box21);
        var myChart23 = echarts.init(box23);
        var myChart22 = echarts.init(box22);

        var option21;

        option21 = {
            tooltip: {
                formatter: '{a} <br/>{b} : {c}%'
            },
            series: [
                {
                    name: '单例',
                    type: 'gauge',

                    progress: {
                        show: true
                    },
                    title: {
                        offsetCenter: [0, "90%"],
                        fontSize: 18,
                        color: '#55bcd5',
                    },
                    detail: {
                        valueAnimation: true,
                        formatter: '{value}',
                        fontSize: 5,
                        offsetCenter: [0, "5%"],
                    },
                    data: [
                        {
                            value: 50,
                            name: '成绩评定'

                        }
                    ]
                }
            ]
        };

        option21 && myChart21.setOption(option21);
        option21 && myChart22.setOption(option21);
        option21 && myChart23.setOption(option21);

        //    柱状图

        let myChart3 = echarts.init(box3);
        var option3;

        option3 = {
            legend: {
                show: true,
                data: ['一般', '较差'],
                right: "20%",
                width: '20',
                color: '#000',
                backgroundColor: '#f0f',
                itemHeight: 30,
                itemWidth: 30,
                // 设置内边距为 5
                padding: 5,
                // 设置上下的内边距为 5，左右的内边距为 10
                padding: [5, 10],
                // 分别设置四个方向的内边距
                padding: [
                    5,  // 上
                    10, // 右
                    5,  // 下
                    10, // 左
                ]
            },

            barWidth: "30"
            ,
            xAxis: {
                type: 'category',
                data: ['一般', '较差', '一般', '较差', '一般']
            },
            yAxis: {
                type: 'value'
            },
            series: [

                {

                    data: [

                        {
                            value: 230,
                            itemStyle: {
                                color: 'orange'
                            }
                        },
                        {
                            value: 170,
                            itemStyle: {
                                color: 'blue'
                            }
                        },
                        {
                            value: 280,
                            itemStyle: {
                                color: 'orange'
                            }
                        },
                        {
                            value: 130,
                            itemStyle: {
                                color: 'blue'
                            }
                        },
                        {
                            value: 270,
                            itemStyle: {
                                color: 'orange'
                            }
                        }

                    ],
                    type: 'bar'
                }
            ]

        };

        option3 && myChart3.setOption(option3);

        // 仪表盘
        var myChart41 = echarts.init(box41);
        var myChart42 = echarts.init(box42);
        var myChart43 = echarts.init(box43);
        var myChart44 = echarts.init(box44);

        option41 = {
            tooltip: {
                formatter: "{a} <br/>{b} : {c}%"
            },

            series: [
                {
                    name: '业务指标',
                    type: 'gauge',
                    // detail: { formatter: '{value}%' },
                    // data: [{ value: 50, name: '完成率',fontSize:12}],
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: [
                                [1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    {
                                        offset: 0.1,
                                        color: "#FFC600"
                                    },
                                    {
                                        offset: 0.6,
                                        color: "#30D27C"
                                    },
                                    {
                                        offset: 1,
                                        color: "#0B95FF"
                                    }
                                ])
                                ]
                            ]

                        }
                    }

                }
            ]
        };

        setInterval(function () {
            option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
            myChart.setOption(option, true);
        }, 2000);


        option41 && myChart41.setOption(option41);
        option41 && myChart42.setOption(option41);
        option41 && myChart43.setOption(option41);
        option41 && myChart44.setOption(option41);