后台管理系统15

Home首页（一）

接下来对首页进行书写

card静态组件

组件结构

首先观察完成的项目，发现首页基本由三部分组成，将首页拆分为三个组件，最上面有四个小图表，图表之间留有缝隙以及阴影效果，四个小图表基本类似，因此拆分组件card来布局。

简单修改一下

此时页面效果如下

小图表静态组件

接下来对小图表进行静态布局。布局如下所示

<template>
  <div>
    <div class="card-header">
      <span>{{title}}</span>
      <svg
        t="1637478175000"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2179"
        width="16"
        height="16"
      >

      </svg>
    </div>
    <div class="card-content">{{count}}</div>
    <div class="card-charts">
      <slot name="charts"></slot>
    </div>
    <div class="card-footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  props: ["title", "count"],
};
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  color: #d9d9d9;
}
.card-content {
  font-size: 30px;
  padding: 10px 0px;
}
.card-charts {
  height: 50px;
}
.card-footer {
  border-top: 1px solid #eee;
  padding-top: 10px;
}
</style>

接收card传递过来的title与count

此时页面效果如下所示

接下来通过插槽将图表插入进小组件。

此时页面效果如下所示

折线图的书写

首先安装依赖包echarts

npm install echarts@4.9.0

安装完成之后找到lineChart组件，设置容器并且书写折线图。具体代码如下所示

<script>
//引入echarts
import echarts from "echarts";
export default {
  name: "",
  props: ["title", "count"],
  mounted() {
    //初始化echarts实例
    let lineCharts = echarts.init(this.$refs.charts);
    //配置数据
    lineCharts.setOption({
      xAxis: {
        //隐藏x轴
        show: false,
        type: "category",
      },
      yAxis: {
        //隐藏y轴
        show: false,
      },
      //系列
      series: [
        {
          type: "line",
          data: [10, 7, 33, 12, 48, 9, 29, 10, 44],
          //拐点的样式的设置
          itemStyle: {
            opacity: 0,
          },
          //线条的样式
          lineStyle: {
            color: "purple",
          },
          //填充颜色设置
          areaStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "purple", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#fff", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
      ],
      //布局调试
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
      },
    });
  },
};
</script>

此时页面效果如下所示

柱状图的书写

柱状图的代码如下所示

<template>
  <!-- 容器 -->
  <div>
    <div class="card-header">
      <span>{{ title }}</span>
      <svg
        t="1637478175000"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2179"
        width="16"
        height="16"
      ></svg>
    </div>
    <div class="card-content">{{ count }}</div>
    <!-- 容器 -->
    <div class="card-charts">
      <div class="charts" ref="charts"></div>
    </div>
    <div class="card-footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
//引入echarts
import echarts from "echarts";
export default {
  name: "",
  props: ["title", "count"],
  mounted() {
    //初始化echarts实例
    let lineCharts = echarts.init(this.$refs.charts);
    //配置数据
    lineCharts.setOption({
      xAxis: {
        //隐藏x轴
        show: false,
        //均分
        type: "category",
      },
      yAxis: {
        //隐藏y轴
        show: false,
      },
      //系列
      series: [
        {
          //图标形式-柱状图
          type: "bar",
          data: [10, 7, 33, 12, 48, 9, 29, 10, 44, 33, 22, 8],
          color: "cyan",
        },
      ],
      //布局调试
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
      },
      tooltip: {},
    });
  },
};
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  color: #d9d9d9;
}
.card-content {
  font-size: 30px;
  padding: 10px 0px;
}
.card-charts {
  height: 50px;
}
.card-footer {
  border-top: 1px solid #eee;
  padding-top: 10px;
}
.charts {
  width: 100%;
  height: 100%;
}
</style>

此时页面效果如下所示

进度条的书写

代码如下

<template>
  <!-- 容器 -->
  <div>
    <div class="card-header">
      <span>{{ title }}</span>
      <svg
        t="1637478175000"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2179"
        width="16"
        height="16"
      ></svg>
    </div>
    <div class="card-content">{{ count }}</div>
    <div class="card-charts">
      <!-- 容器 -->
  <div class="charts" ref="charts"></div>
    </div>
    <div class="card-footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
//引入echarts
import echarts from "echarts";
export default {
  name: "",
  props: ["title", "count"],
  mounted() {
    //初始化echarts实例
    let lineCharts = echarts.init(this.$refs.charts);
    //配置数据
    lineCharts.setOption({
      xAxis: {
        //隐藏x轴
        show: false,
        //最小值与最大值的设置
        min: 0,
        max: 100,
      },
      yAxis: {
        //隐藏y轴
        show: false,
        //均分
        type: "category",
      },
      //系列
      series: [
        {
          //图标形式-柱状图
          type: "bar",
          data: [78],
          color: "cyan",
          //柱状图的宽度
          barWidth: 10,
          color: "yellowgreen",
          //背景颜色设置
          showBackground: true,
          //设置背景颜色
          backgroundStyle: {
            color: "#eee",
          },
          //文本标签
          label:{
             show:true,
             //改变文本内容
             formatter:'|',
             //文本标签位置调试
             position:'right'
          }
        },
      ],
      //布局调试
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
      },
    });
  },
};
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  color: #d9d9d9;
}
.card-content {
  font-size: 30px;
  padding: 10px 0px;
}
.card-charts {
  height: 50px;
}
.card-footer {
  border-top: 1px solid #eee;
  padding-top: 10px;
}
.charts {
  width: 100%;
  height: 100%;
}
</style>

此时页面效果如下所示