Echarts仪表盘自定义数值样式

最新推荐文章于 2024-12-11 16:00:00 发布

原创最新推荐文章于 2024-12-11 16:00:00 发布 · 644 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

Web前端专栏收录该内容

9 篇文章

订阅专栏

本文详细描述了如何使用ECharts库创建一个带有自定义样式的数值gauge图表，包括设置起始和结束角度、范围、标签和指针。作者还引用了EChartsAPI文档来指导读者实现类似的需求样式。

需求描述

原图样式
在这里插入图片描述
需求样式

解决方案

{
    name: '数值',
    type: 'gauge',
    startAngle: 180,
    endAngle: 0,
    radius: '30%',
    center: ['50%', '55%'], // 默认全局居中  
    min: 0,
    max: 4,
    zlevel: 2,
    splitNumber: 0,
    axisLine: { // 坐标轴线  
        lineStyle: {
            color: [
                [1, ]
            ], // 属性lineStyle控制线条样式  
            width: '1%'
        }
    },

    axisLabel: { // 坐标轴小标记  
        show: false
    },
    splitLine: { // 分隔线  
        lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式  
            width: 0
        }
    },
    pointer: { // 分隔线 指针  
        show: 0
    },
    detail: {
        valueAnimation: true,
        formatter: '{title|50}' +' {value|家}',
        offsetCenter: [0, '-20%'],
        rich: { //特定样式
            title: {
                fontSize: 30,
                fontWeight: 'bolder',
                color:"#2EDEFF",
                verticalAlign: "bottom"
            },
            value: {
                fontSize: 16, 
                fontWeight: 'bolder',
                color: '#29CDED',
                verticalAlign: "middle"
            },
        },
    },
    data: [{
        name: "",
        value: 1.9
    }]
},