码迷,mamicode.com
首页 > 其他好文 > 详细

报表仪表盘

时间:2020-02-27 01:17:54      阅读:119      评论:0      收藏:0      [点我收藏+]

标签:描述   type   mat   数据   echarts   距离   ext   spl   报表   

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);

 

报表仪表盘

标签:描述   type   mat   数据   echarts   距离   ext   spl   报表   

原文地址:https://www.cnblogs.com/kkvt/p/12370004.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!