自定义柱状图-条状图——不同区间值，显示不同颜色

自定义柱状图-条状图——不同区间值，显示不同颜色

效果

代码

index.vue

<template>
	<div class="rightArea-box">
		<div class="top">
			<titleHeader :title="titleTop" />
			<div class="top-data">
				<div ref="echartsRef" class="content-box"></div>
			</div>
		</div>
		<div class="bottom">
			<titleHeader :title="titleBottom" />
			<div class="bottom-data">
				<div class="bottom-data-item" v-for="(item, index) in deviceList" :key="index">
					<label>{{ item.title }}</label>
					<b :style="bottomItemStyle(item)"></b>
					<span v-if="item.days === 0">不可继续使用</span>
					<span v-else-if="item.days > 0 && item.days <= 10">剩余{{ item.days }}天</span>
					<span v-else-if="item.days > 10 && item.days <= 20">剩余{{ item.days }}天</span>
					<span v-else-if="item.days > 20 && item.days <= 30">剩余{{ item.days }}天</span>
					<span v-else-if="item.days > 30 && item.days < 180">剩余{{ item.days }}天</span>
					<span v-else-if="item.days == 180">剩余{{ item.days }}天</span>
					<span v-else>大于180天</span>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts" name="rightArea">
import titleHeader from "@/components/header/titleHeader.vue";
import { ref, onMounted } from "vue";
const titleBottom = ref("设备剩余寿命排行");
const deviceList = ref([
	{ title: "特别备用1号风机", days: 0 },
	{ title: "特别备用2号风机", days: 8 },
	{ title: "1号风机", days: 18 },
	{ title: "2号风机", days: 28 },
	{ title: "3号风机", days: 90 },
	{ title: "4号风机", days: 120 },
	{ title: "5号风机", days: 180 },
	{ title: "6号风机", days: 180 },
	{ title: "7号风机", days: 180 },
	{ title: "8号风机", days: 180 },
	{ title: "9号风机", days: 180 },
	{ title: "10号风机", days: 180 },
	{ title: "11号风机", days: 180 },
	{ title: "12号风机", days: 280 }
]);
const bottomItemStyle = (item: any) => {
	if (item.days === 0) {
		return { background: "#ff5d5d", width: "20%" };
	} else if (item.days > 0 && item.days <= 10) {
		return { background: "#FF7D7D", width: "20%" };
	} else if (item.days > 10 && item.days <= 20) {
		return { background: "#FF8E8E", width: "20%" };
	} else if (item.days > 20 && item.days <= 30) {
		return { background: "#FFAEAE", width: "20%" };
	} else if (item.days > 30 && item.days < 180) {
		// 百分比范围 20% --- 60%
		// ((当前天数 - 最低30天) / (180 - 30) / 100 ) * 可用的百分比 50% + 前面30所占得百分比 20%
		return { background: "#00F0FF", width: ((item.days - 30) / 1.5) * 0.5 + 20 + "%" };
	} else {
		return { background: "#00FFBB", width: "70%" };
	}
};

onMounted(() => {});
</script>
<style scoped lang="scss">
.rightArea-box {
	display: flex;
	flex-flow: column;
	width: 100%;
	padding-bottom: 10px;

	.bottom {
		flex: 1;
	}
}

.bottom-data {
	height: calc(100% - 20px);
	max-height: 300px;
	overflow: auto;
	display: flex;
	flex-flow: column;
	.bottom-data-item {
		// 保障flex下元素宽度不变
		flex-grow: 0;
		flex-shrink: 0;
		display: flex;
		margin: 5px 0;
		padding: 0 24px;
		align-items: center;
		> label {
			color: #adb9c7;
			font-size: 14px;
			text-align: right;
			width: 80px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		> b {
			display: inline-block;
			height: 14px;
			border-radius: 4px;
			margin: 0 5px;
		}
		> span {
			color: #ffffff;
			font-size: 14px;
		}
	}
}
</style>

title组件

src\components\header\titleHeader.vue

<template>
	<div class="header-container">
		<div class="title-img">
			<!-- title文字 -->
			<span>{{ props.title }}</span>
			<!-- title单选 -->
			<slot name="right"></slot>
			<!-- title图片 -->
			<img @click="isDialog" class="header" :src="props.src" v-show="props.src != ''" />
		</div>
		<div class="mark">
			<slot name="mark" />
		</div>
	</div>
</template>

<script lang="ts" setup>
const props = defineProps({
	src: {
		type: String,
		required: false,
		default: ""
	},
	title: {
		type: String,
		required: true,
		default: ""
	}
});

// 展示弹框
const emit = defineEmits(["is-dialog"]);
const isDialog = () => {
	emit("is-dialog", "");
};
</script>

<style lang="scss" scoped>
.header-container {
	padding: 24px 24px 6px;
	.title-img {
		display: flex;
		font-family: "PingFang SC";
		font-size: 22px;
		color: rgb(255 255 255 / 100%);
		align-items: center;
		> span {
			margin-right: auto;
		}
		> img {
			cursor: pointer;
			margin-left: 24px;
			height: 20px;
		}
	}
}
</style