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

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

效果

代码

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 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/hdkf/10859.html