分享自己公司项目类似的一个案例，用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)
}
}
原文地址：https://blog.csdn.net/time_____
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。