echarts实现圆形进度条，圆环中心显示进度

效果图

在这里插入图片描述

环境

使用了框架（vue）,运行下面代码前需要先安装echarts。

命令通过 npm 安装 ECharts
npm install echarts --save
引入 ECharts
直接在项目代码中 var echarts = require('echarts'); 得到 ECharts。

上代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

<template>
<div>
<div id="fourth"></div>
</div>
</template>

<script>
// 引入 ECharts 主模块
var echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/pie");
// 引入提示框和标题组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
export default {
data() {
return {};
},
mounted() {
this.drawCharts();
},
methods: {
drawCharts() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("fourth"));
var e = 80;
var option = {
title: {
show: true,
text: e + "%",
x: "center",
y: "center",// 通过x,y将标题(进度)定位在圆环中心
textStyle: {
fontSize: "25",
color: "white",
fontWeight: "400",
fontFamily: "DINPro, DINPro-Regular",
},
},
tooltip: {
trigger: "item",
formatter: "{d}%",
show: false,
},
legend: {
orient: "vertical",
x: "left",
show: false,
},
series: {
name: "",
type: "pie",
radius: ["65%", "85%"],
avoidLabelOverlap: true,
hoverAnimation: false,
label: {
normal: {
show: false,
position: "center",
},
emphasis: {
show: false,
},
},
labelLine: {
normal: {
show: false,
},
},
data: [
{
value: e,
name: "",
itemStyle: {
color: "#6790D8",
},
},
{
value: 100 - e,
name: "",
itemStyle: {
color: "transparent",
},
},
],
},
};
myChart.setOption(option);
},
},
};
</script>

巧妙的思路

1.将进度值提到外面，在data中通过e和100 - e，巧妙实现进度条效果。
2.把另一个不需要显示的柱条颜色设为透明transparent，就完美的实现我们的圆形进度条了。

1	var e = 80;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

data: [
{
value: e,
name: "",
itemStyle: {
color: "#6790D8",
},
},
{
value: 100 - e,
name: "",
itemStyle: {
color: "transparent",
},
},
],

备注：title的x和y属性没有在现在的echarts官方文档中找到，不过不影响使用，有找到的同学可以call我。

参考

用echarts画圆环图，显示进度条效果_龙马的猫-CSDN博客 https://blog.csdn.net/baidu_39169957/article/details/80567332