Echarts案例：使用极坐标加柱状图实现类似Apple Watch上的运动环形效果

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

分享自己公司项目类似的一个案例，用Echarts中的Polar（极坐标或称为平面直角坐标系）和Bar（柱状图）实现的

大致效果是这样的

参照的是AntV中的https://antv-f2.gitee.io/zh/examples/gallery/fitness-ring的效果，只不过我是用Echarts实现的
首先需要引入Echarts.js,推荐用npm下载：npm install echarts
或直接用cdn托管：https://www.bootcdn.cn/echarts/
源码：https://gitee.com/DieHunter/myCode/tree/master/Echart/AppleWatch
以下是全部代码：

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;
        }

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

<body>
    <div id="chart_box" class="chart_box"></div>
    <script type="module">
        import MyChart from './MyChart.js'
        MyChart.getInstance(echarts,chart_box).createChart()//初始化入口函数
    </script>
</body>

</html>

JS：

export default class MyChart {
    constructor(_echart, _ele) {
        this.timeTickId = null //定时器id
        this.timer = 1.5 //更新数据频率
        this.option = null //当前echarts实例的属性
        this._echart = _echart //引入Echarts
        this._ele = _ele //案例的父元素
        this.myChart = null //当前echarts实例
        this.colorList = ['#14A5AB', '#88D903', '#E90B3A'] //上层环背景
        this.bgList = ['#183C3D', '#324214', '#40131D'] //下层环背景
        this.maxCount = 100 //圆环最大值,即转一圈的值
    }
    static getInstance() { //单例模式
        if (!MyChart._instance) {
            Object.defineProperty(MyChart, "_instance", {
                value: new MyChart(...arguments)
            })
        }
        return MyChart._instance;
    }
    createChart = () => {
        this.disposeChart() //创建前初始化chart实例，若有，则销毁
        this.myChart = this._echart.init(this._ele)
        this.option = {
            angleAxis: {
                show: false, //隐藏角度轴（圆心角）
                max: this.maxCount,
                startAngle: 90, //极坐标从第一象限开始，即平面直角坐标系,用时钟理解，0就是三点钟方向，这里我们从12点钟方向开始，也就是3点钟方向加90度
                splitLine: {
                    show: false //隐藏分隔线
                },
            },
            barMaxWidth: 50, //设置圆环最大宽度
            radiusAxis: {
                show: false, //隐藏径向轴（半径）
                type: 'category',
                data: ['A', 'B', 'C'] //传入每条圆环的径向值
            },
            polar: {
                radius: [30, 150] //总体的最小半径，最大半径
            },
            series: [{ //上层的圆环
                    type: 'bar',
                    data: [1, 2, 3], //初始值
                    coordinateSystem: 'polar', //设置类型为极坐标
                    roundCap: true, //柱状图末端呈现圆角
                    itemStyle: { //设置每一个圆环的颜色
                        color: (params) => {
                            return this.colorList[params.dataIndex]
                        }
                    },
                    animationEasing: 'bounceOut', //初始动画
                    barGap: '-100%', //柱间距离,用来将上下两种圆环重合
                    z: 200, //圆环层级，和zindex相似
                },
                { //下层的圆环
                    type: 'bar',
                    data: [this.maxCount, this.maxCount, this.maxCount],
                    coordinateSystem: 'polar',
                    roundCap: true,
                    itemStyle: { //设置每一个圆环的颜色
                        color: (params) => {
                            return this.bgList[params.dataIndex]
                        }
                    },
                    z: 100,
                    barGap: '-100%', //柱间距离,用来将上下两种圆环重合
                }
            ]
        };
        this.timeTick() //定时器入口
    }
    setOption = () => { //随机数刷新数据
        if (this.option) {
            this.option.series[0].data = this.option.series[0].data.map(item => {
                return Math.random() * this.maxCount
            })
        }
        this.myChart.setOption(this.option, true)
    }
    disposeChart = () => { //初始化chart实例
        if (this.myChart) {
            this.myChart.dispose()
            this.myChart = null
            this.option = null
        }
    }
    timeTick = () => { //定时器,最好用延时加递归，如果用setInterval，容易造成堵塞
        if (this.timeTickId) {
            clearTimeout(this.timeTickId)
            this.timeTickId = 0
        }
        this.setOption()
        this.timeTickId = setTimeout(this.timeTick, 1000 * this.timer || 5000)
    }
}