这里用到了echarts的liquidFill图表,需要加载liquidFill插件
npm i echarts-liquidFill --save
1. 在main.js入口文件中引入
也可通过script标签形式引入
<script src="http://echarts.baidu.com/resource/echarts-liquidfill-1.0.4/dist/echarts-liquidfill.js" type="text/javascript" charset="utf-8"></script>
2.option配置如下(可根据需要自行配置,大概的配置点已经注释出来了)
chart.setOption({
// backgroundColor: "#050038",
title: {
text: `总完成`,
left: "center",
top: "100",
textStyle: {
fontWeight: "normal",
fontSize: 20,
color: "rgb(0,0,0)"
},
subtext: `${this.progress.num}%`, //副标题
subtextStyle: {
fontWeight: "bold",
fontSize: 40,
color: "rgb(0,0,0)"
}
},
series: [
{
type: "liquidFill", // 图表类型
radius: "80%",
center: ["50%", "50%"],
data: [
this.progress.num / 100,
this.progress.num / 100,
this.progress.num / 100
], // data个数代表波浪数
backgroundStyle: {
borderWidth: 1,
color: "#F4F9FF"
},
label: {
normal: {
show: false, //不显示label 用副标题代替了
formatter: (0.5 * 100).toFixed(0) + "%",
textStyle: {
fontSize: 38,
color: "black"
}
}
},
color: [ //color一定要是个数组 ,每一项对应一个波浪,可以给每个波浪单独配置颜色
{
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 1,
color: "rgba(255,255,255,1)"
},
{
offset: 0,
color: "rgba(103,205,251,1)"
}
],
globalCoord: false
},
{
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 1,
color: "rgba(187,248,252,0.5)"
},
{
offset: 0,
color: "rgba(30,134,245,1)"
}
],
globalCoord: false
},
{
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 1,
color: "rgba(180,251,255,0.66)"
},
{
offset: 0,
color: "rgba(128,122,254,0.66)"
}
],
globalCoord: false
}
],
outline: {
show: false
}
},
//外层线
{
type: "pie",
center: ["50%", "50%"],
radius: ["92%", "93%"], //外层线粗细
hoverAnimation: false,
data: [
{
name: "",
value: 100,
labelLine: {
show: false
},
itemStyle: {
color: "#67CDFB"
},
emphasis: {
labelLine: {
show: false
},
itemStyle: {
// color: "#5886f0"
}
}
}
]
},
//进度线
{
type: "pie",
center: ["50%", "50%"],
radius: ["90%", "95%"], //进度线粗细
hoverAnimation: false,
data: [
{
name: "",
value: this.progress.num, //进度
labelLine: {
show: false
},
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 2,
colorStops: [
// !! 在此添加渐变过程色 !!
{ offset: 0, color: "#33E2ED" },
{ offset: 1, color: "#807AFE" }
]
}
},
emphasis: {
labelLine: {
show: false
},
itemStyle: {
// color: "#5886f0"
}
}
},
{
//画剩余的刻度圆环
name: "",
value: 100 - this.progress.num,
itemStyle: {
color: "rgba(0,0,0,0)"
},
label: {
show: false
},
labelLine: {
show: false
},
emphasis: {
labelLine: {
show: false
},
itemStyle: {
color: "#050038"
}
}
}
]
}
]
});