var myChart = echarts.init(document.getElementById('main13'));
var option = {
series: [
{
type: 'gauge',
startAngle: 180,
endAngle: 0,
center: ['50%', '85%'],
radius: '160%',
min: 0,
splitNumber: 8,
axisLine: {
lineStyle: {
width: 6,
color: [
[0.25, '#FF6E76'],
[0.5, '#FDDD60'],
[0.75, '#58D9F9'],
[1, '#7CFFB2']
]
}
},
pointer: {
icon: '../../assets/images/向上.png',
length: '12%',
width: 4,
// offsetCenter: [0, '0%'],
itemStyle: {
color: 'auto'
}
},
axisTick: {
length: 12,
lineStyle: {
color: 'auto',
width: 2
}
},
splitLine: {
length: 20,
lineStyle: {
color: 'auto',
width: 5
}
},
axisLabel: {
color: 'inherit',
distance: 10,
fontSize: 'calc(100vw *18 / 1920)'
},
title: {
offsetCenter: [0, '-10%'],
fontSize: 'calc(100vw *28 / 1920)',
color: 'inherit'
},
detail: {
fontSize: 'calc(100vw *28 / 1920)',
offsetCenter: [0, '-35%'],
valueAnimation: true,
color: '#7CFFB2'
},
data: [
{
value: 80,
name: '34%'
}
]
}
]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option, true);
window.addEventListener("resize", () => {
myChart.resize();
});
var myChart = echarts.init(document.getElementById('main14'));
var option = {
tooltip: {
trigger: 'item'
},
title: {
text: '',
left: 'center',
top: 'center'
},
series: [
{
type: 'pie',
data: [{ value: 335, name: '一年以上' }, { value: 234, name: '9-12个月' }, { value: 1548, name: '6-9个月' }, { value: 1548, name: '3-6个月' }, { value: 1548, name: '3个月以下' }],
radius: ['20%', '80%'],
center: ['50%', '55%'],
label: {//柱状图显示数值
show: true,
// position: 'top',
valueAnimation: true,
color: 'white',
fontSize: ' calc(100vh * 12 / 1080)',
textAlign: "center",
formatter: function (params) { //标签内容
return params.name + '\n' + params.value
},
},
// emphasis: {
// label: {
// show: true,
// }
// },
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option, true);
window.addEventListener("resize", () => {
myChart.resize();
});