Echarts圆环,初始化时进度条效果
let value = 80; //值 let valuetxt = value + '%'; let values = 100 - value; let endA = 100 - value; option = { backgroundColor: '#051F54', title: { text: '{a|' + valuetxt + '}', x: 'center', y: 'center', textStyle: { rich: { a: { fontSize: 18, color: '#FF7123' } } } }, series: [{ name: "", type: "gauge", animationThreshold: false, radius: "50%", center: ['50%', '50%'], startAngle: 90, endAngle: endA, axisLabel: { show: false }, pointer: { show: false }, detail: { show: false }, data: [{ value: 1, name: "" }] }, { name: "", type: "pie", radius: ["40.28%", "54.68%"], center: ['50%', '50%'], startAngle: 270, z: 4, label: { normal: { show: false } }, data: [{ value: value, name: "", label: { normal: { show: false } }, itemStyle: { color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: 'red' }, { offset: 1, color: 'red' }]) } }, { value: values, name: "", label: { normal: { show: false } }, itemStyle: { normal: { color: "transparent" } } } ] }, { type: 'pie', name: '内层细圆环', animationThreshold: false, radius: ['40%', '55%'], itemStyle: { normal: { color: '#ddd' } }, label: { show: false }, data: [100] } ] };
注意:tilte可以是个数组也可以是个对象。数组时,可以有多个对象。
FUCKING FRONT-END DEVELOPMENT