千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

当前位置:首页  >  技术干货  > Echarts仪表盘详解

Echarts仪表盘详解

来源:千锋教育
发布人:xqq
时间: 2023-11-22 08:37:57 1700613477

Echarts是一个数据可视化的JavaScript库,其中包含了仪表盘这样一个实用的工具。仪表盘通过简洁明了的视觉效果展示数据,被广泛地应用于数据统计、数据监控等领域。本文将从多个方面对Echarts仪表盘进行详细阐述。

一、Echarts仪表盘工具

Echarts提供了丰富的仪表盘工具,允许用户根据具体需求进行参数配置、样式调整等操作,从而达到更好的可视化效果。下面我们就先来了解下Echarts提供的仪表盘工具。

以下代码显示如何调用Echarts仪表盘工具:


// 引入echarts
import echarts from 'echarts'

// 使用Echarts仪表盘工具
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
    // 配置项
});

通过setOption方法,可以配置Echarts仪表盘的具体参数和样式,例如设置标题、设定刻度值、调整指针位置等等。

二、Echarts仪表盘刻度值位置调整

Echarts仪表盘中的刻度值可以通过position属性来进行位置调整,用户可以根据具体需求选择是否需要显示刻度值、以及位置的具体设定。

以下代码实现了将刻度值设定在仪表盘外侧,位置以整个Echarts容器的比例来进行设定:


myChart.setOption({
    series: [{
        type: 'gauge',
        // 其他配置项
        axisLabel: {
            distance: '-25%', // 刻度值位置
            formatter: '{value}', // 刻度值格式
            color: 'gray', // 刻度值颜色
            fontSize: 12 // 刻度值字体大小
        }
    }]
});

在axisLabel中,将distance属性设定为'-25%'即将刻度值放置于仪表盘外侧,此外还可以设定刻度值的格式、颜色以及字体大小等参数。

三、Echarts仪表盘内圈半径

在Echarts仪表盘的配置中,内圈半径也是一个需要用户考虑的重要参数。例如,通过设置内圈半径为0表示内部封闭区域的半径为0,完全展开的仪表盘将不再有封闭区域。

以下代码显示如何设置内圈半径为0:


myChart.setOption({
    series: [{
        type: 'gauge',
        // 其他配置项
        radius: '100%',
        min: 0,
        max: 100,
        splitNumber: 10,
        axisLine: {
            // 其他配置项
            lineStyle: {
                width: 10
            }
        },
        axisTick: {
            // 其他配置项
            length: 15,
            lineStyle: {
                color: 'auto'
            }
        },
        splitLine: {
            // 其他配置项
            length: 20,
            lineStyle: {
                color: 'auto'
            }
        },
        pointer: {
            // 其他配置项
            width: 10
        },
        detail: {
            // 其他配置项
        },
        data: [{
            value: 50,
            name: '仪表盘'
        }]
    }]
});

在上述代码中,将radius设定为‘100%’表示内圈半径为0。另外还需要注意,当内圈半径为0时,最小值和最大值之间的区域不再是封闭的,因此需要特别注意防止误操作。

四、Echarts仪表盘配置

在Echarts仪表盘的配置中,较为重要的参数包括调节刻度间隔、调节刻度线颜色、调节数字的大小、调节仪表盘的大小等等。

以下代码展示了如何对Echarts仪表盘的基本配置进行设定:


myChart.setOption({
    series: [{
        type: 'gauge',
        // 其他配置项
        min: 0,
        max: 100,
        splitNumber: 10, // 刻度间隔
        axisLine: {
            // 其他配置项
            lineStyle: {
                color: [[1, 'gray']],
                width: 10,
                shadowBlur: 0
            }
        },
        axisTick: {
            // 其他配置项
            length: 15
        },
        splitLine: {
            // 其他配置项
            length: 20
        },
        pointer: {
            // 其他配置项
            length: '75%',
            width: 10
        },
        detail: {
            // 其他配置项
            textStyle: {
                fontSize: 30 // 数字大小
            }
        },
        data: [{
            value: 50,
            name: '仪表盘'
        }]
    }]
});

在上述代码中,我们设定了仪表盘的最大值和最小值、刻度间隔、刻度线颜色、数字大小以及指针长度、指针宽度等等参数。

五、Echarts仪表盘指针不转动

在Echarts仪表盘的参数配置中,还可以设定指针不动转动。当用户需要展示的数据为单一数值时,可以通过设置指针不动转动,使得呈现出来的结果更为直观明了。

以下代码展示了如何设定指针不动转动:


myChart.setOption({
    series: [{
        type: 'gauge',
        // 其他配置项
        min: 0,
        max: 100,
        splitNumber: 10,
        axisLine: {
            // 其他配置项
        },
        axisTick: {
            // 其他配置项
        },
        splitLine: {
            // 其他配置项
        },
        pointer: {
            // 其他配置项
            show: true,
            length: '80%',
            width: 10,
            radius: '100%',
            itemStyle: {
                borderWidth: 0
            }
        },
        detail: {
            // 其他配置项
        },
        data: [{
            value: 50,
            name: '仪表盘'
        }]
    }]
});

在上述代码中,我们将指针长度设定为‘80%’,并使用show属性来设定指针不动转动的效果。

六、Echarts仪表盘案例

以下是一个Echarts仪表盘的案例,通过对仪表盘的各个参数进行精细化调节,达到简洁美观的数据可视化效果:


myChart.setOption({
    series: [{
        type: 'gauge',
        // 其他配置项
        min: 0,
        max: 15000,
        splitNumber: 5,
        startAngle: 210,
        endAngle: -30,
        axisLine: {
            // 其他配置项
            lineStyle: {
                color: [
                    [0.8, '#1E90FF'],
                    [1, '#FF4500']
                ],
                width: 10,
                shadowBlur: 0
            }
        },
        axisTick: {
            // 其他配置项
            length: 10,
            lineStyle: {
                color: 'auto',
                width: 2
            },
        },
        splitLine: {
            // 其他配置项
            length: 15,
            lineStyle: {
                color: '#fff',
                width: 2
            }
        },
        pointer: {
            // 其他配置项
            length: '70%',
            width: 7
        },
        itemStyle: {
            // 其他配置项
            color: '#FF4500'
        },
        detail: {
            // 其他配置项
            offsetCenter: [0, '50%'],
            textStyle: {
                fontSize: 20
            }
        },
        data: [{
            value: 1234,
            name: '订单数'
        }]
    }]
});

在上述案例中,我们通过设置min和max属性来指定了仪表盘的最小值和最大值,设定了刻度间隔、刻度线颜色、数字大小、指针长度等等参数,并使用offsetCenter属性来设定数字的位置。通过这些细节的调整,可以让仪表盘更好地展示数据,提升可视化效果。

七、Echarts仪表盘大小设置

在Echarts仪表盘的配置中,还可以根据具体需求设定仪表盘的大小。通过调节半径大小,可以达到不同的可视化效果。

以下代码展示如何设定Echarts仪表盘大小:


myChart.setOption({
    series: [{
        type: 'gauge',
        // 其他配置项
        radius: '60%',
        axisLine: {
            // 其他配置项
            lineStyle: {
                width: 8,
                color: [[0.2, '#E6E6FA'], [0.8, '#7EC0EE'], [1, '#FFB6C1']]
            }
        },
        axisTick: {
            // 其他配置项
        },
        axisLabel: {
            // 其他配置项
            fontSize: 14
        },
        pointer: {
            // 其他配置项
        },
        detail: {
            // 其他配置项
            offsetCenter: [0, '50%'],
            fontSize: 30
        },
        data: [{
            value: 66.6
        }]
    }]
});

在上述代码中,我们使用radius属性来设定仪表盘的大小,从而达到更好的可视化效果。

八、Echarts仪表盘指针位置

Echarts仪表盘的指针位置是一个很关键的参数,通过设定不同的位置可以达到各种不同的可视化效果。

以下代码展示如何设定Echarts仪表盘指针位置,使其在左上角显示:


myChart.setOption({
    series: [{
        type: 'gauge',
        // 其他配置项
        pointer: {
            // 其他配置项
            length: '50%',
            width: 10
        },
        detail: {
            // 其他配置项
            offsetCenter: [0, '50%']
        },
        data: [{
            value: 60,
            // 指针位置
            pointer: {
                offsetCenter: [-100, -100]
            }
        }]
    }]
});

在上述代码中,我们通过设定pointer的offsetCenter属性来调节指针的位置,使其在左上角显示。

九、Echarts仪表盘刻度值设定

在Echarts仪表盘的参数配置中,还可以设定刻度值。通过设定刻度值的具体数值,可以让Echarts仪表盘更好地展示数据。

以下代码展示如何设定Echarts仪表盘刻度值:


myChart.setOption({
    series: [{
        type: 'gauge',
        // 其他配置项
        min: 0,
        max: 100,
        splitNumber: 10,
        axisLine: {
            // 其他配置项
            lineStyle: {
                color: 'auto',
                width: 2
            }
        },
        axisTick: {
            // 其他配置项
            length: 5,
            lineStyle: {
                color: 'auto',
                width: 2
            },
            show: true
        },
        splitLine            
声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。
10年以上业内强师集结,手把手带你蜕变精英
请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通
免费领取
今日已有369人领取成功
刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取
相关推荐HOT