首页仪表盘echart_封装万能表单组件

element ui 组件下Layout布局复制到Home.vue

<el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

script添加

data() {
    return {
      list: [
        //
        { val: 13594, title: '最高可借金额', color: '#67ca3a', },
        { val: 9833, title: '回报率', color: '#ff6600' },
        { val: 8888, title: '业绩领跑', color: '#f56c6c' },
        { val: 6666, title: '安稳底薪战队', color: '#409eff' }
      ]
    }
  }

更改

<el-row :gutter="20">
  <el-col :span="6" v-for="(item,index) in list" :key="index">
  <div class="dashboard-item",:style="{ background: item.color }"></div>
  </el-col>

<el-row :gutter="20">
  <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24" v-for="(item,index) in list" :key="index">
  <div class="dashboard-item",:style="{ background: item.color }">   <p>{{ item.title }}</p>
</div>
  </el-col>

样式

.dashboard-item {
  height: 200px;
  font-weight: bold;
  color: #fff;

  >p {
    color: black;
    height: 40px;
    margin: 0;
  }
}

动态数字

import CountTo from 'vue-count-to';
//声明
 components: {
    CountTo
  }
 <CountTo :startVal="0" :endVal="item.val" :duration="3000" />

布局
三个div

<div class="echarts-box">
      <div class="chart1"></div>
      <div class="chart2"></div>
      <div class="chart3"></div>
    </div>

样式

.echarts-box {
  .chart1 {
    width: 100%;
    height: 400px;
  }

  .chart3,
  .chart2 {
    height: 400px;
    width: 50%;
    height: 400px;
  }

  .chart2 {
    float: left;
  }

  .chart3 {
    float: right
  }
   overflow: hidden; 防止塌陷
}

echarts
script上

import echarts from 'echarts';
let option = {
  title: {
    text: 'Stacked Line'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};

修改后如下：

  methods: {
    initCharts() {
      let option1 = {
        title: {
          text: '第一个图表'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: 'Video Ads',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: 'Direct',
            type: 'line',
            stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: 'Search Engine',
            type: 'line',
            stack: 'Total',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      };

根据echart中的API

  this.chart1 = echarts.init(document.querySelector('.chart1'));
      this.chart2 = echarts.init(document.querySelector('.chart2'));
      this.chart3 = echarts.init(document.querySelector('.chart3'));
      this.chart1.setOption(option1); // getOptions() 调试用的
      this.chart2.setOption(option2); 
      this.chart3.setOption(option3); 

 .chart1 {
    width: 100%;
    height: 400px;
  }

柱状图

let posList = [
  'left',
  'right',
  'top',
  'bottom',
  'inside',
  'insideTop',
  'insideLeft',
  'insideRight',
  'insideBottom',
  'insideTopLeft',
  'insideTopRight',
  'insideBottomLeft',
  'insideBottomRight'
];
let app = {}; //新增

app.configParameters = {
  rotate: {
    min: -90,
    max: 90
  },
  align: {
    options: {
      left: 'left',
      center: 'center',
      right: 'right'
    }
  },
  verticalAlign: {
    options: {
      top: 'top',
      middle: 'middle',
      bottom: 'bottom'
    }
  },
  position: {
    options: posList.reduce(function (map, pos) {
      map[pos] = pos;
      return map;
    }, {})
  },
  distance: {
    min: 0,
    max: 100
  }
};
app.config = {
  rotate: 90,
  align: 'left',
  verticalAlign: 'middle',
  position: 'insideBottom',
  distance: 15,
  onChange: function () {
    const labelOption = {
      rotate: app.config.rotate,
      align: app.config.align,
      verticalAlign: app.config.verticalAlign,
      position: app.config.position,
      distance: app.config.distance
    };
this.chart2.setOption({
      series: [
        {
          label: labelOption
        },
        {
          label: labelOption
        },
        {
          label: labelOption
        },
        {
          label: labelOption
        }
      ]
    });
  }
};
const labelOption = {
  show: true,
  position: app.config.position,
  distance: app.config.distance,
  align: app.config.align,
  verticalAlign: app.config.verticalAlign,
  rotate: app.config.rotate,
  formatter: '{c}  {name|{a}}',
  fontSize: 16,
  rich: {
    name: {}
  }
};
let option2 = { //修改
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['Forest', 'Steppe', 'Desert', 'Wetland']
  },
  toolbox: {
    show: true,
    orient: 'vertical',
    left: 'right',
    top: 'center',
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar', 'stack'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  xAxis: [
    {
      type: 'category',
      axisTick: { show: false },
      data: ['2012', '2013', '2014', '2015', '2016']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Forest',
      type: 'bar',
      barGap: 0,
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [320, 332, 301, 334, 390]
    },
    {
      name: 'Steppe',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290]
    },
    {
      name: 'Desert',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190]
    },
    {
      name: 'Wetland',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [98, 77, 101, 99, 40]
    }
  ]
};

let option3 = {
  angleAxis: {},
  radiusAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu'],
    z: 10
  },
  polar: {},
  series: [
    {
      type: 'bar',
      data: [1, 2, 3, 4],
      coordinateSystem: 'polar',
      name: 'A',
      stack: 'a',
      emphasis: {
        focus: 'series'
      }
    },
    {
      type: 'bar',
      data: [2, 4, 6, 8],
      coordinateSystem: 'polar',
      name: 'B',
      stack: 'a',
      emphasis: {
        focus: 'series'
      }
    },
    {
      type: 'bar',
      data: [1, 2, 3, 4],
      coordinateSystem: 'polar',
      name: 'C',
      stack: 'a',
      emphasis: {
        focus: 'series'
      }
    }
  ],
  legend: {
    show: true,
    data: ['A', 'B', 'C']
  }
};

图形适配

 resize(){
      this.chart1.resize();
      this.chart2.resize();
      this.chart3.resize();
    },
  },
  mounted() {
    this.initCharts();
    this.resizeCallback = this.resize.bind(this);
    window.addEventListener('resize', this.resizeCallback)
  },
   beforeDestroy(){
    // 移除的函数一定要是相同的
    window.removeEventListener('resize', this.resizeCallback)
  },

封装表单组件GFormCreator.vue

 props: {
        conf: {
            type: Object,
            required: true
        }
    },
 render(h) {
     // jsx
        return (
            <div class="form-box">
                <h1>{title}</h1>
                {title && <hr />}

                {/* 表单区域  */}
                <el-form label-width="80px">
                    {this.renderRows(items)}
                </el-form>

                {/*btns按钮*/}
                <div class="btns clear-fix">
                    { /* 仅仅填DOM */}
                    {this.$slots.default}
                    { /* 仅仅填DOM,给父传递参数this.$scopedSlots.default(data) */}

                </div>

            </div>


        )
 }

新建views ->permission->create.vue
layout中引入的3个组件和声明删除
增加plugins文件夹，

import GAsideMenu from '@/components/GAsideMenu';
import GBreadcrumb from '@/components/GBreadcrumb';
import GDropdown from '@/components/GDropdown';
import GFormCreator from '@/components/GFormCreator';


// 自动引动 require.context('../components/xxx',true,/\.vue$/)
// Vue.use({ install(Vue) })
function install (Vue){
    Vue.component(GAsideMenu.name,GAsideMenu);
    Vue.component(GBreadcrumb.name,GBreadcrumb);
    Vue.component(GDropdown.name,GDropdown);
    Vue.component(GFormCreator.name,GFormCreator);
}

export default {
    install
}

在main中

import plugins from '@/plugins'
Vue.use(plugins); // 安装自己的插件

createFormConf.js

export default Object.freeze({ // 提升性能(不需要响应式)
    // title: '123',
    items: [
        [{ type: 'input', label: '用户名', colspan: 24, key: 'username' }],
        [{ type: 'input', label: '密码', colspan: 24, key: 'password' }],
        [{ type: 'input', label: '确认密码', colspan: 24, key: 'confirmPwd' }],
    ],
    rules: {
        username: [{ require: true }],
        password: [{ require: true }],
    }
});

create.vue

<template>
    <GFormCreator ref="createForm" :conf="createConf">
        <!-- 自定义的按钮 -->
        <template #default>
            <div class="left">
                <el-button @click="doCreate" type="primary">创建管理员</el-button>
                <el-button @click="doReset">重置</el-button>
            </div>
        </template>
    </GFormCreator>

</template>

<script>
import createConf from './createFormConf'
export default {
    methods: {
        doCreate() {
            // 调用submit
            this.$refs.createForm.submit(data => {
                if (data) {
                    console.log('验证成功', data);
                } else {
                    console.log('验证失败')
                }
            })
        },
        doReset() {
            this.$refs.createForm.reset();
        }
    },
    data() {
        return {
            createConf
        }
    }
}
</script>

<style>
</style>