echars——仪表盘码表

最新推荐文章于 2024-05-17 17:05:12 发布

zhangyufeng0126

最新推荐文章于 2024-05-17 17:05:12 发布

阅读量864

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML

本文链接：https://blog.youkuaiyun.com/zhangyufeng0126/article/details/82768197

HTML 专栏收录该内容

30 篇文章

订阅专栏

本文介绍使用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;
    }