个人学习笔记之base-info

最新推荐文章于 2024-09-12 22:27:23 发布

编程小蜗牛。

最新推荐文章于 2024-09-12 22:27:23 发布

阅读量133

点赞数

文章标签：学习笔记 javascript

本文链接：https://blog.youkuaiyun.com/weixin_48050312/article/details/134465493

版权

本文介绍了如何在Vue框架中使用Card组件和ECharts库创建动态图表，展示预处理工序的数据，包括标题、值、单位以及自定义样式和数据集配置。

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

<template>
  <Card :bgColor="bgColor" :showBorder="showBorder">
    <view class="body" :style="{ fontSize: fontSize }">
      <view style="display: flex">
        <view class="left" v-if="isShowBigIcon">
          <view
            :class="iconClass"
            class="iconStyle"
            :style="{ color: iconColor }"
          ></view>
        </view>
        <view class="top" style="width: 50%">
          <view :class="showIcon ? 'title' : ''">
            <text>{{ title }}</text>
            <u-icon class="e-m-l-6" v-if="showIcon" name="arrow-right"></u-icon>
          </view>
          <view style="height: 48rpx; margin-top: 6rpx">
            <text
              class="value"
              :class="judgeLength(value) ? 'small-size' : ''"
              :style="{ fontSize: valueSize }"
              >{{ value }}</text
            >
            <text>{{ unit }}</text>
          </view>
          <view class="bottom" v-if="showBottom">
            <text class="bottom-title">{{ bottomTitle }}：</text>
            <text :class="bottomValue > 0 ? 'up' : 'down'"
              >{{ bottomValue }}%</text
            >
            <text
              :class="
                bottomValue > 0
                  ? 'up ms-iconfont ms-icon-arrow-up'
                  : 'down ms-iconfont ms-icon-arrow-down'
              "
            ></text>
          </view>
        </view>
        <zy-echarts
          :option="lineOption"
          class="echarts2"
          style="margin-right: 10rpx"
        ></zy-echarts>
      </view>
      <image v-if="imageUrl" class="icon" alt="*" :src="imageUrl"></image>
    </view>
  </Card>
</template>
<script>
import Card from './Card.vue';
import zyEcharts from './zy-echarts.vue';

const getLineOption = (dataSet = {}) => {
  return {
    grid: { left: '0%', right: '0%', bottom: '8%', top: '25%' },
    xAxis: {
      type: 'category',
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      show: false,
    },
    yAxis: {
      type: 'value',
      splitNumber: 3,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    dataset: dataSet,
    series: [
      {
        type: 'line',
        smooth: true,
        symbol: 'none',
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(58,77,233,0.8)',
              },
              {
                offset: 1,
                color: 'rgba(58,77,233,0.3)',
              },
            ],
          },
        },
      },
    ],
  };
};

export default {
  name: 'HeaderSummaryItem',
  components: {
    Card,
    zyEcharts,
  },
  props: {
    bgColor: String,
    title: {
      type: String,
    },
    unit: {
      type: String,
    },
    value: {
      type: [Number, String],
      default: 0,
    },
    showIcon: Boolean,
    isShowBigIcon: {
      type: Boolean,
      default: false,
    },
    iconClass: {
      type: String,
    },
    showBottom: Boolean,
    bottomTitle: {
      type: String,
      default: '昨日同比',
    },
    bottomValue: {
      type: Number,
      default: 0,
    },
    showBorder: Boolean,
    fontSize: {
      type: String,
      default: '28rpx',
    },
    valueSize: {
      type: String,
      default: '48rpx',
    },
    iconColor: {
      type: String,
      default: '',
    },
    isLineEcharts: {
      type: Boolean,
      default: false,
    },
    dataSet: {
      type: Object,
      default: () => ({}),
    },
    imageUrl: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      lineOption: {},
    };
  },
  mounted() {
    if (this.isLineEcharts) {
      this.lineOption = getLineOption(this.dataSet);
    }
  },
  methods: {
    judgeLength(v) {
      if (!v) return false;
      if (v.toString().length > 8) {
        return true;
      } else {
        return false;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.body {
  padding: 40rpx 0 40rpx 20rpx;
  font-size: 28rpx;
  color: #717579;
  line-height: normal;
  // display: flex;
  flex-flow: row nowrap;
  white-space: nowrap;
  position: relative;

  .title {
    display: flex;
    flex-flow: row nowrap;
    color: #393b3d;
  }

  .value {
    font-size: 48rpx;
    color: #393b3d;
    font-weight: 700;
    margin-right: 14rpx;
  }
}

.iconStyle {
  font-size: 60rpx;
}

.left {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70rpx;
  height: 89rpx;
  margin-right: 5rpx;
}

.small-size {
  font-size: 32rpx !important;
}

.bottom {
  display: flex;
  font-size: 24rpx;
  margin-top: 10rpx;

  .bottom-title {
    color: #bbbdbf;
  }

  .up {
    color: #0d9e31;
  }

  .down {
    color: #cf2613;
  }
}

.echarts2 {
  width: 50%;
}
.icon {
  width: 96rpx;
  height: 96rpx;
  position: absolute;
  right: 8rpx;
  bottom: 8rpx;
}
</style>

1：引用

<Card title="预处理工序" class="summary-wrap-card e-m-t-20">
      <u-row justify="space-between" customStyle="flex-wrap: wrap; padding:15rpx ">
        <u-col :span="12" v-if="cardData.items">
          <base-info :title="cardData.items[0].name" :value="cardData.items[0].value" :unit="cardData.items[0].unit"
            showBorder bgColor="#eff2fc" :isLineEcharts="true" :dataSet="cardData.dataset"></base-info>
        </u-col>
      </u-row>
    </Card>