Echarts笔记——仪表盘（1）

最新推荐文章于 2024-05-15 16:53:15 发布

寧三一

最新推荐文章于 2024-05-15 16:53:15 发布

阅读量2.2k

点赞数 3

分类专栏： echarts 文章标签：数据可视化 echarts js

本文链接：https://blog.csdn.net/weixin_51967583/article/details/115350257

版权

echarts 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

Echarts笔记——仪表盘（1）

1. 仪表盘类型（ gauge ）。

2. series常用配置：

axisLine: 仪表盘轴线相关配置
pointer: 仪表盘指针
axisTick: 刻度样式
axisLabel：标签样式
splitLine：分割线样式
anchor: 表盘中指针的固定点
detail：仪表盘详情，用于显示数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仪表图</title>
    <script src="../../js/echarts.min.js"></script>
    <script src="../../js/jquery.min.js"></script>
</head>
<body>
<div id="main" style="height: 800px;width:1800px"></div>
<script type="text/javascript">

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"))
    $(function (ec) {
        var option = {
            title: {
                text: '仪表盘',
                left: "45%",
                textStyle: {     // 标题文本样式
                    fontSize: 40
                }
            },
            series: [
                {
                    type: 'gauge',       // 仪表盘
                    data: [18],
                    min: -10,   // 刻度最小值
                    max: 40,       // 刻度最大值
                    splitNumber:10,     // 刻度数值分割
                    axisLine: {      // 仪表盘轴线相关配置
                        show: true,     // 是否显示仪表盘轴线
                        lineStyle: {
                            width: 60,
                            color: [
                                [0.4, '#f8952f'],
                                [0.5, '#fdf816'],
                                [0.7, '#a2cd46'],
                                [1, '#478fd5']
                            ]
                        }
                    },
                    pointer: {      //仪表盘指针
                        show: true,
                        length: "50%",      // 指针长度
                        width: 10,          // 指针宽度
                        itemStyle: {     // 仪表盘样式
                            color: '#606262', // 指针颜色，默认取数值所在的区间的颜色
                        }
                    },
                    axisTick: {     // 刻度样式
                        show: false,  // 是否显示刻度
                    },
                    axisLabel: {     // 标签样式
                        show: true,   // 是否显示标签
                        distance: 80,    // 标签与刻度线的距离
                        formatter: "{value}°C",
                        color: 'black',     // 文字颜色
                        fontSize: 18        // 文字大小
                    },
                    splitLine: {        // 分割线样式设置
                        show: false,  // 是否显示分割线
                    },
                    anchor: {      // 表盘中指针的固定点
                        show: true,      // 是否显示固定点
                        showAbove: true, // 固定点是显示在指针上面、
                        size: 18,
                    },
                    itemStyle: {
                        color: 'black'
                    },
                    detail: {      // 仪表盘详情，用于显示数据
                        show: true,      // 是否显示详情
                        color:'black',
                        formatter: "{value}°C",
                    }
                },

            ]
        };
        myChart.setOption(option)
    })
</script>
</body>
</html>

寧三一

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
Echarts笔记——仪表盘（1）

Echarts笔记——仪表盘（1）1. 仪表盘类型（gauge ）。2. series常用配置：axisLine: 仪表盘轴线相关配置 pointer: 仪表盘指针 axisTick: 刻度样式 axisLabel：标签样式 splitLine：分割线样式 anchor: 表盘中指针的固定点 detail：仪表盘详情，用于显示数据<!DOCTYPE html><html lang="en"><head> <meta c.
复制链接

扫一扫