1. 首页
  2. 百度ECharts
  3. ECharts实例
  4. ECharts入门
  5. ECharts官网

百度echarts仪表盘颜色设成渐变色

2022年05月26日 11:25:59
var myChart = document.getElementById('pie');
var option = {
	title: {
		text: '- CPU状态',
		textStyle: {
			color: 'rgba(255,255,255,.65)',
			fontSize: 16,
			fontWeight: 100,
			fontFamily: 'Gotham-Book'
		}
	},
	series: [{
		type: 'gauge',
		progress: {
			show: true,
			width: 18
		},
		itemStyle: { //渐变颜色
			color: new echarts.graphic.LinearGradient(1, 1, 0, 1, [{
				offset: 1,
				color: '#0f122e'
			}, {
				offset: 0,
				color: '#a30052'
			}])
		},
		axisLine: {
			lineStyle: {
				width: 18,
				color: [
					[1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
							offset: 0.1,
							color: "#242a5d"
						},
						{
							offset: 1,
							color: "#242a5d"
						}
					])]
				]
			},
		},
		axisTick: showFalse,
		splitLine: {
			distance: 5,
			length: 3,
			lineStyle: {
				width: 3,
				color: '#242a5d'
			},
		},
		axisLabel: { //是否显示数字
			show: false
		},
		pointer: {
			show: false
		},
		detail: {
			valueAnimation: true,
			fontSize: 35,
			offsetCenter: [0, '10%'],
			color: '#fff'
		},
		title: {
			offsetCenter: [0, '100%'],
			fontSize: 13,
			color: 'rgba(255,255,255,.65)'
		},
		data: [{
			value: 70,
			name: 'CPU使用率(%)'
		}]
	}]
};

cpuData = echarts.init(myChart);
cpuData.setOption(option);
window.addEventListener("resize", function() {
	cpuData.resize();
})
点击展开全文
百度echarts仪表盘颜色设成渐变色