echarts渐变进度条

最新推荐文章于 2024-08-19 17:39:38 发布

鱼小二

最新推荐文章于 2024-08-19 17:39:38 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：日常积累文章标签： echarts

本文链接：https://blog.csdn.net/yu_yuxiaoer/article/details/121555516

日常积累专栏收录该内容

10 篇文章

订阅专栏

本文展示了如何使用Echarts创建一个渐变进度条，包括数据配置、颜色渐变设置和图表样式调整，适用于前端数据可视化场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

echarts渐变进度条

展示情况如下图

在这里插入图片描述

相关代码

var data = ['数据一','数据二',"数据三","数据四","数据五","六","七","八"]
let value = [0.50,0.80,0.60,0.65,0.31,0.45,0.62,0.87]
let arr = (new Array(value.length)).fill(1)
option = {
    backgroundColor: '#fff',
			grid: {
				top: '8%',
				left: '15%',
				right: '17.3%',
				bottom: '10%'
			},
			tooltip: {show: false},
			xAxis: {
				type: 'value',
				min: 0,
				max: 1,
				axisLine: {show: false},
				splitLine: {show: false},
				axisLabel: {show: false},
				axisTick: {show: false}
			},
			yAxis: {
				//show: false,
				type: 'category',
				inverse: true,
				splitLine: {show: false,},
				axisLine: {show: false},
				axisLabel: {
					show: true,
					interval: 0,
					margin: 10,
					textStyle: {
						color: '#ffffff',
						fontSize: 16,
						fontWeight: 'bold',
					}
				},
				axisTick: {show: false},
				data:data
			},
			series: [
				{
					//渐变数据内容
					type: 'bar', 
					barWidth: 30,
					animationDuration:2000,
					itemStyle: {
						normal: {
							borderWidth: 0,
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 1,
								y2: 0,
								colorStops: [{
									offset: 0,
									color: '#15a675'
								}, {
									offset: 1,
									color: '#ffd127'
								}]
							}
						},						
					},
					label: {
						show: false,
					},
					data: value,
					z: 0
				},
				{
					//背景柱状图
					type: 'bar', 
					barWidth: 30,
					barGap: '-100%',
					animation: false,
					itemStyle: {
						normal: {
							borderWidth: 0,
							color: '#e4ebf1',
							opacity: 0.2,
							borderWidth: 0
						},
					},
					data: arr,
					z: 0
				}, 
				
				{
					//辅助分割图形
					type: 'pictorialBar',
					barWidth: 32,
					symbol: 'rect',
					// symbolRotate:"-20",
					symbolMargin: '100%',   //控制分割图形的大小
					symbolSize: [4, '100%'],
					symbolOffset: [-0.5, 0],
					symbolRepeat: true,
					animation: false,
					itemStyle: {
						normal: {
							color: '#fff',
							borderWidth: 0
						},
					},
					data: arr,
					z: 1
				}
			]
		};