Vue项目echarts的封装加mock模拟数据案例

echarts在我们开发中应该用到很多，下面是这个案例的效果

毫无疑问，这些数据都是后台传过来的，我们这里就用mock来模拟后台数据了，这样每次请求的数据都不一样，更能展现图表的效果

先把mock数据弄好吧

yarn add mockjs

然后创建一个mock文件夹，里面创建一个home.js文件

home.js就放图表的数据

import Mock from 'mockjs'

// 图表数据
let List = []
export default {
  getStatisticalData: () => {
    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,
      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: ['20200703', '20200704', '20200705', '20200706', '20200707', '20200708', '20200709'],
          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)
          }
        ]
      }
    }
  }
}

在mock文件夹中再创建一个index.js

index.js

import Mock from 'mockjs';
import homeApi from './home'

// 设置延时
Mock.setup({
    timeout: '200-1000'
})

Mock.mock(/\/home\/getData/,'get',homeApi.getStatisticalData)
这个就相当于接口了

我们再封装一个http网络请求

config.js

import axios from 'axios'


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

})

// 请求拦截器
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

然后我们到main.js中引入这个文件夹，再挂载http到原型

import './mock'
import http from './config'
Vue.prototype.$http = http

下面就放代码了

先放封装的echarts代码

首先安装   yarn add echarts

<template>
  <div style="height:100%" ref="echart">echart</div>
</template>

<script>
import echarts from "echarts";
export default {
  props: {
    chartData: {
      type: Object,
      default() {
        return {
          xData: [],
          series: []
        };
      }
    },
    //判断是状图还是饼图
    isAxisChart: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    options() {
      return this.isAxisChart ? this.axisOption : this.normalOption;
    },
  },
  data() {
    return {
      echart: null,
      //有坐标轴
      axisOption: {
        legend: {
          textStyle: {
            color: '#333'
          }
        },
         tooltip: {
          trigger: 'axis'
        },
         grid: {
          left: '20%'
        },
        xAxis: {
          type: "category",
          data: [],
          axisLine: {
            lineStyle: {
              color: "#17b3a3"
            }
          },
          axisLabel: {
            color: "#333"
          }
        },
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#17b3a3"
              }
            }
          }
        ],
        series: []
      },
      //没有坐标轴
      normalOption: {
         tooltip: {
          trigger: 'item'
        },
        color: ['#0f78f4', '#dd536b', '#9462e5', '#a6a6a6', '#e1bb22', '#39c362', '#3ed1cf'],
        series: []
      },
      color: [
        "#2ec7c9",
        "#b6a2de",
        "#5ab1ef",
        "#ffb980",
        "#d87a80",
        "#8d98b3",
        "#e5cf0d",
        "#97b552",
        "#95706d",
        "#dc69aa",
        "#07a2a4",
        "#9a7fd1",
        "#588dd5",
        "#f5994e",
        "#c05050",
        "#59678c",
        "#c9ab00",
        "#7eb00a",
        "#6f5553",
        "#c14089"
      ]
    };
  },
  watch: {
    chartData: {
      handler: function() {
        this.initChart();
      },
      deep: true
    },
  },
  methods: {
    //初始化
    initChart() {
      this.initChartData();
      if (this.echart) {
        this.echart.setOption(this.options);
      } else {
        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() {
    window.addEventListener('resize', this.resizeChart)
  },
  //避免内存泄露
   destroyed() {
    window.removeEventListener('resize', this.resizeChart)
  }
};
</script>

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

我们之后获取的数据格式是这样的,一个对应一个

接着将这个组件导入

import EChart from "../../components/EChart";
     
     //第一个
    <EChart
      style="height:280px;"
      :chartData="echartData.order"
    ></EChart>
    //第二个
   <EChart :chartData="echartData.user"
    style="height:260px;">
    </EChart>
    //第三个
   <EChart
      :chartData="echartData.video"
      :isAxisChart="false"
      style="height:260px;"
    ></EChart>

data中

 tableData: [],
 echartData: {
        order: {
          xData: [],
          series: [],
        },
        user: {
          xData: [],
          series: [],
        },
        video: {
          series: [],
        },
      },

methods中

methods: {
    // 获取table表数据
    getTableData() {
      this.$http
        .get("/home/getData")
        .then((res) => {
          console.log(res)
          res = res.data;
          this.tableData = res.data.tableData;
          // 获取echartsdata--order--订单折线图
          const order = res.data.orderData;
          this.echartData.order.xData = order.date;
          // 取出series中name部分---键名
          let keyArray = Object.keys(order.data[0]);
          keyArray.forEach((key) => {
            this.echartData.order.series.push({
              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.video.series.push({
            data: res.data.videoData,
            type: "pie",
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取echarts图表数据
  },

created中

  created() {
    this.getTableData();
  },

完了，就是这些