条形图？
发布于 4 年前 作者 juan11 9872 次浏览 来自 问答 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	</head>
	<body>
		<div id="app">
			<div class="title-column">
				<div class="title">时段</div>
				<!-- <div class="mark" wx:for="{{end-start+1}}" wx:key="$this"> -->
				<div class="mark" v-for="(lst,index) in end-start+1">
					<div class="mark-start">
						<div class="mark-label">{{lst+start}}</div>
						<div class="mark-line"></div>
					</div>
				</div>
			</div>
			<div class="value-column" v-for="(obj,index) in list">
				<!-- <div class="title">{{obj[0].label}}</div> -->
				{{obj.label }}
				<div :class="value {{hasValue(item.values, hour+start)?'has-value':'not-has-value'}}" v-for="(pot,index) in end-start+1"
				 :key="$this">
				</div>
				<!-- <div :class="value {{ }}" v-for="(lst,index) in end-start+1" v-for-lst="hour" :key="$this">
				</div> -->
			</div>
		</div>

		<script type="text/javascript">
			new Vue({
				el: '#app',
				data: {
					start: 6,
					end: 24,
					test: [1, 2, 3],
					list: [{
							label: "今天",
							values: [7, 8, 9, 20, 21]
						},
						{
							label: "昨天",
							values: [10, 11, 12, 13, 14]
						},
					]
				},
				// Vue.filter('my-filter', function (value) {
				//   // 返回处理后的值
				// })
			});
			// <wxs module="util">
			// 	function hasValue(values, value) {
			// 	return values.indexOf(value) != -1
			// 	}
			// 	module.exports.hasValue = hasValue
			// </wxs>
		</script>
		<style>
			.title-column {
				display: flex;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 18rpx;
				border-bottom: 1px solid #333;
			}

			.title {
				width: 100rpx;
				flex-shrink: 0;
				text-align: center;
			}

			.mark {
				flex: 1 0 0;
				position: relative;
			}

			.mark-start {
				position: absolute;
				left: 0;
				width: 0;
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.mark-line {
				width: 1px;
				height: 4px;
				background-color: #333;
				position: absolute;
				bottom: 0;
			}

			.mark:nth-child(2n+1) .mark-label {
				opacity: 0;
			}

			.mark:nth-child(2n+1) .mark-line {
				height: 2px;
			}

			.value-column {
				display: flex;
				align-items: center;
				height: 40rpx;
				line-height: 40rpx;
				font-size: 18rpx;
			}

			.value {
				flex: 1 0 0;
				height: 30rpx;
			}

			.has-value {
				background-color: #aaa;
			}

			.not-has-value {
				background-color: red;
			}

			.value:last-child {
				background-color: transparent;
			}
		</style>
	</body>
</html>
2 回复

你这样还不剩整个代码片段 多方便

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>

<body>
  <div id="app">
    <div class="title-column">
      <div class="title">时段</div>
      <!-- <div class="mark" wx:for="{{end-start+1}}" wx:key="$this"> -->
      <div class="mark" v-for="(lst,index) in (end-start+1)">
        <div class="mark-start">
          <div class="mark-label">{{lst+start}}</div>
          <div class="mark-line"></div>
        </div>
      </div>
    </div>
    <div class="value-column" v-for="(obj,index) in list">
      <!-- <div class="title">{{obj[0].label}}</div> -->
      {{obj.label }}
      <div class="value" :class="[hasValue(obj.values, pot+start)?'has-value':'not-has-value']"
        v-for="(pot,index) in (end-start+1)" :key="pot">
      </div>
      <!-- <div :class="value {{ }}" v-for="(lst,index) in end-start+1" v-for-lst="hour" :key="$this">
				</div> -->
    </div>
  </div>

  <script type="text/javascript">
    new Vue({
      el: '#app',
      data: {
        start: 6,
        end: 24,
        test: [1, 2, 3],
        list: [{
          label: "今天",
          values: [7, 8, 9, 20, 21]
        },
        {
          label: "昨天",
          values: [10, 11, 12, 13, 14]
        },
        ]
      },
      methods: {
        hasValue(values, value) {
          return values.indexOf(value) != -1
        }
      }
    });
  </script>
  <style>
    .title-column {
      display: flex;
      height: 60px;
      line-height: 60px;
      font-size: 18px;
      border-bottom: 1px solid #333;
    }

    .title {
      width: 100px;
      flex-shrink: 0;
      text-align: center;
    }

    .mark {
      flex: 1 0 0;
      position: relative;
    }

    .mark-start {
      position: absolute;
      left: 0;
      width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .mark-line {
      width: 1px;
      height: 4px;
      background-color: #333;
      position: absolute;
      bottom: 0;
    }

    .mark:nth-child(2n+1) .mark-label {
      opacity: 0;
    }

    .mark:nth-child(2n+1) .mark-line {
      height: 2px;
    }

    .value-column {
      display: flex;
      align-items: center;
      height: 40px;
      line-height: 40px;
      font-size: 18px;
    }

    .value {
      flex: 1 0 0;
      height: 30px;
    }

    .has-value {
      background-color: #aaa;
    }

    .not-has-value {
      background-color: red;
    }

    .value:last-child {
      background-color: transparent;
    }
  </style>
</body>

</html>
回到顶部