Echarts仪表盘刻度线和标签配置

 该案例只做参考

步骤：

1.首先设置好盒子的宽高

demo页面

 css页面

 2. 该方法在进入页面时加载

 3. methods方法：

// 待处理阈值实时监听
handleRefGauge1() {
    const refGauge1 = this.$refs.refGauge1;
    this.initCharts(refGauge1, {
        //图表位置
        grid: {
            top: '2%',
            left: '2%',
            right: '2%',
            bottom: '10%'
        },
        title: [{
            //标题
            text: 'CPU利用率',
            left: 'center',
            top: '80%',
            textStyle: {
             //标题样式
                color: '#fff',
                fontSize:12,
                fontWeight: 600,
            }
        }],
        series: [
            {
                type: 'gauge',
                min: 0,//起始最小刻度值
                max: 200,//最大刻度值
                splitNumber: 10,//分隔份数
                axisLine: {
                    lineStyle: {
                        width: 3,  //仪表盘宽度
                        color: [
                            [0.2, '#228b22'],
                            [0.8, '#0099ff'],
                            [1, '#F1060B']
                        ],
                    }
                },
                radius: '85%',//仪表盘大小
                markPoint: {
                    // 仪表盘指针圆
                    animation: false,
                    silent: true,
                    data: [{
                        x: '50%',
                        y: '50%',
                        symbol: 'circle',
                        symbolSize: 10, //指针中心圆大小
                        itemStyle: {
                            color: '#0099ff'
                        },
                    }],
                },
                pointer: {
                    // 仪表盘指针
                    //icon:'none',
                    width:3,//指针的宽度
                    length:"60%", //指针长度，按照半圆半径的百分比
                    shadowColor : '#ccc', //默认透明
                    shadowBlur: 5
                },
                axisTick: {
                //刻度样式
                    distance: 0, //刻度线距仪表盘的距离
                    length: 5, //刻度线长度
                    lineStyle: {
                        color: '#228b22',
                        width: 1  //刻度线线宽
                    }
                },
                //分隔线样式
                splitLine: {
                    distance: 0, //分隔线与轴线的距离
                    length: 3,
                    lineStyle: {
                        color: '#228b22',
                        width: 1
                    }
                },
                axisLabel: {
                   //刻度标签
                    color: '#3488db',
                    distance: 10,  //标签与刻度线的距离
                    fontSize: 8
                },
                detail: {
                //仪表盘详情，用于显示数据
                    formatter: '{value}',
                    color: '040755',
                    fontSize: 12, //数据字体大小
                    top:'60%'
                },
                data: [{
                    value: 60,
                    top:'60%'  //数据值位置
                }]
            },
        ]
    })
},
复制