仪表盘
let num = 0; option = { backgroundColor: '#111', title: [{ text: 'SPEED', x: 'center', top: '52%', textStyle: { color: '#fdf914', fontSize: 20, fontWeight: '100', } }, { text: '60%', x: 'center', top: '42%', textStyle: { fontSize: '50', color: '#fdf914', fontFamily: 'Lato', foontWeight: '600', }, }], polar: { radius: ['44%', '50%'], center: ['50%', '50%'], }, angleAxis: { max: 100, show: false, }, radiusAxis: { type: 'category', show: true, axisLabel: { show: false, }, axisLine: { show: false, }, axisTick: { show: false }, }, series: [ { name: '', type: 'bar', roundCap: true, barWidth: 60, showBackground: true, backgroundStyle: { color: 'rgba(66, 66, 66, .3)', }, data: [60], coordinateSystem: 'polar', itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: '#fdf914' }, { offset: 1, color: '#38a700' }]), } } }, { type: 'gauge', name: '', radius: '57%', startAngle: '0', endAngle: '-359.99', splitNumber: '200', center: ['50%', '50%'], pointer: { show: false }, title: { show: false }, detail: { show: false }, data: [{ value: 95, name: '' }], axisLine: { lineStyle: { width: 20, opacity: 0 } }, axisTick: { show: false }, splitLine: { show: true, length: 13, lineStyle: { color: { type: 'linear', x: 1, y: 0, x2: 0, y2: 0, colorStops: [{ offset: 0, color: '#111' }, { offset: 0.5, color: 'rgba(66, 66, 66, 1)', }, { offset: 1, color: '#111' }], globalCoord: false }, width: 1, type: 'solid', }, }, axisLabel: { show: false } }, { name: '', type: 'pie', startAngle: 90, radius: ['60%', '62%'], hoverAnimation: false, center: ['50%', '50%'], itemStyle: { normal: { labelLine: { show: false }, color: 'rgba(66, 66, 66, .4)', shadowBlur: 10, shadowColor: 'rgba(253, 249, 20, .3)', } }, data: [{ value: 100, }] }, { name: '', type: 'pie', startAngle: 90, radius: ['62.5%', '64%'], hoverAnimation: false, center: ['50%', '50%'], itemStyle: { normal: { labelLine: { show: false }, color: 'rgba(66, 66, 66, .3)', shadowBlur: 10, shadowColor: 'rgba(253, 249, 20, .3)', } }, data: [{ value: 100, }] }, { name: '', type: 'pie', startAngle: 90, radius: ['64.5%', '65.8%'], hoverAnimation: false, center: ['50%', '50%'], itemStyle: { normal: { labelLine: { show: false }, color: 'rgba(66, 66, 66, .2)', shadowBlur: 10, shadowColor: 'rgba(253, 249, 20, .3)', } }, data: [{ value: 100, }] }, { name: '', type: 'pie', startAngle: 90, radius: ['66.5%', '67.5%'], hoverAnimation: false, center: ['50%', '50%'], itemStyle: { normal: { labelLine: { show: false }, color: 'rgba(66, 66, 66, .1)', shadowBlur: 10, shadowColor: 'rgba(253, 249, 20, .3)', } }, data: [{ value: 100, }] }, { name: "", type: 'custom', coordinateSystem: "none", renderItem: function(params, api) { return { type: 'arc', shape: { cx: api.getWidth() / 2, cy: api.getHeight() / 2, r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.545, startAngle: (0+num) * Math.PI / 180, endAngle: (1+num) * Math.PI / 180 }, style: { stroke: "#fdf914", fill: "transparent", lineWidth: 5 }, silent: true }; }, data: [0] }, ] }; function numb(){ num = num+5 myChart.setOption(option, true) } setInterval(function() { numb() }, 100);