【Vue+Element-plus】记录后台首页多echart图静态页面

最新推荐文章于 2024-02-13 06:03:17 发布
最新推荐文章于 2024-02-13 06:03:17 发布
阅读量795 收藏 3
点赞数 3
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50863323/article/details/132198774
版权

一、页面效果

二、完整代码

 Index.vue


<template>
  <div>
    <div>
      <DateTime />
      <!-- {{username}} -->
    </div>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <PeopleNum />
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <TrackPatients />
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <HealPatients />
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <DataComparison />
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <VisitsNumber /> <Text></Text>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content bg-purple"><Text></Text></div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple"></div>
      </el-col>
    </el-row>
    <Text></Text>
  </div>
</template>
  
  
<script>
import DateTime from "@/components/HomeChart/DateTime.vue";
import PeopleNum from "@/components/HomeChart/PeopleNumber.vue";
import TrackPatients from "@/components/HomeChart/TrackPatients.vue";
import HealPatients from "@/components/HomeChart/HealPatient.vue";
import DataComparison from "@/components/HomeChart/DataComparison.vue";
import VisitsNumber from "@/components/HomeChart/VisitsNumber.vue";

export default {
  name: "home",
  components: {
    DateTime,
    PeopleNum,
    TrackPatients,
    HealPatients,
    DataComparison,
    VisitsNumber,
  },
  data() {
    return {};
  },
  methods: {},
  created() {
  }
};
</script>
  
<style lang="less" scoped>
.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 10px;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 13px;
  min-height: 150px;
  margin: 15px 12px 0px 12px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>

 DataComparison.vue

<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>粉丝数量排名前五城市</span>
        <el-button style="float: right; padding: 3px 0" type="text"><i class="el-icon-more"></i></el-button>
      </div>
      <div id="charts4" style="width: 460px; height: 220px"></div>
      <!-- <div v-for="o in 4" :key="o" class="text item">
        {{ "列表内容 " + o }}
      </div> -->
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "HealPatients",
  data() {
    return {};
  },
  mounted() {
    let myChart4 = echarts.init(document.getElementById("charts4"));
    myChart4.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // Use axis to trigger tooltip
          type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value'
      },
      yAxis: {
        type: 'category',
        data: ['广州', '深圳', '上海', '重庆', '北京']
      },
      series: [
        {
          name: '原有粉丝',
          type: 'bar',
          stack: 'total',
          label: {
            // show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: [820, 902, 901, 1134, 1390]
        },
        {
          // name: '良好人数',
          type: 'bar',
          stack: 'total',
          label: {
            // show: true
          },
          emphasis: {
            focus: 'series'
          },
          // data: [1233, 1142, 1041, 1344, 1940]
        },
        {
          // name: '111',
          type: 'bar',
          stack: 'total',
          label: {
            // show: true
          },
          emphasis: {
            focus: 'series'
          },
          // data: [220, 182, 191, 234, 290]
        },
        {
          // name: '',
          type: 'bar',
          stack: 'total',
          label: {
            // show: true
          },
          emphasis: {
            focus: 'series'
          },
          // data: [23, 28, 34, 39, 50]
        },
        {
          name: '新增粉丝',
          type: 'bar',
          stack: 'total',
          label: {
            // show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: [150, 212, 201, 154, 190, 330, 410]
        }
      ]
    });
  },
};
</script>

<style scoped>
span{
    font-size: 15px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
</style>

DateTime.vue

<template>
  <div>
    <div class="today">今天,</div>
    <div class="date">2023年3月12日星期日,欢迎您使用乐游后台管理平台。</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // date,
    };
  },
  methods: {
    // date() {}
  }
}
</script>

<style scoped>
.today{
    font-size: 38px;
    margin: 15px;
}
.date{
    margin: 15px;
}
</style>

HealPatient.vue

<template>
  <div>
    <el-card class="box-card">
      <span>一个占位的表</span>
      <el-button style="float: right; padding: 3px 0" type="text"
        ><i class="el-icon-more"></i>
      </el-button>
      <div id="charts3" style="width: 100%; height: 90px"></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "HealPatients",
  data() {
    return {};
  },
  mounted() {
    let myChart3 = echarts.init(document.getElementById("charts3"));
    myChart3.setOption({
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [6, 12, 10, 4, 12, 13, 10],
          type: "line",
          smooth: true,
        },
      ],
    });
  },
};
</script>

<style scoped>
span {
  font-size: 15px;
}
.text {
  font-size: 12px;
}

.item {
  margin-bottom: 50px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>

PeopleNumber.vur

<template>
  <div>
    <el-card class="box-card">
      <span>粉丝总数</span>
      <!-- <div>追踪患者</div> -->
      <el-button style="float: right; padding: 3px 0" type="text"
        ><i class="el-icon-more"></i>
      </el-button>
      <div id="charts1" style="width: 100%; height: 90px"></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "HealPatients",
  data() {
    return {};
  },
  mounted() {
    let myChart1 = echarts.init(document.getElementById("charts1"));
    myChart1.setOption({
      legend: {},
      tooltip: {},
      dataset: {
        source: [
          // ['product', '2015', '2016', '2017'],
          ["1", 55],
          ["2", 56],
          ["3", 66],
          ["4", 73],
          ["5", 83],
          ["6", 103],
          ["7", 108],
        ],
      },
      xAxis: { type: "category" },
      yAxis: {},
      // Declare several bar series, each will be mapped
      // to a column of dataset.source by default.
      series: [{ type: "bar" }],
    });
  },
};
</script>

<style  scoped>
span {
  font-size: 15px;
}
.text {
  font-size: 12px;
}

.item {
  margin-bottom: 50px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>

TrackPatients.vue

<template>
  <div>
    <el-card class="box-card">
        <span>男女占比</span>
        <!-- <div>追踪患者</div> -->
        <el-button style="float: right; padding: 3px 0" type="text"
          ><i class="el-icon-more"></i>
        </el-button>
      <div id="charts" style="width: 100%; height: 90px"></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "TrackPatients",
  data(){
    return{

    }
  },
  mounted(){
    let myChart = echarts.init(document.getElementById('charts'));
    myChart.setOption({
        tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '10%',
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 28,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 67, name: '女' },
        { value: 34, name: '男' },
        { value: 13, name: '未知' },
      ]
    }
  ]
    })
  }

}
</script>

<style  scoped>
span{
    font-size: 15px;
}
 .text {
    font-size: 12px;
  }

  .item {
    margin-bottom: 50px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

</style>

VisitsNumber.vue

<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>七天内新增用户</span>
        <el-button style="float: right; padding: 3px 0" type="text"><i class="el-icon-more"></i></el-button>
      </div>
      <div id="charts5" style="width: 460px; height: 220px"></div>

    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "HealPatients",
  data() {
    return {};
  },
  mounted() {
    let myChart5 = echarts.init(document.getElementById("charts5"));
    myChart5.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: [
            '2023.03.09',
            '2023.03.10',
            '2023.03.11',
            '2023.03.12',
            '2023.03.13',
            '2023.03.14',
            '2023.03.15'
          ],
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: 'Direct',
          type: 'bar',
          barWidth: '60%',
          data: [103, 122, 90, 127, 98, 102, 123]
        }
      ]

    });
  },
};
</script>

<style  scoped>
span{
    font-size: 15px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
</style>

早睡第一人
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios
Vue中使用ECharts制作的一个统计分析页面
weixin_42966151的博客
12-21 6621
Vue中使用ECharts制作的一个统计分析页面
Vue3+TS+ECharts5实现中国地图数据信息显示
honor_zhang的博客
10-04 1640
本篇文章简单介绍了ECharts组件的封装，以及地图组件的封装，大概描述了实际项目中遇到的问题以及自己的一些解决办法，行文比较简单概括，所给代码并不能达到文章开始图片效果，对于一些问题可能还不是能很好的理解，欢迎批评指正，一起探讨交流进步。
单html页面使用Vue3和Element-Plus
茶碗儿
02-13 1364
案例：html单页面操作 vue3，element-plus，axios
Vue3+vite个人博客网站从0-1（element-plus组件库引入+首页样式布局）
m0_56344602的博客
01-20 3994
接着上一节，这一章主要是将element-plus组件库引入到项目中，然后将咱们之前漏掉的css预处理器给安装上来，然后讲首页基本显示出来，如果没有从第一章开始的小伙伴可以先从第一章开始看
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip
最新发布
04-10
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip ## 简介 vue-element-perfect 是一个后台前端解决方案,它使用了最新的前端技术栈、动态路由，权限验证，并且有着丰富的组件,企业级中后台解决...
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
10-14
在Vue.js框架中，结合Element UI库，动态加载路由是一种高效的方法来管理复杂的应用程序菜单结构，特别是当涉及到多级菜单时。以下是如何使用这种方式实现三级菜单页面显示的详细步骤和知识点： 首先，动态加载路由...
vue3-typescript-element-admin:vue3 +打字稿+元素加
05-09
vue3-typescript-element-admin 是一个后台前端解决方案，它基于 vue3、typescript 和 element-plus 实现。 它使用了最新的前端技术栈， 目录结构 ├── doc # 项目文档,采用docsify ├── public # 静态资源 │ ...
Vue+Element实现表格编辑、删除、以及新增行的最优方法
10-16
在Vue和Element UI框架下，实现表格的编辑、删除和新增行是常见的需求。这篇文章将介绍一种优化后的最佳实践，旨在提高代码效率和用户体验。在传统的实现方式中，可能需要通过双击单元格来激活编辑模式，而这里我们...
echarts-2.2.0静态HTML版说明文档
01-08
echarts-2.2.0官方静态HTML版说明文档，内含丰富图形实例及应用属性说明，同时包含源码文件。
杨氏模量平面投影matlab代码-element-plus:基于Vite+Vue3+ElementPlus的后台管理系统
06-08
的后台前端解决方案，支持：开发调试、构建、代码规范校验等。 技术栈 Vue、Webpack、ES6、Vue Router、Vuex、Sass、PostCSS 等。 命令 # 安装依赖 $ npm install # 开发调试 $ npm run serve # 代码校验 $ npm run ...
vue3 ts element-plus上传图片限制大小 尺寸 格式
weixin_48329823的博客
08-04 2668
vue3 ts element-plus上传图片限制大小 尺寸 格式
SpringBoot+Vue+Element-UI实现人事管理系统
分享技术热点，看天下大事
08-22 2799
首先,系统一开始便是清楚的论述了系统的研究内容。其次,剖析系统需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确系统的需求。然后在明白了系统的需求基础上需要进一步地设计系统,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现系统并进行代码编写实现功能。系统的最后章节总结一下自己完成本系统和开发本项目的心得和总结。通过人事管理系统将会使人事管理各个方面的工作效率带来实质性的提升。
vue+elementui+html+css+js昵图网
lutrra的博客
10-05 414
昵图网 在这里插入图片描述 compoment <template> <div class="block" > <el-carousel :interval=6000 :autoplay="true" height="482px"> <el-carousel-item v-for="(item,index) in arrayList" :key="index"> <img ref="img" :src="item
【前端】Vue+Element UI案例：通用后台管理系统-Home组件：卡片、表格
karshey的博客
11-03 5561
Vue+Element UI案例：通用后台管理系统-Home组件：卡片、表格
Vue3 手把手按需引入 Echarts
赵花花的博客
04-27 9645
Vue3按需引入Echarts步骤及踩坑笔记
单HTML中 使用vue 、element 简单示例
清流弯弯
01-05 1010
有的时候，很 懒，不想自己添加额外资源，就想使用VUE 和element现成组件，可以用以下方法实现 <html> <head> <meta charset="UTF-8"> <title>古典小说</title> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/ind
Vue3+elementplus搭建通用管理系统实例六：后台主页搭建下
Java、前端、小程序学习笔记、问题汇总、项目实例分享，有需要请联系。
08-31 1193
使用vue3+elementplus实现通用管理系统框架实例，实现后台管理界面主页的内容完善。
vue3.0+ts+element-plus 后台管理
08-30
Vue3.0是一种流行的JavaScript框架，具有响应式和组件化的特性，可以用于构建现代化的Web应用程序。TypeScript是一种静态类型检查的JavaScript超集，可以增强代码的可维护性和可读性。 Element Plus是一套基于Vue3.0和TypeScript的UI组件库，专为后台管理系统而设计。它提供了丰富的组件和布局选项，可以帮助开发者快速搭建出现代化、响应式并且美观的后台管理界面。 使用Element Plus进行后台管理开发有以下优势： 1. 全面的组件库：Element Plus提供了丰富的UI组件，如表格、表单、对话框、导航栏等，可以满足各种后台管理系统的需求。 2. 响应式布局：Element Plus采用了响应式设计，可以适应不同的屏幕尺寸和设备，使得后台管理系统在各种终端上都能有良好的用户体验。 3. 强大的插件系统：Element Plus支持插件扩展和定制，可以根据实际需求添加或定制各种功能，以满足不同场景的需求。 4. TypeScript支持：由于Vue3.0和Element Plus都支持TypeScript，可以使用静态类型检查来提高代码的可维护性和可读性，减少bug的产生。 总之，使用Vue3.0和Element Plus进行后台管理开发，可以帮助开发者快速搭建现代化、响应式并且美观的后台管理界面，并且利用TypeScript的静态类型检查功能，提高代码质量。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

早睡第一人

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值