Echarts案例：整一个炫酷一点的仪表盘

本文最后更新于：9 个月前

故事发生在几天前

公司要求做个仪表盘，大致UI是这样的

这不是为难我胖虎嘛，于是找遍整个全网也没找到相似的，只能自己手写一个。

然而，最开始是准备用极坐标写的

折腾了一上午发现极坐标做出的效果两头是360度的圆环，这使UI给的标注无法实现，于是我又开始研究仪表盘，官方给的实例倒是挺炫酷

当我感觉快找到希望时，却无法实现两端圆角

以及将刻度显示在数字外，在网上找资料发现也有同学遇到相同的问题，但是没找到解决方法

然而急中生智却被我想到了一个方法，将这二者合并一下

先简单画个仪表盘

设置一下他的属性，去掉指针，去掉表盘颜色，得到只有刻度和数字的表盘

之后将除了圆环以外的所有属性配置一下实现这样的效果

突然有内味了，这时我们加上极坐标环状图

然而二者最大角度不同，我们需要做一个换算，设计图中仪表盘的角度相当于极坐标的-30度到210度，二者偏移值是240度除360度

也就是极坐标得乘以2分之3（240分之360）才是真实仪表盘的值

经过换算后，实现以下效果

源码：https://gitee.com/DieHunter/myCode/tree/master/Echart/PolarGauge

同样需要引入Echarts
HTML：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .PolarGauge {
            margin: 100px auto;
            background: #000;
            width: 400px;
            height: 400px;
        }
    </style>
    <script src="./echarts.js"></script>
    <script src="./chart.js"></script>
</head>

<body>
    <div id="PolarGauge" class="PolarGauge"></div>
</body>

</html>

chart.js

var chart, option, data, timeTickId, timer, max;
window.onload = function init() {
    chart = echarts.init(PolarGauge); //初始化chart容器
    data = { //显示的数据
        "name": '馆藏量',
        "num": 1000
    }
    timer = 1.5 //刷新频率
    max = 1000 //最大馆藏量
    createPolarGauge() //配置chart
}

function createPolarGauge() {
    option = {
        angleAxis: {
            show: false,
            max: max * 3 / 2, //这里将极坐标最大值转换成仪表盘的最大值，(360度除以240度)
            type: 'value',
            startAngle: 210, //极坐标初始角度，从第一象限算起，大约在7-8点钟角度之间
            splitLine: {
                show: false //隐藏坐标
            }
        },
        barMaxWidth: 18, //圆环宽度
        radiusAxis: { //隐藏坐标
            show: false,
            type: 'category',
        },
        polar: { //设置圆环位置和大小
            center: ['50%', '50%'],
            radius: '296'
        },
        series: [{
                type: 'bar',
                data: [{ //上层圆环，用于显示真实数据
                    value: data.num,
                    itemStyle: {
                        color: { //图形渐变颜色方法，四个数字分别代表，右，下，左，上，offset表示0%到100%
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 1, //从左到右 0-1
                            y2: 0,
                            colorStops: [{
                                offset: 0,
                                color: '#CD48AE' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#2CABFC' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        },
                        shadowColor: 'rgba(255, 255, 255, 0.2)', //加白色阴影产生高亮效果
                        shadowBlur: 10
                    }
                }],
                barGap: '-100%', //柱间距离,用来将上下两层圆环重合
                coordinateSystem: 'polar', //类型，极坐标
                roundCap: true, //顶端圆角
                z: 2 //圆环层级，和zindex相似
            }, { //下层圆环，用于显示最大值
                type: 'bar',
                data: [{
                    value: max,
                    itemStyle: {
                        color: '#265195',
                        shadowColor: 'rgba(0, 0, 0, 0.2)', //加白色阴影产生高亮效果
                        shadowBlur: 5,
                        shadowOffsetY: 2
                    }
                }],
                barGap: '-100%', //柱间距离,用来将上下两层圆环重合
                coordinateSystem: 'polar', //类型，极坐标
                roundCap: true, //顶端圆角
                z: 1 //圆环层级，和zindex相似
            },
            { //仪表盘
                type: 'gauge',
                radius: '95%',
                startAngle: 210, //起始角度，同极坐标
                endAngle: -30, //终止角度，同极坐标
                max: max,
                splitNumber: 5, //分割线个数（除原点外）
                axisLine: { // 坐标轴线
                    show: false
                },
                pointer: {
                    show: false
                },
                axisLabel: {
                    // 坐标轴数字
                    textStyle: {
                        fontSize: 8,
                        color: "#13B5FC"
                    },

                },
                axisTick: { // 坐标轴标记
                    length: 10,
                    lineStyle: {
                        color: "#13B5FC"
                    }
                },
                splitLine: { // 分隔线
                    length: 5,
                    lineStyle: {
                        width: 1,
                    }
                },
                title: { //标题，显示'馆藏量'
                    textStyle: {
                        color: '#fff',
                        shadowColor: '#fff',
                        fontSize: 30
                    },
                    offsetCenter: ["0", '-35%'] //位置偏移
                },
                detail: { //仪表盘数值
                    formatter: function (params) {
                        var name = data.num.toString()
                        var list = ''
                        for (var i = 0; i < name.length; i++) {
                            list += '{value|' + name[i] + '}' //每个数字用border隔开
                            if (i !== name.length - 1) {
                                list += '{margin|}' //添加margin值
                            }
                        }
                        return [list]
                    },
                    offsetCenter: ["0", '5%'],
                    rich: { //编辑富文本样式
                        value: {
                            width: 34,
                            height: 42,
                            borderColor: '#02A0F0',
                            borderWidth: 2,
                            borderRadius: 5,
                            lineHeight: 1000,
                            fontSize: 36,
                            padding: [0, 0, 4, 0],
                            color: '#fff',
                            shadowColor: 'rgb(2,157,239)',
                            shadowBlur: 5
                        },
                        margin: {
                            width: 8,
                            height: 42,
                        }
                    }

                },
                data: [{
                    value: data.num,
                    name: data.name
                }]
            }
        ]
    }
    timeTick()
}

function setOption() { //更新数据
    data.num = parseInt(Math.random() * max)
    option.series[2].data[0].value = data.num
    option.series[0].data[0].value = data.num
    chart.setOption(option)
}


function timeTick() { //定时器,最好用延时加递归，如果用setInterval，容易造成堵塞
    if (timeTickId) {
        clearTimeout(timeTickId)
        timeTickId = 0
    }
    setOption()
    timeTickId = setTimeout(timeTick, 1000 * timer || 5000)
}

总结：编程即生活，有时候不能死磕到底，换个角度也许会更好