使用echarts 5.0绘制特殊样式的仪表盘

先看实现效果：

option = {series: [{type: 'gauge',radius:'85%',startAngle: 225,endAngle: -45,axisLine: {lineStyle: {width: 1,color: [[1, '#000']]}},

       axisTick: {show:false},splitLine: {show:false},axisLabel: {show:false},},{type: 'gauge',radius:'80%',startAngle: 270*(1-0)-45,endAngle: 270*(1-0.3)-44,axisLine: {lineStyle: {width: 1,color: [[1, '#FF6E76']]}},axisTick: {show:false},splitLine: {show:false},axisLabel: {show:false},},{type: 'gauge',radius:'80%',startAngle: 270*(1-0.3)-45,endAngle: 270*(1-0.6)-44,axisLine: {lineStyle: {width: 4,color: [[1, '#FDDD60']]}},axisTick: {show:false},splitLine: {show:false},axisLabel: {show:false},},{type: 'gauge',radius:'80%',startAngle: 270*(1-0.6)-45,endAngle: 270*(1-0.9)-44,axisLine: {lineStyle: {width: 8,color: [[1, '#58D9F9']]}},axisTick: {show:false},splitLine: {show:false},axisLabel: {show:false},},{type: 'gauge',radius:'80%',startAngle: 270*(1-0.9)-45,endAngle: -45,axisLine: {lineStyle: {width: 12,color: [[1, '#7CFFB2']]}},axisTick: {show:false},splitLine: {show:false},axisLabel: {show:false},},{type: 'gauge',startAngle: 225,endAngle: -45,radius:'65%',min: 0,max: 1,axisLine: {lineStyle: {width: 0,color: [[0.3, '#FF6E76'],[0.6, '#FDDD60'],[0.9, '#58D9F9'],[1, '#7CFFB2']]}},pointer: {icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',length: '12%',width: 20,offsetCenter: [0, '-125%'],itemStyle: {color: 'auto'}},axisTick: {show:false},splitLine: {show:false},axisLabel: {color: '#464646',fontSize: 12,distance: -35,formatter: function (value) {console.log(value)if (value === 0.9) {return 90;}else if (value === 0.6) {return 60;}else if (value === 0.3) {return 30;}else if (value === 0) {return 0;} else if (value === 1) {return 100;}}},title: {offsetCenter: [0, '30'],fontSize: 12},detail: {fontSize: 40,offsetCenter: [0, '0%'],valueAnimation: true,formatter: function (value) {return Math.round(value * 100) + '分';},color: 'auto'},data: [{value: 0.70,name: '成绩评定'}]}]
};

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！