echarts 之科技感进度条

最新推荐文章于 2024-05-14 16:58:49 发布

月下脆竹書閣

最新推荐文章于 2024-05-14 16:58:49 发布

阅读量1.3k

点赞数 2

分类专栏： VUE 文章标签： echarts 科技 javascript

本文链接：https://blog.csdn.net/c_x_m/article/details/132455547

版权

VUE 专栏收录该内容

56 篇文章 3 订阅

订阅专栏

1.图片展示

在这里插入图片描述

2.代码实现

/* ng qty 进度条 */
<template>
	<div class="ngqty-progress">
		<div class="ngqty-info">
			<span>X4</span>
			<span>50%</span>
		</div>
		<div :id="'barNgQtyProgress' + index" class="chart"></div>
	</div>
</template>
<script>
import echarts from "echarts";

export default {
	name: "bar-ngqty-progress",
	props: {
		index: {
			type: String, // String, Number, Object
			required: false,
			default: "0",
		},
		data: {},
	},
	data() {
		return {
			chart: {},
		};
	},
	methods: {
		initChart() {
			this.chart = echarts.init(document.getElementById("barNgQtyProgress" + this.index));
			let category = [{ name: "省外资金", value: "50" }]; // 类别
			let total = 100; // 数据总数
			var datas = [];
			category.forEach((value) => {
				datas.push(value.value);
			});
			let option = {
				grid: {
					left: "0",
					top: "center", // 设置条形图的边距
					right: "0",
				},
				xAxis: {
					max: total,
					show: false,
				},
				yAxis: [
					{
						type: "category",
						inverse: false,
						data: category,
						show: false,
					},
				],
				series: [
					{
						// 内
						type: "bar",
						stack: "1",
						barWidth: 15,
						legendHoverLink: false,
						silent: true,
						itemStyle: {
							normal: {
								color: function () {
									return {
										type: "linear",
										x: 0,
										y: 0,
										x2: 1,
										y2: 0,
										colorStops: [
											{
												offset: 0,
												color: "#011b26", // 0% 处的颜色
											},
											{
												offset: 1,
												color: "#45f2c8", // 100% 处的颜色
											},
										],
									};
								},
							},
						},
						data: category,
						z: 1,
						animationEasing: "elasticOut",
					},

					{
						// 分隔
						type: "pictorialBar",
						itemStyle: {
							normal: {
								color: "#052132",
							},
						},
						symbolRepeat: "true",
						symbolMargin: "90 !",
						symbol: "rect",
						symbolClip: true,
						symbolSize: [10, 28],
						symbolPosition: "start",
						symbolOffset: [1, -1],
						symbolBoundingData: this.total,
						data: category,
						z: 2,
						animationEasing: "elasticOut",
					},
				],
			};
			// 绘制图表
			this.chart.setOption(option, true);
			window.addEventListener("resize", () => {
				if (this.chart) {
					this.chart.resize(); // 不报错
				}
			});
		},
	},
	mounted() {
		this.initChart();
	},
};
</script>
<style lang="less" scoped>
.ngqty-progress {
	width: 98%;
	height: 100%;
	.ngqty-info {
		height: 30px;
		width: 100%;
		margin-bottom: 10px;
		span {
			color: #4bf9ef;
			font-size: 30px;
			font-weight: bold;
			display: inline-block;
			&:nth-child(2) {
				float: right;
			}
		}
	}
	.chart {
		width: 100% !important;
		height: calc(100% - 45px) !important;
	}
	#barNgQtyProgress0 {
		padding: 5px 10px;
		border: 1px solid #44837d;
		border-right: 4px solid #44837d;
		border-left: 4px solid #44837d;
	}
}
</style>