需要引入的第三方插件:
(https://echarts.baidu.com/resource/echarts-liquidfill-latest/dist/echarts-liquidfill.min.js)
echarts配置:
var ratio = 40; //占比數(shù)值 總數(shù)為100
var ratioLength = 3; //波浪數(shù)量
var ratioArr = [];
var ratioColor = ['#1991d2', '#3831f3', '#1991d2']; //波浪內顏色
for (var ratioIndex = 0; ratioIndex < ratioLength; ratioIndex++) {
ratioArr.push(ratio / 100)
}
let angle =0;
var option = {
backgroundColor: '#003366',
title: {
text: ratio + '%',
textStyle: {
fontSize: 50,
fontFamily: 'Microsoft Yahei',
fontWeight: 'bold',
color: '#fff'
},
x: 'center',
y: 'center'
},
series: [{
type: 'liquidFill',
radius: '40%',
center: ['50%', '50%'],
color: ratioColor,
data: ratioArr,
backgroundStyle: {
// borderWidth: 1,
color: '#1f2c52'
},
label: {
normal: {
formatter: '',
}
},
outline: {
show: false,
}
},
{ //細的外圈
type: "pie",
center: ["50%", "50%"],
radius: ["48%", "50%"],
hoverAnimation: false,
data: [{
name: "",
value: 50,
labelLine: {
show: false
},
itemStyle: {
color: 'transparent'
},
emphasis: {
labelLine: {
show: false
},
itemStyle: {
color: 'transparent'
},
}
},
]
},
{ //粗的外圈
type: "pie",
center: ["50%", "50%"],
radius: ["45%", "61%"],
hoverAnimation: false,
zlevel: 2,
data: [
{
name: "",
value: 50,
labelLine: {
show: false
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#00e2fe'
}, {
offset: 1,
color: '#0707ff'
}]),
},
emphasis: {
labelLine: {
show: false
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#00e2fe'
}]),
},
}
},
]
},
{
name: "",
type: 'custom',
coordinateSystem: "none",
renderItem: function (params, api) {
return {
type: 'arc',
shape: {
cx: api.getWidth() / 2,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
startAngle: (5 + -angle) * Math.PI / 180,
endAngle: (115 + -angle) * Math.PI / 180
},
style: {
stroke: "#0CD3DB33",
fill: "transparent",
lineWidth: 1.5
},
silent: true
};
},
data: [0]
},
{
name: "",
type: 'custom',
coordinateSystem: "none",
renderItem: function (params, api) {
return {
type: 'arc',
shape: {
cx: api.getWidth() / 2,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
startAngle: (125 + -angle) * Math.PI / 180,
endAngle: (235 + -angle) * Math.PI / 180
},
style: {
stroke: "#0CD3DB33",
fill: "transparent",
lineWidth: 1.5
},
silent: true
};
},
data: [0]
},
{
name: "",
type: 'custom',
coordinateSystem: "none",
renderItem: function (params, api) {
return {
type: 'arc',
shape: {
cx: api.getWidth() / 2,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
startAngle: (245 + -angle) * Math.PI / 180,
endAngle: (355 + -angle) * Math.PI / 180
},
style: {
stroke: "#0CD3DB33",
fill: "transparent",
lineWidth: 1.5
},
silent: true
};
},
data: [0]
},
{
name: "",
type: 'custom',
coordinateSystem: "none",
renderItem: function (params, api) {
let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2;
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.67;
let point = getCirlPoint(x0, y0, r, (0 + -angle))
return {
type: 'circle',
shape: {
cx: point.x,
cy: point.y,
r: 4.8
},
style: {
stroke: "#0CD3DB",
fill: "#0CD3DB"
},
silent: true
};
},
data: [0]
},
{
name: "",
type: 'custom',
coordinateSystem: "none",
renderItem: function (params, api) {
let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2;
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.67;
let point = getCirlPoint(x0, y0, r, (120 + -angle))
return {
type: 'circle',
shape: {
cx: point.x,
cy: point.y,
r: 4.8
},
style: {
stroke: "#0CD3DB",
fill: "#0CD3DB"
},
silent: true
};
},
data: [0]
},
{
name: "", //綠點
type: 'custom',
coordinateSystem: "none",
renderItem: function (params, api) {
let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2;
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.67;
let point = getCirlPoint(x0, y0, r, (240 + -angle))
return {
type: 'circle',
shape: {
cx: point.x,
cy: point.y,
r: 4.8
},
style: {
stroke: "#0CD3DB",
fill: "#0CD3DB"
},
silent: true
};
},
data: [0]
},
]
}
//獲取圓上面某點的坐標(x0,y0表示坐標滞磺,r半徑衷畦,angle角度)
function getCirlPoint(x0, y0, r, angle) {
let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
return {
x: x1,
y: y1
}
}
let timeIntervalPie = setInterval(() => {
drawTimeIntervalPie()
}, 100);
function drawTimeIntervalPie() {
angle = angle - 12;
myChart.setOption(option, true);
}
timeIntervalPie;