正文

vue+element-ui实现后台管理系统---封装一个echarts组件的一点思路(代码片段)

雨点的名字  雨点的名字  2022-12-25  784

关键词：

封装一个ECharts组件的一点思路

有关后台管理系统之前写过三遍博客,看这篇之前最好先看下这三篇博客。另外这里只展示关键部分代码，项目代码放在github上： mall-manage-system

1、Vue + Element-ui实现后台管理系统(1) --- 总述

2、Vue + Element-ui实现后台管理系统(2) --- 项目搭建 + ⾸⻚布局实现

3、Vue + Element-ui实现后台管理系统(3) --- 面包屑 + Tag标签切换功能

这篇主要讲解实现图表的功能：

整体效果

一、封装一个ECharts组件的一点思路

1、绘制一个简单的图表

ECharts上手非常简单，具体简单示例可以参考我之前写的一篇博客：图表工具--- ECharts.js学习（一）简单入门。

2、封装思路

在实际项目开发中，我们会经常与图表打交道,比如 订单数量表、商品销量表、会员数量表等等，它可能是以折线图、柱状图、饼状图等等的方式来展现。

如果我们没有封装组件的思想的话,那么我们每次需要画一个图表都要重复类似相同的工作，而且代码看去非常冗余。所以我们就需要考虑封装一个ECharts组件，这个组件通过接收

不同的数据来渲染成不同的图表,以后当需要生成一张图表的时候，只需要把相关的数据传入到这个组件中，就会渲染对应的图表。

而这里的核心就是 哪些数据是需要我们传入组件中的。针对这个问题我们来看下一个ECharts最简单的示例

  // 指定图表的配置项和数据
        var option = 
            title: 
                text: \'ECharts 入门示例\'
            ,
            tooltip: ,
            legend: 
                data:[\'销量\']
            ,
            xAxis: 
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            ,
            yAxis: ,
            series: [
                name: \'销量\',
                type: \'bar\',
                data: [5, 20, 36, 10, 10, 20]
            ]
        ;

运行结果

这里展示了一个最简单的图表,官方例子地址：5 分钟上手 ECharts,下面对这些参数做个讲解

title : 标题

tooltip : 提示框组件

legend : 图例组件

xAxis : 直角坐标轴中的 x 轴

yAxis : 直角坐标轴中的 y 轴

series : 系列列表。每个系列通过 type 决定自己的图表类型

这几个组件来看 series 和 xAxis 是肯定需要外部传来的数据，y轴的数据跟series中data相关不需要单独再传。至于title , tooltip , legend并不是图表必须的，所以

不是必须要传的。就好比你一个图表你可以没有标题。

注意 这里还有一点 x轴对于柱状图、折线图相关图是一定要有的，但对于饼状图来讲它又不是必须的，所以这里封装一个ECharts组件时,需要考虑这一点。

3、封装ECharts组件

新建一个EChart.vue,作为封装ECharts的组件

<template>
  <!--图表展示在这个div中-->
  <div style="height: 100%" ref="echart">
    echart
  </div>
</template>

<script>
import echarts from \'echarts\'
export default 
  //接收父类两个数据 1、chartData (series数据 + x坐标系数据）2、isAxisChart （是否有x坐标系，如果false，那么上面的xData就为空）
  props: 
    chartData: 
      type: Object,
      default() 
        return 
          xData: [],
          series: []
        
      
    ,
    isAxisChart: 
    //默认type为true 就代表默认是有x轴的
      type: Boolean,
      default: true
    
  ,
  computed: 
    //计算 选择是有x轴 还是没有x轴的数据
    options() 
      return this.isAxisChart ? this.axisOption : this.normalOption
    ,
    //用于下面的resize 改变图表尺寸，在容器大小发生改变时需要手动调用
    isCollapse() 
      return this.$store.state.tab.isCollapse
    
  ,
  watch: 
    //监听chartData数据
    chartData: 
      handler: function() 
        this.initChart()
      ,
      deep: true
    ,
    //监听isCollapse 因为头部水平扩展是一个动画需要时间，所以这里延迟300毫秒
    isCollapse() 
      setTimeout(() => 
        this.resizeChart()
      , 300)
    
  ,
  data() 
    //在数据中有些数据在数据件中是写死的
    return 
      echart: null,
      axisOption: 
        legend: 
          textStyle: 
            color: \'#333\'
          
        ,
        grid: 
          left: \'20%\'
        ,
        tooltip: 
          trigger: \'axis\'
        ,
        xAxis: 
          type: \'category\',
          data: [],
          axisLine: 
            lineStyle: 
              color: \'#17b3a3\'
            
          ,
          axisLabel: 
            color: \'#333\'
          
        ,
        yAxis: [
          
            type: \'value\',
            axisLine: 
              lineStyle: 
                color: \'#17b3a3\'
              
            
          
        ],
        color: [
          \'#2ec7c9\',
          \'#b6a2de\',
          \'#5ab1ef\',
          \'#ffb980\',
          \'#d87a80\',
          \'#8d98b3\',
          \'#e5cf0d\',
          \'#97b552\',
          \'#95706d\',
          \'#dc69aa\',
          \'#07a2a4\',
          \'#9a7fd1\',
          \'#588dd5\'
        ],
        series: []
      ,
      normalOption: 
        tooltip: 
          trigger: \'item\'
        ,
        color: [\'#0f78f4\', \'#dd536b\', \'#9462e5\', \'#a6a6a6\', \'#e1bb22\', \'#39c362\', \'#3ed1cf\'],
        series: []
      
    
  ,
  methods: 
    initChart() 
      //获取处理好的数据
      this.initChartData()
      //获取echart对象
      if (this.echart) 
        this.echart.setOption(this.options)
       else 
        //通过refs获取
        this.echart = echarts.init(this.$refs.echart)
        this.echart.setOption(this.options)
      
    ,
    //处理好数据
    initChartData() 
      if (this.isAxisChart) 
        this.axisOption.xAxis.data = this.chartData.xData
        this.axisOption.series = this.chartData.series
       else 
        this.normalOption.series = this.chartData.series
      
    ,
    resizeChart() 
      this.echart ? this.echart.resize() : \'\'
    
  ,
  mounted() 
    //resize 改变图表尺寸，在容器大小发生改变时需要手动调用（因为侧边栏是可以收缩的，所以这里图表根据是否收缩来改变图表尺寸）
    window.addEventListener(\'resize\', this.resizeChart)
  ,
  //销毁 防止内存泄漏
  destroyed() 
    window.removeEventListener(\'resize\', this.resizeChart)
  

</script>

<style lang="scss" scoped></style>

这样一个简单的公共组件就完成了，接下来我们通过传入不同的数据到这个组件来渲染不同的图表。

二、传入EChart组件数据

我们看到在首页有三个图表,那我们这里就要组装三种不同的数据，传入到EChart.vue组件中，来生成不同的图表。

<template>
   <div>
       <!--图表一 这里的数据是折线图-->
    <echart style="height: 280px" :chartData="echartData.order"></echart>
       <!--图表二 这里的数据是柱状图-->
    <echart :chartData="echartData.user" style="height: 260px"></echart>
       <!--图表三 这里的数据是饼状图 因为饼状图是不用x轴的 所以这里isAxisChart为false-->
    <echart :chartData="echartData.video" style="height: 260px" :isAxisChart="false"> 
    </div>
</template>

<script>
import Echart from \'../../components/EChart\'
export default 
  components: 
    Echart
  ,
  data() 
    return 
      echartData: 
        //图一
        order: 
          xData: [],
          series: []
        ,
        //图二
        user: 
          xData: [],
          series: []
        ,
        //图三 饼状图没有x轴
        mall: 
          series: []
        
      
    
  ,
  methods: 
    getTableData() 
      this.$http.get(\'/home/getData\').then(res => 
        res = res.data
        // 订单折线图
        const order = res.data.orderData
        //x轴数据 为日前
        this.echartData.order.xData = order.date
        // 第一步取出series中的name部分——小米,三星、苹果...
        let keyArray = Object.keys(order.data[0])
        // 第二步，循环添加数据
        keyArray.forEach(key => 
          this.echartData.order.series.push(
            //如果有需要还可以做一步抓换比如：后台返回性别是1、2。那这里key === 1 ? \'男\' : 女,
            name: key === \'wechat\' ? \'小程序\' : key,
            data: order.data.map(item => item[key]),
            type: \'line\'
          )
        )
        // 用户柱状图
        this.echartData.user.xData = res.data.userData.map(item => item.date)
        this.echartData.user.series.push(
          name: \'新增用户\',
          data: res.data.userData.map(item => item.new),
          type: \'bar\'
        )
        this.echartData.user.series.push(
          name: \'活跃用户\',
          data: res.data.userData.map(item => item.active),
          type: \'bar\',
          barGap: 0
        )
        // 商品饼图
        this.echartData.mall.series.push(
          data: res.data.mallData,
          type: \'pie\'
        )
      )
    
  ,
  created() 
    this.getTableData()
  

</script>

大致的思路就是这样的,如果你想在组件中加入title等参数，那也可以修改下这个组件就可以了。

总结下封装组件的基本思路

1、观察⽂档，考虑组件需要的基本参数
2、参数筛选，分为从⽗组件传来的参数和⾃身的参数
3、完善组件，观察设计图，找不同，在⽂档中寻找对应的配置项
4、细节优化，考虑多种场景下，图表⾃适应的处理

别人骂我胖，我会生气，因为我心里承认了我胖。别人说我矮，我就会觉得好笑，因为我心里知道我不可能矮。这就是我们为什么会对别人的攻击生气。
攻我盾者，乃我内心之矛(14)

vue+element-ui实现后台管理系统---封装一个form表单组件和table表格组件(代码片段)

封装一个Form表单组件和Table组件有关后台管理系统之前写过四遍博客,看这篇之前最好先看下这四篇博客。另外这里只展示关键部分代码，项目代码放在github上：mall-manage-system1、Vue+Element-ui实现后台管理系统(1)---总述2、Vue+Element-u... 查看详情

vue+element-ui实现后台管理系统---封装一个form表单组件和table表格组件(代码片段)

实战项目：基于vue第三方库element-ui实现的金融后台管理系统

...2-element-touzi-admin项目是vue2.0+element-ui+node+mongodb构建的后台管理系统，所有的数据都是从服务器实时获取的真实数据，具有真实的注册、登录、数据显示、新增数据、修改数据、删除数据等功能。前端：vue2+vuex+vue-router+webpack2.0+ES6/... 查看详情

使用vue2+element-ui+vuex实现后台管理系统的头部背景色动态点击修改(代码片段)

**以下内容仅供自己学习使用话不多说，直接上代码首先去vuex里面importVuefrom\'vue\';importVuexfrom\'vuex\';Vue.use(Vuex);conststore=newVuex.Store(state:headerColor:\'default-header\',//定义一个默认的颜色,mutations: //setHeaderColor方法可以用来修改headerColor... 查看详情

java项目:角色权限后台脚手架系统(java+springboot+maven+mybaits-plus+vue+element-ui+mysql)

Springboot框架+myBaits-Plus+MySQL实现的角色权限后台管理脚手架系统实战项目，实现的是所有系统最基础的后台管理功能，有了这个脚手架，以后开发别的项目就在这上面快速增加功能即可。本系统主要实现的功能... 查看详情

基于vue实现的新闻后台管理系统-二

基础环境及最后的开发效果已完成说明，接下来就开始配置。?npm初始化新建项目文件夹VueDemo，在其内执行如下脚本npminit-y安装vue-cli构建包yarnaddvue-cliyarninstall安装如下npm包axios:用于发送类似Ajax请求element-ui:用于构建页面yarnaddaxio... 查看详情

使用vuejs2.0和element-ui搭建的一个后台管理界面

说明：　　这是一个用vuejs2.0和element-ui搭建的后台管理界面。相关技术：　　vuejs2.0：一套构建用户界面的渐进式JavaScript框架，易用、灵活、高效。　　element-ui：一套为开发者、设计师和产品经理准备的基于Vue2.0的组件库。　... 查看详情

从零开始搭建vue+element-ui后台管理系统项目到上线(代码片段)

...言之前有些过移动端的项目搭建的文章，感觉不写个pc端管理系统老感觉少了点什么，最近公司项目比较多，恰巧要做一个申报系统的后台管理系统，鉴于对vue技术栈比较熟悉，所以考虑还是使用vue技术栈来做；看过一个不错的... 查看详情

vue+element-ui实现分页效果(代码片段)

...就需要使用分页功能来去完成了。1.本次所使用的是vue2.0+element-ui实现一个分页功能，element-ui这个组件特别丰富，分页中给我提供了一个Pagination 分页，使用Pagination快速完成分页功能最终效果展示<divclass 查看详情

vue+element-ui+slot-scope或原生实现可编辑表格(日历)(代码片段)

...，大牛一般喜欢封装组件框架。2.思路可编辑表格在后台管理系统还是比较常用的，因为比较流行框架element,iview都没有这个应用,所以考虑了两种方法，下面我简单说哈我的两种方法：3.方法一:直接通过element的table组件中的cell-cli... 查看详情

vue后台管理系统模板(代码片段)

推荐一些Vue常用后台管理系统模板前言Vue.js是一个目前比较流行的前端框架，已经到了前端人人都会的地步，今天这里为大家罗列一下基于Vue的后端管理的框架。目前比较流行和Vue搭配的UI组件有Element-UI、iview、Bootstrap-Vu... 查看详情

springboot+vue+elementui实现后台管理系统模板--后端篇：数据表设计使用jwtredissms工具类完善注册登录逻辑(代码片段)

（1）相关博文地址：SpringBoot+Vue+ElementUI实现后台管理系统模板--前端篇（一）：搭建基本环境：https://www.cnblogs.com/l-y-h/p/12930895.htmlSpringBoot+Vue+ElementUI实现后台管理系统模板--前端篇（二）：引入element-ui定义基本页面显示：https://w... 查看详情

vue如何循环渲染element-ui中table内容(代码片段)

对于大多数前端开发者来说，vuejs+element-ui是开发后台管理系统过程中必不可少的技术框架。而后台管理系统中，最常见的形式就是表格和表单，以便用来增删改查。element-ui中table的使用——当el-table元素中注入data对象数组... 查看详情

电商后台管理项目d01(代码片段)

电商后台管理项目d011、项目技术栈2、项目初始化3、`Element-UI`的按需引入。4、路由配置：5、`Axios`的封装6、实现登录功能7、完成首页部分8、用户管理用户列表9、权限管理1、角色管理4、权限列表1、项目技术栈VueVue-RouterElement-UI... 查看详情

laravel+vue+element-ui前端项目一vue实现查看更多5(代码片段)

阅读目录预览Vue源码Vue添加代码部分Laravel后台Vue涉及页面源码E:\\pdf1\\cg\\src\\main.jsE:\\pdf1\\cg\\src\\components\\ViewMore.vueE:\\pdf1\\cg\\src\\components\\NavMenu.vue预览Vue源码Vue添加代码部分E:\\pdf1\\cg\\src\\main.js引入路由impor 查看详情

关于element-ui表格的使用

关于element-ui表格使用的一些方法最近在用Vue.js和elment-ui做一个后台管理项目,不得不说element功能非常强大,提供了许多组件,基本可以满足一些基础的开发了.因为我做的后台系统,里面表格用到比较多,但是其实我也只是一... 查看详情

vue中的element-ui和react的element-ui

首先分享一个使用vue做的后台管理系统网站的示例，里面的控件都是用element-ui做的。https://cangdu.org/manage/#/读了一下它的源代码，深感有了element-ui做UI太方便了，Android里做UI是多么的麻烦。这里记录一下element-ui的官方... 查看详情