ecarts 仪表盘图表改造记录

最新推荐文章于 2025-08-05 15:21:50 发布

banzhuanren1

最新推荐文章于 2025-08-05 15:21:50 发布

阅读量84

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 javascript echarts

本文链接：https://blog.youkuaiyun.com/banzhuanren1/article/details/147337585

var value = 6
var max = 10
var startAngle= 225
var endAngle = -45


option = {
    angleAxis:{
        axisLine: {
            show: false,
        },
        axisLabel: {
            show: false,
        },
        splitLine: {
            show: false,
        },
        axisTick: {
            show: false,
        },
        min:0,
        max:max,
        startAngle:startAngle,
        endAngle:endAngle
    },
    radiusAxis:{
        type:'category',
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false,
        },
        axisLabel: {
            show: false,
        }, 
    },
    polar:{
        radius:"93%",
        center:['50%','50%']
    },
    graphic:[
        {
            type:'text',
            left:'center',
            top:'41%',
            silent:true,
            style:{
                text:'111',
                fontSize:28,
                fontWeihgt:600,
                fill:'#303133',
                align:'center'
            }
        },
           {
            type:'text',
            left:'center',
            top:'55%',
            silent:true,
            style:{
                text:'标题',
                fontSize:28,
                fontWeihgt:600,
                fill:'#303133',
                align:'center'
            }
        },
    ],
    series: [
        {
            type:'bar',
            data:[,,value],
            z:1,
            coordinateSystem:'polar',
            barMaxWidth:24,
            roundCap:true,
            color:'red',
            barGap:'-100%'
        },
        {
            type:'bar',
            data:[,,max],
            z:0,
            coordinateSystem:'polar',
            barMaxWidth:24,
            roundCap:true,
            color:'yellow',
            barGap:'-100%'
        },
        {
            type: "gauge",
            radius:'68%',
            startAngle:startAngle,
            endAngle:endAngle,
            axisLine: {
                lineStyle: {
                    width:30,
                    color: [
                        [1, 'yellow']
                    ]
                }
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: false,
            },
            axisLabel: {
                show: false,
            },
            pointer: {
                show: false,
            },
            detail: {
              show:false
            },
            z:2
        }
    ]
}

效果如下