报表仪表盘

Posted 2021-03-07 kkvt

A

var myChart = echarts.init($("#cc_div").get(0));
            // 指定图表的配置项和数据
            option = {
                tooltip : {
                    formatter: "{a} <br/>{b} : {c}%"
                },
                series: [
                    {
                        type : "gauge",
                        //center: ["100%", "100%"], // 默认全局居中
                        radius : "100%",
                        //startAngle: 210,
                        //endAngle: -30,
                        name: ‘业务指标‘,
                        detail: {formatter:‘{value}%‘},
                        splitLine : { //分割线样式（及10、20等长线样式）
                            length : 10,
                            lineStyle : { // 属性lineStyle控制线条样式
                                width : 2
                            }
                        },
                        axisLine: {      //仪表盘轴线相关配置
                            show:true,
                            lineStyle: {
                                width:10,  //轴线宽度
                            },
                        },
                        axisTick : { //刻度线样式（及短线样式）
                            length : 10
                        },
                        axisLabel : { //表盘数字文字样式（及“10”、“20”等文字样式）
                            color : "black",
                            distance : 1, //文字离表盘的距离
                            fontSize : 10
                        },
                        pointer : { //指针样式
                            length: ‘68%‘,
                            width:3
                        },
                        detail: {//底部文字描述或指标数据样式
                            formatter : "{score|{value}%}",
                            offsetCenter: [0, "50%"],
                            height:0,
                            rich : {
                                score : {
                                    color : "#000",
                                    fontFamily : "微软雅黑",
                                    fontSize : 10
                                }
                            }
                        },
                        data: [{//数据
                            value: data,
                            label: {
                                textStyle: {
                                    fontSize: 12
                                }
                            },
                            //name: ‘完成率‘
                        }]
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);