const value_ze = 60
const value2_ze = 30
var myChart = echarts.init(document.getElementById('myChart'));
var option = {
title: {
text: `目标完成率`,
subtext: [`{a|${value_ze}}`, '{b|%}'].join(''),
itemGap: 10,
textStyle: {
fontSize: '14',
color: '#fff',
fontWeight: 500
},
subtextStyle: {
rich: {
a: {
fontSize: '32',
color: '#fff',
fontWeight: 500,
fontFamily: "numStyle"
},
b: {
fontSize: '14',
color: '#fff',
padding: [8, 0, 0, 6]
},
}
},
left: 'center',
top: '35%',
},
grid: {
top: '0%',
left: '0%',
right: '0%',
bottom: '0%',
containLabel: true
},
visualMap: {
show: false,
},
series: [
{
name: '',
type: 'pie',
radius: ['94%', '96%'],
center: ['50%', '50%'],
itemStyle: {
label: {
show: false,
},
},
hoverAnimation: false,
data: [
{
value: 100,
label: {
show: false,
},
itemStyle: {
normal: {
color: "#0b5d75"
}
},
}
],
},
{
type: 'pie',
radius: ['76%', '86%'],
center: ['50%', '50%'],
data: [
{
value: value_ze,
itemStyle: {
normal: {
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
{
offset: 0.25,
color: '#00dddd' // 0% 处的颜色
},
{
offset: 0.5,
color: '#2491ff' // 0% 处的颜色
},
{
offset: 0.75,
color: '#00b7ff' // 0% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
])
}
},
},
{ value: value2_ze, itemStyle: { color: 'rgba(34, 145, 255, 0.3)' } },
],
label: {
//将视觉引导图关闭
show: false,
},
// 初始化echarts的动画效果
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200;
}
}
]
};
myChart.setOption(option);
echarts——环形图
最新推荐文章于 2024-07-26 15:37:42 发布
该代码段展示了如何用Echarts库初始化一个图表,创建一个带有动态效果的饼图,其中包含两个环形层,内层固定颜色,外层使用径向渐变色,并有动画效果。主要涉及到的配置项包括数据值、样式、动画类型和延迟时间。
摘要由CSDN通过智能技术生成