管理系统首页---可视化

前端贾公子

已于 2022-05-12 18:57:12 修改

阅读量919

点赞数

分类专栏：管理系统文章标签： css vue.js html

于 2022-05-12 18:55:53 首次发布

本文链接：https://blog.csdn.net/qq_63358859/article/details/124714211

版权

管理系统专栏收录该内容

7 篇文章 0 订阅

订阅专栏

封装card组件

<slot name="footer"></slot> 留出具名插槽

使用

         <template slot="footer">
              <div>日销售额:6589</div>
            </template>

<template>
  <div>
    <div class="card-header">
      <span>{{ title }}</span>
      <svg
        t="1652257863738"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="1903"
        width="16"
        height="16"
      >
        <path
          d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024z m3.008-92.992a416 416 0 1 0 0-832 416 416 0 0 0 0 832zM448 448h128v384H448V448z m0-256h128v128H448V192z"
          fill="#262626"
          p-id="1904"
        ></path>
      </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: "Card",
  props: ["title", "count"],
};
</script>

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

封装折线图

<template>
  <!-- 容器 -->
  <div class="echarts" ref="dom"></div>
</template>

<script>
//引入echarts
import * as echarts from "echarts";
export default {
  name: "line",
  mounted() {
    console.log();
    // 初始化echarts实例;
    let lineChart = echarts.init(this.$refs.dom);

    // 配置数据
    lineChart.setOption({
      xAxis: {
        //隐藏x轴
        show: false,
        // 折线
        type: "category",
      },
      yAxis: {
        //隐藏y轴
        show: false,
      },
      //系列
      series: [
        {
          // 折线
          type: "line",
          data: [10, 7, 33, 4, 88, 9, 33, 4, 55],
          //设置拐点的样式设置
          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>

<style scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>

封装柱状图

<template>
  <!-- 容器 -->
  <div class="echarts" ref="dom"></div>
</template>

<script>
//引入echarts
import * as echarts from "echarts";
export default {
  name: "bar",
  mounted() {
    console.log();
    // 初始化echarts实例;
    let lineChart = echarts.init(this.$refs.dom);

    // 配置数据
    lineChart.setOption({
      xAxis: {
        //隐藏x轴
        show: false,
      },
      yAxis: {
        //隐藏y轴
        show: false,
      },
      //系列
      series: [
        {
          //   柱状图
          type: "bar",
          data: [11, 22, 33, 44],
          color: "pink",
        },
      ],
      // 布局调试
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
      },
      tooltip: {},
    });
  },
};
</script>

<style scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>

进度条


<template>
  <!-- 容器 -->
  <div class="echarts" ref="dom"></div>
</template>

<script>
//引入echarts
import * as echarts from "echarts";
export default {
  name: "progressBar",
  mounted() {
    // 初始化echarts实例;
    let lineChart = echarts.init(this.$refs.dom);

    // 配置数据
    lineChart.setOption({
      xAxis: {
        //隐藏x轴
        show: false,
        // 最大值最小值
        min: 0,
        max: 100,
      },
      yAxis: {
        //隐藏y轴
        show: false,
        //均分
        type: "category",
        //柱状图宽度的设置
      },
      //系列
      series: [
        {
          //   柱状图
          type: "bar",
          data: [78],
          color: "pink",
          //柱状图宽
          barWidth: 10,
          color: "yellow",
          // 背景颜色
          showBackground: true,
          backgroundStyle: {
            color: "#eee",
          },
          // 文本
          label: {
            show: true,
            // 文本内容
            formatter: "|",
            //文本标签位置
            position: "right",
          },
        },
      ],
      // 布局调试
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
      },
      tooltip: {},
    });
  },
};
</script>

<style scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>

顶部区域

<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="6">
        <el-card>
          <Card title="总销售额" count="￥ 126560">
            <template slot="charts">
              <span
                >周同比&nbsp; &nbsp; 56.67%
                <svg
                  t="1652258822317"
                  class="icon"
                  viewBox="0 0 1028 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="2846"
                  width="16"
                  height="16"
                >
                  <path
                    d="M546.816 1.024q99.328 0 186.88 37.888t152.576 102.912 102.912 152.576 37.888 186.88-37.888 186.88-102.912 152.576-152.576 102.4-186.88 37.376q-88.064 0-166.4-29.696t-141.824-81.92l116.736-248.832q21.504 34.816 39.936 64.512 15.36 25.6 30.72 48.64t21.504 31.232q11.264 14.336 20.992 26.624t27.136 14.336q21.504 3.072 30.72-7.68t20.48-28.16q3.072-4.096 11.776-21.504t20.992-43.008 27.648-56.832 30.72-64q35.84-75.776 79.872-168.96l108.544 58.368-44.032-316.416-278.528 171.008 121.856 41.984-129.024 265.216q-29.696-48.128-51.2-83.968-9.216-15.36-17.92-29.184t-14.848-24.064l-9.216-15.36q4.096 8.192 0.512 2.56t-11.776-15.872-18.432-20.48-19.456-10.24q-23.552 0-33.792 11.776t-16.384 27.136q-2.048 4.096-10.24 22.016t-21.504 44.544-28.672 59.392l-32.768 63.488q-15.36 32.768-29.696 62.464t-24.576 50.176q-43.008-59.392-66.048-130.048t-23.04-148.48q0-99.328 37.376-186.88t102.4-152.576 152.576-102.912 186.88-37.888z"
                    p-id="2847"
                    fill="#1296db"
                  ></path></svg
              ></span>
              &nbsp;&nbsp;
              <span
                >日同比&nbsp;&nbsp; 19,96%
                <svg
                  t="1652258977565"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="3842"
                  width="16"
                  height="16"
                >
                  <path
                    d="M799.9 96 224.1 96C153.3 96 96 153.3 96 224.1l0 68.3c3.6 1.6 7 3.7 9.9 6.6l198 198L451 349.9c12.5-12.5 32.8-12.5 45.2 0l180.3 180.3 26.9-26.9c11.9-11.9 32.3-6.5 36.6 9.8l38.4 143.1c4.4 16.3-10.5 31.2-26.8 26.8l-143.1-38.4c-16.3-4.4-21.7-24.7-9.8-36.6l32.6-32.6L473.6 417.8 326.5 564.9c-12.5 12.5-32.8 12.5-45.2 0L96 379.6l0 420.3C96 870.7 153.3 928 224.1 928l575.8 0c70.7 0 128.1-57.3 128.1-128.1L928 224.1C928 153.3 870.7 96 799.9 96z"
                    p-id="3843"
                    fill="#d81e06"
                  ></path></svg
              ></span>
            </template>
            <template slot="footer">
              <div>日销售额:6589</div>
            </template>
          </Card>
        </el-card>
      </el-col>
      <!-- 第二个 -->
      <el-col :span="6">
        <el-card>
          <Card title="访问量" count="￥ 88460">
            <template slot="charts">
              <lineChart></lineChart>
            </template>
            <template slot="footer">
              <span>访问量:6907</span>
            </template>
          </Card>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Card title="支付笔数" count="￥ 34520">
            <template slot="charts">
              <barChart></barChart>
            </template>
            <template slot="footer">
              <span>转化率:65%</span>
            </template>
          </Card>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Card title="运营活动效果" count="78%">
            <template slot="charts">
              <progressBar></progressBar>
            </template>
            <template slot="footer">
              <span
                >周同比&nbsp; &nbsp; 56.67%
                <svg
                  t="1652258822317"
                  class="icon"
                  viewBox="0 0 1028 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="2846"
                  width="16"
                  height="16"
                >
                  <path
                    d="M546.816 1.024q99.328 0 186.88 37.888t152.576 102.912 102.912 152.576 37.888 186.88-37.888 186.88-102.912 152.576-152.576 102.4-186.88 37.376q-88.064 0-166.4-29.696t-141.824-81.92l116.736-248.832q21.504 34.816 39.936 64.512 15.36 25.6 30.72 48.64t21.504 31.232q11.264 14.336 20.992 26.624t27.136 14.336q21.504 3.072 30.72-7.68t20.48-28.16q3.072-4.096 11.776-21.504t20.992-43.008 27.648-56.832 30.72-64q35.84-75.776 79.872-168.96l108.544 58.368-44.032-316.416-278.528 171.008 121.856 41.984-129.024 265.216q-29.696-48.128-51.2-83.968-9.216-15.36-17.92-29.184t-14.848-24.064l-9.216-15.36q4.096 8.192 0.512 2.56t-11.776-15.872-18.432-20.48-19.456-10.24q-23.552 0-33.792 11.776t-16.384 27.136q-2.048 4.096-10.24 22.016t-21.504 44.544-28.672 59.392l-32.768 63.488q-15.36 32.768-29.696 62.464t-24.576 50.176q-43.008-59.392-66.048-130.048t-23.04-148.48q0-99.328 37.376-186.88t102.4-152.576 152.576-102.912 186.88-37.888z"
                    p-id="2847"
                    fill="#1296db"
                  ></path></svg
              ></span>
              &nbsp;&nbsp;
              <span
                >日同比&nbsp;&nbsp; 19,96%
                <svg
                  t="1652258977565"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="3842"
                  width="16"
                  height="16"
                >
                  <path
                    d="M799.9 96 224.1 96C153.3 96 96 153.3 96 224.1l0 68.3c3.6 1.6 7 3.7 9.9 6.6l198 198L451 349.9c12.5-12.5 32.8-12.5 45.2 0l180.3 180.3 26.9-26.9c11.9-11.9 32.3-6.5 36.6 9.8l38.4 143.1c4.4 16.3-10.5 31.2-26.8 26.8l-143.1-38.4c-16.3-4.4-21.7-24.7-9.8-36.6l32.6-32.6L473.6 417.8 326.5 564.9c-12.5 12.5-32.8 12.5-45.2 0L96 379.6l0 420.3C96 870.7 153.3 928 224.1 928l575.8 0c70.7 0 128.1-57.3 128.1-128.1L928 224.1C928 153.3 870.7 96 799.9 96z"
                    p-id="3843"
                    fill="#d81e06"
                  ></path></svg
              ></span>
            </template>
          </Card>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Card from "./card.vue";
import lineChart from "./Chart/line.vue";
import barChart from "./Chart/bar.vue";
import progressBar from "./Chart/progressBar.vue";

export default {
  name: "card",
  components: {
    Card,
    lineChart,
    barChart,
    progressBar,
  },
};
</script>

<style>
</style>

内容主体区域

处理日期第三方库dayjs

 npm install dayjs --save
import * as dayjs from "dayjs";
天
 const day = dayjs().format("YYYY-MM-DD");
月
 const start = dayjs().startOf("month").format("YYYY-MM-DD");
 const end = dayjs().endOf("month").format("YYYY-MM-DD");
周
 const start = dayjs().day(1).format("YYYY-MM-DD");
 const end = dayjs().day(7).format("YYYY-MM-DD");

年
 const start = dayjs().startOf("year").format("YYYY-MM-DD");
 const end = dayjs().endOf("year").format("YYYY-MM-DD");

代码

<template>
  <el-card class="box-card" style="margin: 10px 0">
    <!-- 头部 -->
    <div slot="header" class="clearfix">
      <!-- 头部左侧内容 -->
      <!-- v-model="activeName" @tab-click="handleClick" -->
      <el-tabs class="tabs" v-model="activeName">
        <el-tab-pane label="销售额" name="sale"></el-tab-pane>
        <el-tab-pane label="访问量" name="visite"></el-tab-pane>
      </el-tabs>
      <!-- 头部右侧内容 -->
      <div class="right">
        <span @click="setDay">今日 </span>
        <span @click="setWeek">本周</span>
        <span @click="setNMonth">本月</span>
        <span @click="setYear">本年</span>

        <el-date-picker
          v-model="date"
          class="date"
          type="datetimerange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="mini"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </div>
    </div>
    <el-row :gutter="10">
      <el-col :span="16">
        <div class="echarts" ref="dom"></div>
      </el-col>
      <el-col :span="8" class="right">
        <div>
          <h3>门店{{ title }}排名</h3>
          <ul>
            <li>
              <span class="rindex">0</span>
              <span>肯德基</span>
              <span class="rvalue">2387</span>
            </li>
            <li>
              <span class="rindex">2</span>
              <span>肯德基</span>
              <span class="rvalue">2387</span>
            </li>
            <li>
              <span class="rindex">3</span>
              <span>肯德基</span>
              <span class="rvalue">2387</span>
            </li>
            <li>
              <span>4</span>
              <span>肯德基</span>
              <span class="rvalue">2387</span>
            </li>
            <li>
              <span>5</span>
              <span>肯德基</span>
              <span class="rvalue">2387</span>
            </li>
            <li>
              <span>6</span>
              <span>肯德基</span>
              <span class="rvalue">2387</span>
            </li>
            <li>
              <span>7</span>
              <span>肯德基</span>
              <span class="rvalue">2387</span>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import * as echarts from "echarts";
import * as dayjs from "dayjs";
export default {
  name: "sale",
  data() {
    return {
      activeName: "sale",
      myecharts: null,
      //收集日期数据
      date: [],
    };
  },
  mounted() {
    // 初始化echarts实例;
    this.myecharts = echarts.init(this.$refs.dom);
    this.myecharts.setOption({
      title: {
        text: this.title + "趋势",
      },
      xAxis: {
        type: "category",
        data: [
          "一月",
          "二月",
          "三月",
          "四月",
          "五月",
          "六月",
          "七月",
          "八月",
          "九月",
          "十月",
          "十一月",
          "十二月",
        ],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130, 108, 120, 110, 80, 120],
          type: "bar",
          showBackground: true,
          backgroundStyle: {
            color: "rgba(180, 180, 180, 0.2)",
          },
        },
      ],
      tooltip: {},
    });
  },
  //计算属性 标题
  computed: {
    title() {
      return this.activeName == "sale" ? "销售额" : "访问量";
    },
  },
  // 监听属性
  watch: {
    title() {
      // 重新修改图表的配置信息
      //图表的配置信息可以在次修改，如果有新值就是新的，没有就是以前的
      this.myecharts.setOption({
        title: {
          text: this.title + "趋势",
        },
      });
    },
  },
  methods: {
    // 本天
    setDay() {
      const day = dayjs().format("YYYY-MM-DD");
      this.date = [day, day];
    },
    //本周
    setWeek() {
      const start = dayjs().day(1).format("YYYY-MM-DD");
      const end = dayjs().day(7).format("YYYY-MM-DD");
      this.date = [start, end];
    },
    //本月
    setNMonth() {
      const start = dayjs().startOf("month").format("YYYY-MM-DD");
      const end = dayjs().endOf("month").format("YYYY-MM-DD");
      this.date = [start, end];
    },
    // 本年
    setYear() {
      const start = dayjs().startOf("year").format("YYYY-MM-DD");
      const end = dayjs().endOf("year").format("YYYY-MM-DD");
      this.date = [start, end];
    },
  },
};
</script>

<style scoped>
.clearfix {
  display: flex;
  justify-content: space-between;
  position: relative;
}
.tabs {
  width: 100%;
}
.right {
  position: absolute;
  right: 0;
}
.right span {
  margin: 0 10px;
}
.date {
  width: 260px;
  max-width: 0 20px;
}
.echarts {
  width: 100%;
  height: 300px;
}
ul {
  list-style: none;
  width: 100%;
  height: 300px;
  padding: 0;
}
ul li {
  height: 8%;
  margin: 10px 0;
}
.rindex {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #000;
  color: #fff;
  text-align: center;
  float: left;
  line-height: 20px;
}
.rvalue {
  float: right;
}
</style>

底部区域

可视化组件

<template>
  <div>
    <div class="header">
      <span class="search">搜索用户数</span>
      <svg
        t="1652257863738"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="1903"
        width="18"
        height="18"
      >
        <path
          d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024z m3.008-92.992a416 416 0 1 0 0-832 416 416 0 0 0 0 832zM448 448h128v384H448V448z m0-256h128v128H448V192z"
          fill="#262626"
          p-id="1904"
        ></path>
      </svg>
    </div>
    <div class="main">
      <span class="main-title">12306</span>
      <span class="main-countent">17.1</span>
      <svg
        t="1652258822317"
        class="icon"
        viewBox="0 0 1028 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2846"
        width="16"
        height="16"
      >
        <path
          d="M546.816 1.024q99.328 0 186.88 37.888t152.576 102.912 102.912 152.576 37.888 186.88-37.888 186.88-102.912 152.576-152.576 102.4-186.88 37.376q-88.064 0-166.4-29.696t-141.824-81.92l116.736-248.832q21.504 34.816 39.936 64.512 15.36 25.6 30.72 48.64t21.504 31.232q11.264 14.336 20.992 26.624t27.136 14.336q21.504 3.072 30.72-7.68t20.48-28.16q3.072-4.096 11.776-21.504t20.992-43.008 27.648-56.832 30.72-64q35.84-75.776 79.872-168.96l108.544 58.368-44.032-316.416-278.528 171.008 121.856 41.984-129.024 265.216q-29.696-48.128-51.2-83.968-9.216-15.36-17.92-29.184t-14.848-24.064l-9.216-15.36q4.096 8.192 0.512 2.56t-11.776-15.872-18.432-20.48-19.456-10.24q-23.552 0-33.792 11.776t-16.384 27.136q-2.048 4.096-10.24 22.016t-21.504 44.544-28.672 59.392l-32.768 63.488q-15.36 32.768-29.696 62.464t-24.576 50.176q-43.008-59.392-66.048-130.048t-23.04-148.48q0-99.328 37.376-186.88t102.4-152.576 152.576-102.912 186.88-37.888z"
          p-id="2847"
          fill="#1296db"
        ></path>
      </svg>
      <svg
        t="1652258977565"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="3842"
        width="16"
        height="16"
      >
        <path
          d="M799.9 96 224.1 96C153.3 96 96 153.3 96 224.1l0 68.3c3.6 1.6 7 3.7 9.9 6.6l198 198L451 349.9c12.5-12.5 32.8-12.5 45.2 0l180.3 180.3 26.9-26.9c11.9-11.9 32.3-6.5 36.6 9.8l38.4 143.1c4.4 16.3-10.5 31.2-26.8 26.8l-143.1-38.4c-16.3-4.4-21.7-24.7-9.8-36.6l32.6-32.6L473.6 417.8 326.5 564.9c-12.5 12.5-32.8 12.5-45.2 0L96 379.6l0 420.3C96 870.7 153.3 928 224.1 928l575.8 0c70.7 0 128.1-57.3 128.1-128.1L928 224.1C928 153.3 870.7 96 799.9 96z"
          p-id="3843"
          fill="#d81e06"
        ></path>
      </svg>
    </div>
    <div class="footer">
      <div class="echarts" ref="dom"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "lineCharts",
  mounted() {
    console.log();
    // 初始化echarts实例;
    let lineChart = echarts.init(this.$refs.dom);

    // 配置数据
    lineChart.setOption({
      xAxis: {
        //隐藏x轴
        show: false,
        // 折线
        type: "category",
      },
      yAxis: {
        //隐藏y轴
        show: false,
      },
      //系列
      series: [
        {
          // 折线
          type: "line",
          data: [10, 7, 33, 4, 88, 9, 33, 4, 55],
          //设置拐点的样式设置
          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>

<style scoped>
.header {
  display: flex;
  align-items: center;
}

.search {
  margin-right: 20px;
}
.main {
  margin-top: 10px 0;
}
.main-title {
  margin-right: 30px;
}
.main-countent {
  margin-right: 10px;
}
.echarts {
  width: 100%;
  height: 50px;
}
</style>

搜索组件

<template>
  <div>
    <el-card>
      <div slot="header" class="header">
        <div class="searchHeader">
          <span>线上热门搜索</span>
          <i class="el-icon-more"></i>
          <el-dropdown>
            <span>
              <i class="el-icon-more"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>黄金糕</el-dropdown-item>
              <el-dropdown-item>狮子头</el-dropdown-item>
              <el-dropdown-item>螺蛳粉</el-dropdown-item>
              <el-dropdown-item>双皮奶</el-dropdown-item>
              <el-dropdown-item>蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <div>
        <el-row :gutter="10">
          <el-col :span="12">
            <lineCharts></lineCharts>
          </el-col>
          <el-col :span="12">
            <lineCharts></lineCharts>
          </el-col>
        </el-row>
      </div>
      <!-- table -->
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column label="排名" width="80" type="index">
        </el-table-column>
        <el-table-column label="搜索关键字"> </el-table-column>
        <el-table-column label="用户名" sortable> </el-table-column>
        <el-table-column label="周长浮" sortable> </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="block">
        <el-pagination
          layout="prev, pager, next"
          :total="1000"
          class="pagination"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import lineCharts from "./lineCharts.vue";
export default {
  name: "search",
  components: {
    lineCharts,
  },
  data() {
    return {
      tableData: [],
    };
  },
};
</script>

<style scoped>
.searchHeader {
  display: flex;
  justify-content: space-between;
}
.header {
  border-bottom: 1px solid #eee;
  padding: 5px o;
}
.pagination {
  float: right;
}
</style>

饼状图区域

<template>
  <div>
    <el-card>
      <div slot="header" class="header">
        <div class="category-header">
          <span>销售额类别占比</span>
          <el-radio-group v-model="value">
            <el-radio-button label="全部渠道"></el-radio-button>
            <el-radio-button label="线上"></el-radio-button>
            <el-radio-button label="门店"></el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <div>
        <div class="charts" ref="charts"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "category",
  data() {
    return {
      value: "全部渠道",
    };
  },
  mounted() {
    let Chart = echarts.init(this.$refs.charts);

    Chart.setOption({
      title: {
        text: "",
        subtext: "",
        left: "center",
        top: "center",
      },
      tooltip: {
        trigger: "item",
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: "#fff",
            borderWidth: 2,
          },
          label: {
            show: false,
            position: "outsize",
          },

          labelLine: {
            show: true,
          },
          data: [
            { value: 1048, name: "Search Engine" },
            { value: 735, name: "Direct" },
            { value: 580, name: "Email" },
            { value: 484, name: "Union Ads" },
            { value: 300, name: "Video Ads" },
          ],
        },
      ],
    });
    Chart.on("mouseover", (par) => {
      //获取鼠标移上的数据
      const { name, value } = par;
      Chart.setOption({
        title: {
          text: name,
          subtext: value,
        },
      });
    });
  },
};
</script>

<style scoped>
.category-header {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.header {
  border-bottom: 1px solid #eee;
}
.charts {
  width: 100%;
  height: 300px;
}
</style>

前端贾公子

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
管理系统首页---可视化

封装card组件 <slot name="footer"></slot> 留出具名插槽使用 <template slot="footer"> <div>日销售额:6589</div> </template><template> <div> <div class="card-header"> ...
复制链接

扫一扫

专栏目录