ECharts来自定义仪表盘

最新推荐文章于 2024-08-05 11:08:01 发布

A_Qyp

最新推荐文章于 2024-08-05 11:08:01 发布

阅读量2.6k

点赞数 1

分类专栏： EChatrs 文章标签： javascript 前端

本文链接：https://blog.csdn.net/qyp_1/article/details/110648060

版权

EChatrs 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言

首先呐，我先介绍一下这个demo，是公司要求我来做一个额度指针转盘，这个东西也是非常的炫酷啊，难度也是有的，当时我做的时候也花了时间，但是做出来效果是非常的满意的，下面，我来给大家一步一步讲解。

一、上效果图

在这里插入图片描述
就是这个样子的，下面开始讲解这个东西是怎么实现的

二、demo解析

这个是分为两部分，一个就是Echarts的图表，一个就是中间的数字，它是滚动的，就是一个简单的数字滚动，本来这篇文章是不该又这个数字滚动的，就是专门来讲这个图表的，但是我懒的删了，就直接都说了吧，万一有小伙伴需要的话就不用自己再去找了，直接一套下来了

三、图表解析

这个还是有些复杂的，有两个半圆圈，我之前的思路是通过css给外面的圈加，但是真的是异想天开，于是就用了两个图表，因为常用ECharts的都知道series这个属性，它默认是写一个表格的熟悉，但是给它在拼接一对象，他就可以展示两个图表，就通过这个道理，然后我就一直调一直调，终于是调出来了
这个ECharts里面的属性有点多，这篇文章就只是给大家来看这个功能的，所以属性这一块是几乎不怎么将的，但是我的代码里面都是有注释的，大家在看看文档，就懂了。

四、上代码！

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
    <script>
        var d = document.documentElement;
        var cw = d.clientWidth || 750;
        document.documentElement.style.fontSize = (cw / 750 * 100) + 'px';
    </script>
    <style>
        .mainc {
            position: relative;
            background: #F06A64;
            padding-top: 30px;
        }
        
        #root {
            position: absolute;
            top: 40%;
            left: calc(50% + 2px);
            transform: translate(-50%, 0);
            color: #fff;
            font-size: 42px;
            font-weight: 900;
            letter-spacing: 4px;
            font-family: Arial;
        }
    </style>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div class="mainc">
        <div id="main" style="height: 4.5rem;"></div>
        <div id="root">0</div>
    </div>
    <script type="text/javascript">
        function roll(total, idname, step) {
            let n = 0;
            return function() {
                n = (n + step) >= total ? total : (n + step);
                if (n <= total) {
                    document.getElementById(idname).innerHTML = n;
                }
            }
        }

        function start(index, idname, step, runtime = 3000) {
            let rolling = roll(index, idname, step);
            runtime = (runtime >= 300) ? runtime : 1000;
            for (let i = 0; i < (index / step); i++) {
                let timer = setTimeout(rolling, (runtime / index) * i * step)
            }
        }

        var myChart = echarts.init(document.getElementById('main'));
        var colorTemplate1 = [
            [1,
                "#F9B4B0"
            ]
        ];
        var colorTemplate2 = [
            [1,
                "#fff"
            ]
        ];
        // 指定图表的配置项和数据
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            grid: {
                left: 100
            },
            series: [{
                animationDuration: 3000,
                animationEasing: "cubicInOut",
                startAngle: 180,
                endAngle: 0,
                name: "单仪表盘示例",
                type: "gauge", // 系列类型
                selectedMode: 'single',
                radius: '120%',
                center: ["50%",
                    "65%"
                ],
                markPoint: {
                    symbol: 'circle',
                    symbolSize: 25,
                    data: [
                        //跟你的仪表盘的中心位置对应上，颜色可以和画板底色一样
                        {
                            x: 'center',
                            y: '65%',
                            itemStyle: {
                                color: '#FFF'
                            }
                        }
                    ]
                },
                title: { // 仪表盘标题。
                    show: true, // 是否显示标题,默认 true。
                    offsetCenter: [0,
                        '-66%'
                    ],
                    textStyle: {
                        fontSize: 16, // 文字的字体大小,默认 15。
                        fontWeight: 900
                    },
                    color: "#fff", // 文字的颜色,默认 #333。
                },
                clockwise: true,
                min: 0,
                max: 100,
                detail: {
                    show: false
                },
                pointer: {
                    // 仪表盘指针。
                    show: true, // 是否显示指针,默认 true。
                    length: "95%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
                    width: 5, // 指针宽度,默认 8。
                },
                axisTick: {
                    show: false
                },
                itemStyle: {
                    // 仪表盘指针样式。
                    color: "#FDC056", // 指针颜色，默认(auto)取数值所在的区间的颜色
                    opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                    zIndex: 2
                },
                splitLine: {
                    // 分隔线样式。
                    show: true, // 是否显示分隔线,默认 true。
                    length: 10, // 分隔线线长。支持相对半径的百分比,默认 30。
                    lineStyle: {
                        // 分隔线样式。
                        color: "#fff", //线的颜色,默认 #eee。
                        opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                        width: 3, //线度,默认 2。
                    }
                },
                axisLine: {
                    // 仪表盘轴线(轮廓线)相关配置。
                    show: false, // 是否显示仪表盘轴线(轮廓线),默认 true。
                    lineStyle: {
                        // 仪表盘轴线样式。
                        color: colorTemplate1, //仪表盘的轴线可以被分成不同颜色的多段。每段的  结束位置(范围是[0,1]) 和  颜色  可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
                        opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                        width: 10, //轴线宽度,默认 30。

                    }
                },
                axisLabel: {
                    // 刻度标签。
                    show: false, // 是否显示标签,默认 true。
                },
                data: [{
                    value: 100,
                    name: '额度最高达到',
                    selected: true
                }],
            }, {
                startAngle: 180,
                endAngle: 0,
                type: "gauge", // 系列类型
                selectedMode: 'single',
                radius: '130%',
                center: ["50%",
                    "65%"
                ],
                clockwise: true,
                min: 0,
                max: 100,
                detail: {
                    show: false
                },
                pointer: {
                    // 仪表盘指针。
                    show: false, // 是否显示指针,默认 true。

                },
                axisTick: {
                    show: false
                },
                itemStyle: {
                    // 仪表盘指针样式。
                    color: "#fff", // 指针颜色，默认(auto)取数值所在的区间的颜色
                    opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。

                },
                splitLine: {
                    // 分隔线样式。
                    show: false, // 是否显示分隔线,默认 true。
                },
                axisLine: {
                    // 仪表盘轴线(轮廓线)相关配置。
                    show: false, // 是否显示仪表盘轴线(轮廓线),默认 true。
                    lineStyle: {
                        // 仪表盘轴线样式。
                        color: colorTemplate2, //仪表盘的轴线可以被分成不同颜色的多段。每段的  结束位置(范围是[0,1]) 和  颜色  可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
                        opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                        width: 3, //轴线宽度,默认 30。
                    }
                },
                axisLabel: {
                    // 刻度标签。
                    show: false, // 是否显示标签,默认 true。
                },
            }]
        };
        myChart.setOption(option);
        start(100000, 'root', 4, ) // 基于准备好的dom，初始化echarts实例
    </script>
</body>

</html>

直接复制过去拿去用，代码自己应该都能研究明白

结语

这个demo还有点东西的，看明白了它，再碰到一些比较吊的ECharts，也都可以解决，希望这个东西对你有所帮助

A_Qyp

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
ECharts来自定义仪表盘

前言首先呐，我先介绍一下这个demo，是公司要求我来做一个额度指针转盘，这个东西也是非常的炫酷啊，难度也是有的，当时我做的时候也花了时间，但是做出来效果是非常的满意的，下面，我来给大家一步一步讲解。一、上效果图就是这个样子的，下面开始讲解这个东西是怎么实现的二、demo解析这个是分为两部分，一个就是Echarts的图表，一个就是中间的数字，它是滚动的，就是一个简单的数字滚动，本来这篇文章是不该又这个数字滚动的，就是专门来讲这个图表的，但是我懒的删了，就直接都说了吧，万一有小伙伴需要的话就不用
复制链接

扫一扫

专栏目录