VUE2+Element-ui+封装Echarts图表

VUE2+Element-ui+Echarts图表

封装Echarts图表，如下效果图

Home组件代码块，使用的mock.js模拟数据封装

Echarts图表组件

安装所需依赖

cnpm i axios -S 安装axios接口请求
cnpm i mockjs 或 yarn add mockjs 安装mockjs生成模拟随机数据
cnpm i echarts 或 yarn add echarts 安装echarts图表
cnpm i element-ui -S 安装element-ui组件库

安装less
cnpm install less less-loader --sav-dev
cnpm i style-resources-loader --save
cnpm i vue-cli-plugin-style-resources-loader --save

vue.config.js配置如下

const { defineConfig } = require('@vue/cli-service')
const path = require('path')
module.exports = defineConfig({
  lintOnSave: false,
  transpileDependencies: true,
  // 自动打开浏览器
  devServer: {
    // 端口号
    port: 8888,
    // 运行项目自动打开浏览器
    open: true,
  },
  // 添加全局less变量
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        // 路径
        path.resolve(__dirname, './src/assets/less/_variable.less'),
        // _variable.less文件中 @theme-color:#33aef0;（测试less是否正常使用）
      ],
    },
  },
})

在main.js中全局引入mock

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 全局配置 全局初始化css样式
import http from '@/axios/api/config'
import 'element-ui/lib/theme-chalk/index.css'
import './assets/less/reset.less'
import './mock' //引入mock虚拟数据

// 使用 第三方element-ui组件
import ElementUI from 'element-ui'

Vue.use(ElementUI)
// 将axios挂载到原型上面
// 在vue组件中，通过this.$http就可以调用axios实例
Vue.prototype.$http = http

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app')

新建mock文件夹

新建index,js文件内容

import Mock from "mockjs";
// 引入home文件随机生成的mock数据
import homeApi from './home'


// 设置200-2000毫米延时请求数据
Mock.setup({
  timeout: '200-2000'
})

// 首页相关
// 拦截的是/home/getData , get请求，homeApi.getHomeData返回结果作为一个响应式，返回到拦截的ajax
Mock.mock(/\/home\/getOnData/, 'get', homeApi.getHomeData)

新建home.js内容

import Mock from 'mockjs'

// 图表数据
let List = []
// 使用mock模拟数据，渲染
export default {
  getHomeData: () => {
    for (let i = 0; i < 7; i++) {
      List.push(
        Mock.mock({
          vue: Mock.Random.float(100, 8000, 0, 2),
          wechat: Mock.Random.float(100, 8000, 0, 2),
          ES6: Mock.Random.float(100, 8000, 0, 2),
          Redis: Mock.Random.float(100, 8000, 0, 2),
          React: Mock.Random.float(100, 8000, 0, 2),
          springboot: Mock.Random.float(100, 8000, 0, 2)
        })
      )
    }
    return {
      code: 20000,// 真实接口，返回200,这里写2万用于区分
      // Random.float(min,max,dmin,dmax) 返回一个随机浮点数
      // min:最小值，max:最大值，dmin:小数部分最小值，dmax:小数部分最大值
      data: {
        // 饼图
        videoData: [
          {
            name: 'springboot',
            value: Mock.Random.float(1000, 10000, 0, 2)
          },
          {
            name: 'vue',
            value: Mock.Random.float(1000, 10000, 0, 2)
          },
          {
            name: '小程序',
            value: Mock.Random.float(1000, 10000, 0, 2)
          },
          {
            name: 'ES6',
            value: Mock.Random.float(1000, 10000, 0, 2)
          },
          {
            name: 'Redis',
            value: Mock.Random.float(1000, 10000, 0, 2)
          },
          {
            name: 'React',
            value: Mock.Random.float(1000, 10000, 0, 2)
          }
        ],
        // 柱状图
        userData: [
          {
            date: '周一',
            new: Mock.Random.integer(1, 100),
            active: Mock.Random.integer(100, 1000)
          },
          {
            date: '周二',
            new: Mock.Random.integer(1, 100),
            active: Mock.Random.integer(100, 1000)
          },
          {
            date: '周三',
            new: Mock.Random.integer(1, 100),
            active: Mock.Random.integer(100, 1000)
          },
          {
            date: '周四',
            new: Mock.Random.integer(1, 100),
            active: Mock.Random.integer(100, 1000)
          },
          {
            date: '周五',
            new: Mock.Random.integer(1, 100),
            active: Mock.Random.integer(100, 1000)
          },
          {
            date: '周六',
            new: Mock.Random.integer(1, 100),
            active: Mock.Random.integer(100, 1000)
          },
          {
            date: '周日',
            new: Mock.Random.integer(1, 100),
            active: Mock.Random.integer(100, 1000)
          }
        ],
        // 折线图
        orderData: {
          date: ['20191001', '20191002', '20191003', '20191004', '20191005', '20191006', '20191007'],
          data: List
        },
        tableData: [
          {
            name: 'ES6',
            todayBuy: Mock.Random.float(100, 1000, 0, 2),
            monthBuy: Mock.Random.float(3000, 5000, 0, 2),
            totalBuy: Mock.Random.float(40000, 1000000, 0, 2)
          },
          {
            name: '小程序',
            todayBuy: Mock.Random.float(100, 1000, 0, 2),
            monthBuy: Mock.Random.float(3000, 5000, 0, 2),
            totalBuy: Mock.Random.float(40000, 1000000, 0, 2)
          },
          {
            name: 'Vue',
            todayBuy: Mock.Random.float(100, 1000, 0, 2),
            monthBuy: Mock.Random.float(3000, 5000, 0, 2),
            totalBuy: Mock.Random.float(40000, 1000000, 0, 2)
          },
          {
            name: 'springboot',
            todayBuy: Mock.Random.float(100, 1000, 0, 2),
            monthBuy: Mock.Random.float(3000, 5000, 0, 2),
            totalBuy: Mock.Random.float(40000, 1000000, 0, 2)
          },
          {
            name: 'React',
            todayBuy: Mock.Random.float(100, 1000, 0, 2),
            monthBuy: Mock.Random.float(3000, 5000, 0, 2),
            totalBuy: Mock.Random.float(40000, 1000000, 0, 2)
          },
          {
            name: 'Redis',
            todayBuy: Mock.Random.float(100, 1000, 0, 2),
            monthBuy: Mock.Random.float(3000, 5000, 0, 2),
            totalBuy: Mock.Random.float(40000, 1000000, 0, 2)
          }
        ]
      }
    }
  }
}

home.less样式

.home{
  // background-color: blueviolet;
  //左侧，个人信息部分
  .user{
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
    img{
      width: 150px;
      height: 150px;
      border-radius: 50%;
      margin-right: 40px;
    }
    .userinfo{
      &:extend(.user); // less中 的继承写法
      .name{
        max-width: 120px;
        font-size: 32px;
        margin-bottom: 20px;
        overflow: hidden;
          /*超出隐藏*/
          text-overflow: ellipsis;
          /*隐藏后添加省略号*/
          white-space: nowrap;
          /*强制不换行*/
      }
      .name:hover{
        overflow: visible;
      }
      .access{
        color: #999999;
      }
    }
  }
  // 登录时间，登录地址样式
  .login-info{
    p{
      line-height: 28px;
      font-size: 14px;
      color: #999999;
      span{
        color: #666666;
        margin-left: 60px;
      }
    }
  }
  // 右侧顶部，卡片部分
  .num{
    display: flex;
    flex-wrap: wrap; //超出换行
    justify-content: space-between; // 两端对齐
    .el-card{
      width: 32%;
      margin-bottom: 20px;
      /deep/ .el-card__body{
        display: flex;
        padding: 0;
      }
    }
    .icon{
      font-size: 30px;
      width: 80px;
      height: 80px;
      text-align: center;
      line-height: 80px;
      color: #fff;
    }
    .detail{
      margin-left:15px;
      display: flex;
      flex-direction: column; //垂直分布
      justify-content: center; // 垂直居中
      .num{
        font-size: 30px;
        margin-bottom: 10px;
      }
      .txt{
        font-size: 14px;
        text-align: center;
        color: #999999;
      }
    }
  }
  // 右侧，底部each图表部分
  .graph{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    .el-card{
      width: 48%;
    }
  }
}

封装axios请求文件（新建api文件夹，里面存放config.js）

import axios from "axios";

// 创建一个axios实例
const service = axios.create({
  // 请求超时时间
  timeout: 3000
})

// 添加请求拦截器（interceptors就是请求拦截器）
service.interceptors.request.use(
  // 请求成功返回的参数
  config => {
    return config
  },
  err => {
    console.log(err);
  }
)

// 响应拦截器
service.interceptors.response.use(
  response => {
    let res = {}
    // 判断状态码
    res.status = response.status
    res.data = response.data
    return res
  }, //失败返回参数
  err => console.log(err)
)
// 千万不要忘记将，方法抛出去
export default service