仪表盘组合一

新东西：markPoint、渐变色

效果图：

代码：

const colors = ["#8CE0A6","#23CBF1","#D5B32F", '#F87B8C'];
option = {series: [{ // 外层type: 'gauge',startAngle: -90,endAngle: 270,radius: '68%',axisLine: {lineStyle: {width: 10,    // 外围光圈宽度color:  [   // 圆形颜色渐变[0.1, colors[0]],[0.3, new echarts.graphic.LinearGradient(0, 1, 0, 0,[{offset: 0,color: colors[0]}, {offset: 0.8,color: colors[1]}])],[0.4, colors[1]],[0.6, new echarts.graphic.LinearGradient(0, 0, 1, 0,[{offset: 0,color: colors[1]}, {offset: 0.9,color: colors[2]}])],[0.9, new echarts.graphic.LinearGradient(0, 1, 0, 0,[{offset: 0,color: colors[3]}, {offset: 0.6,color: colors[2]}])],[1, colors[3]]],}},pointer: {show: false,},axisTick: {show: false,},splitNumber: 4,   // 东南西北四个方向的须须splitLine: {show: true,distance: -28,length: 17,lineStyle: {color: "auto",width: 3}},axisLabel: {show: false,},detail: {show: false,},data: [{value: 100}]},{  // 内层type: 'gauge',startAngle: -90,endAngle: 270,radius: '60%',splitNumber: 18,axisLine: {lineStyle: {width: 50,   // 内层分格断宽度color:  [[0.1, colors[0]],[0.3, new echarts.graphic.LinearGradient(0, 1, 0, 0,[{offset: 0,color: colors[0]}, {offset: 0.8,color: colors[1]}])],[0.4, colors[1]],[0.6, new echarts.graphic.LinearGradient(0, 0, 1, 0,[{offset: 0,color: colors[1]}, {offset: 0.9,color: colors[2]}])],[0.9, new echarts.graphic.LinearGradient(0, 1, 0, 0,[{offset: 0,color: colors[3]}, {offset: 0.6,color: colors[2]}])],[1, colors[3]]],}},markPoint:{    // 指针中间的固定点symbol:'circle',symbolSize:25,data:[//跟你的仪表盘的中心位置对应上 颜色 auto自适应{x:'center',y:'center',itemStyle:{color: 'auto'}}]},pointer: {itemStyle: {color: 'auto' // 颜色 auto自适应}},axisTick: {show: false,},splitLine: {distance: -50,   // 跟axisLine的宽度保持一致length: 50,lineStyle: {color: '#fff',  // 改成背景颜色width: 10}},axisLabel: {show: false,},detail: {show: false,},data: [{value: 67}]}]
};

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