echars——仪表盘码表

本文介绍使用ECharts实现仪表盘效果的方法,通过调整参数展示不同数值,并改变颜色以区分数值范围。具体包括设置仪表盘的样式、刻度、指针等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

echars——仪表盘码表

 

  function echartsdataGA(xdata1) {
        xdata1=xdata1/1;
        if(xdata1<-25){
            xdata1=-25;
        }
        var pzjdM=(xdata1+25)/125;
        var  colorT="";
            if (xdata1/1>10){
                  colorT="#20EE42";
            }else{
                colorT="#F499A7";
            }

        $scope.barConfigGA = {
            theme: 'gauge',
            dataLoaded: true
        };

        $scope.optionGA = {
            grid: {
                left: 30,
                right: 30,
                top: 10,
                bottom: 10
            },
            series: [

                {
                name: '刻度',
                type: 'gauge',
                    center: ['50%', '55%'],
                radius: '82%',
                min: -25,
                max: 100,
                splitNumber: 10, //刻度数量
                startAngle: 220,
                endAngle: -40,
                axisLabel: {
                        show: true,
                        color: '#fff',
                        distance: -20,
                        fontWeight:'bold'
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: 1,
                        color: [[1, 'rgba(255,255,255,0.8)']]
                    }
                },//刻度标签。
                axisTick: {
                    show: true,
                    lineStyle: {
                        color: '#fff',
                        width: 1
                    },
                    length: -8
                },//刻度样式
                splitLine: {
                    show: true,
                    length: -15,
                    lineStyle: {
                        color: '#fff'
                    }
                },//分隔线样式
                detail: {
                    show: false
                },
                pointer: {
                    show: false
                }
            },
                {


                    type: 'gauge',
                    radius: '75%',
                    center: ['50%', '55%'],

                    splitNumber: 10, //刻度数量
                    startAngle: 220,
                    endAngle: -40,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            width: 20,
                            color:
                                [[pzjdM, colorT], [1, '#ffffff']]
                        }
                    },
                    //分隔线样式。
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    pointer: {
                        show: false
                    },
                    //仪表盘详情,用于显示数据。
                    detail: {
                        show: false,
                        offsetCenter: [0, 0],
                        color: '#ddd',
                        formatter: function (params) {
                            return params
                        },
                        textStyle: {
                            fontSize: 40
                        }
                    },
                    data: [{
                        value: ''
                    }]
                }
            ]
        };
        $scope.barOptionGA = $scope.optionGA;
        $scope.barConfigGA.dataLoaded = true;
    }

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值