2021-06-06 忘是亡心i 2022-10-05 03:56 147阅读 0赞 // 数据进度值 var dataArr = 40.07; var option = \{ backgroundColor: “\#FFFFFF”, title: \{ show: true, text: ‘任务进度’, x: ‘50%’, y: ‘57%’, z: 8, textAlign: ‘center’, textStyle: \{ color: ‘\#8c8c8c’, fontSize: 12, fontWeight: ‘normal’ \}, }, series: [ { name: '外部刻度', type: 'gauge', // center: ['20%', '50%'], radius: '52%', min: 0, //最小刻度 max: 100, //最大刻度 splitNumber: 10, //刻度数量 startAngle: 225, endAngle: -45, axisLine: { show: true, // 仪表盘刻度线 lineStyle: { width: 2, color: [ [1, '#FFFFFF'] ] } }, //仪表盘文字 axisLabel: { show: true, color: '#595959', // 文字颜色 fontSize: 12, distance: -25, // 数字位置调整 formatter: function(v) { switch (v + '') { case '0': return '0'; case '10': return '10'; case '20': return '20'; case '30': return '30'; case '40': return '40'; case '50': return '50'; case '60': return '60'; case '70': return '70'; case '80': return '80'; case '90': return '90'; case '100': return '100'; } } }, //刻度标签。 axisTick: { show: true, splitNumber: 7, lineStyle: { color: '#d8d8d8', // 线条颜色 width: 2, }, length: -8 }, //刻度样式 splitLine: { show: true, length: -15, lineStyle: { color: '#d8d8d8', // 线条颜色 } }, //分隔线样式 detail: { show: false }, pointer: { show: false } }, /*最里面白色的一层*/ { type: 'pie', radius: ['0', '30%'], center: ['50%', '50%'], z: 8, hoverAnimation: false, data: [{ name: '检查进度', value: dataArr, itemStyle: { normal: { color: 'white' } }, label: { // 处理进度样式 normal: { formatter: function(params) { return params.value + '%'; }, fontSize: 26, color: '#ff6e00', fontWeight: "bold", position: 'center', show: true } }, labelLine: { show: false } }], }, /*蓝色的一层*/ { type: "pie", radius: "46%", startAngle: 220, endAngle: -40, hoverAnimation: false, center: ["50%", "50%"], avoidLabelOverlap: false, label: { show: false }, labelLine: { show: false }, data: [{ value: 1, itemStyle: { normal: { color: { type: 'radial', x: 0.5, y: 0.5, r: 0.5, colorStops: [{ offset: 0, color: 'rgba(234,251,252, 0)' // 0% 处的颜色 }, { offset: 1, color: 'rgba(234,251,252, 1)' // 0% 处的颜色 }], } } } }], }, /*蓝色的一s层*/ //渐变色层 { type: 'gauge', radius: '43%', // startAngle: dataArr, // 225 = 0 endAngle: 60, z: 8, min: 0, max: 100, axisLine: { show: true, lineStyle: { width: 12, color: [ [ dataArr / 100, new echarts.graphic.LinearGradient( 0, 0, 1, 0, [{ offset: 0, color: '#3EC47C', }, { offset: 1, color: '#FF6E00', } ] ) ], [ 1, 'rgba(255,255,255,0)' ] ] } }, axisTick: { show: 0, }, splitLine: { show: 0, }, axisLabel: { show: 0 }, pointer: { show: 0, }, detail: { show: 0 }, }, //渐变色层 { type: 'gauge', radius: '50%', startAngle: 225, endAngle: -45, min: 0, max: 100, axisLine: { show: true, lineStyle: { width: 12, color: [ [ dataArr / 100, new echarts.graphic.LinearGradient( 0, 0, 1, 0, [{ offset: 0, color: '#3EC47C', }, { offset: 1, color: '#FF6E00', } ] ) ], [ 1, 'rgba(255,255,255,0)' ] ] } }, axisTick: { show: 0, }, splitLine: { show: 0, }, axisLabel: { show: 0 }, pointer: { show: 0, }, detail: { show: 0 }, }, ] \};
还没有评论,来说两句吧...