vue + echarts封装 mock模拟数据_vue+echarts+mock-程序员宅基地

技术标签: vue  

一、准备工作

1、vue全家桶

2、mock 安装配置

作⽤:⽣成随机数据,拦截ajax请求
安装: 用yarn或者npm

 yarn add mockjs
 npm install mockjs

核⼼:
Mock.mock()

   // 根据数据模板⽣成模拟数据
Mock.mock( rurl, rtype, template)
/*
** rurl: 表示需要拦截的 URL,可以是 URL 字符串或 URL 正则
** eg. /\/domain\/list\.json/、'/domian/list.json'
*/

Mock.Random()
随机⽣成数据

3、axios 全局配置

安装:npm install axios
在这里插入图片描述
目录 src/api/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

import http from "@/api/config";
Vue.prototype.$http = http;

二、使用Mock随机返回主页数据

1、新建mock文件夹

在这里插入图片描述

2、配置mock请求时间

目录src/mock/index.js

import Mock from "mockjs"; //引入mockjs
//设置200-2000毫秒延迟数据 模拟随机延时效果 
 Mock.setup({
    
   timeout: "200-2000"
 });

3、新建home.js存放主页测试数据

目录src/mock/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)
        })
      );
    }
    return {
    
      code: 20000,
      data: {
    
        // 饼图
        videoData: [
          {
    
            name: "极高",
            value: Mock.Random.float(0, 100, 0, 2)
          },
          {
    
            name: "高",
            value: Mock.Random.float(0, 100, 0, 2)
          },
          {
    
            name: "中",
            value: Mock.Random.float(0, 100, 0, 2)
          },
          {
    
            name: "低",
            value: Mock.Random.float(0, 100, 0, 2)
          }
        ],
        videoData1: [
          {
    
            name: "APP",
            value: Mock.Random.float(0, 100, 0, 2)
          }
        ],
        videoData2: [
          {
    
            name: "网站",
            value: Mock.Random.float(0, 100, 0, 2)
          },
          {
    
            name: "",
            value: Mock.Random.float(0, 100, 0, 2)
          }
        ],
        mapData: [
          {
     name: "北京", value: Mock.Random.integer(100, 1000) },
          {
     name: "天津", value: Mock.Random.integer(100, 1000) },
          {
     name: "上海", value: Mock.Random.integer(100, 1000) },
          {
     name: "重庆", value: Mock.Random.integer(100, 1000) },
          {
     name: "河北", value: Mock.Random.integer(100, 1000) },
          {
     name: "河南", value: Mock.Random.integer(100, 1000) },
          {
     name: "云南", value: Mock.Random.integer(100, 1000) },
          {
     name: "辽宁", value: Mock.Random.integer(100, 1000) },
          {
     name: "黑龙江", value: Mock.Random.integer(100, 1000) },
          {
     name: "湖南", value: Mock.Random.integer(100, 1000) },
          {
     name: "安徽", value: Mock.Random.integer(100, 1000) },
          {
     name: "山东", value: Mock.Random.integer(100, 1000) },
          {
     name: "新疆", value: Mock.Random.integer(100, 1000) },
          {
     name: "江苏", value: Mock.Random.integer(100, 1000) },
          {
     name: "浙江", value: Mock.Random.integer(100, 1000) },
          {
     name: "江西", value: Mock.Random.integer(100, 1000) },
          {
     name: "湖北", value: Mock.Random.integer(100, 1000) },
          {
     name: "广西", value: Mock.Random.integer(100, 1000) },
          {
     name: "甘肃", value: Mock.Random.integer(100, 1000) },
          {
     name: "山西", value: Mock.Random.integer(100, 1000) },
          {
     name: "内蒙古", value: Mock.Random.integer(100, 1000) },
          {
     name: "陕西", value: Mock.Random.integer(100, 1000) },
          {
     name: "吉林", value: Mock.Random.integer(100, 1000) },
          {
     name: "福建", value: Mock.Random.integer(100, 1000) },
          {
     name: "贵州", value: Mock.Random.integer(100, 1000) },
          {
     name: "广东", value: Mock.Random.integer(100, 1000) },
          {
     name: "青海", value: Mock.Random.integer(100, 1000) },
          {
     name: "西藏", value: Mock.Random.integer(100, 1000) },
          {
     name: "四川", value: Mock.Random.integer(100, 1000) },
          {
     name: "宁夏", value: Mock.Random.integer(100, 1000) },
          {
     name: "海南", value: Mock.Random.integer(100, 1000) },
          {
     name: "台湾", value: Mock.Random.integer(100, 1000) },
          {
     name: "香港", value: Mock.Random.integer(100, 1000) },
          {
     name: "澳门", value: Mock.Random.integer(100, 1000) }
        ],
        // 柱状图
        userData: [
          {
    
            date: "2019-8",
            new: Mock.Random.integer(1, 2500000),
            active: Mock.Random.integer(100, 1000)
          },
          {
    
            date: "2019-9",
            new: Mock.Random.integer(1, 2500000),
            active: Mock.Random.integer(100, 1000)
          },
          {
    
            date: "2019-10",
            new: Mock.Random.integer(1, 2500000),
            active: Mock.Random.integer(100, 1000)
          },
          {
    
            date: "2019-11",
            new: Mock.Random.integer(1, 2500000),
            active: Mock.Random.integer(100, 1000)
          },
          {
    
            date: "2019-12",
            new: Mock.Random.integer(1, 2500000),
            active: Mock.Random.integer(100, 1000)
          }
        ],
        // 柱状图
        userData1: [
          {
    
            date: "2019-8",
            new: Mock.Random.integer(1, 2500000),
            active: Mock.Random.integer(100, 1000)
          },
          {
    
            date: "2019-9",
            new: Mock.Random.integer(1, 2500000),
            active: Mock.Random.integer(100, 1000)
          },
          {
    
            date: "2019-10",
            new: Mock.Random.integer(1, 2500000),
            active: Mock.Random.integer(100, 1000)
          },
          {
    
            date: "2019-11",
            new: Mock.Random.integer(1, 2500000),
            active: Mock.Random.integer(100, 1000)
          },
          {
    
            date: "2019-12",
            new: Mock.Random.integer(1, 2500000),
            active: Mock.Random.integer(100, 1000)
          }
        ],
        // 折线图
        orderData: {
    
          names: ["拦截数量"],
          date: [
            "20191001",
            "20191002",
            "20191003",
            "20191004",
            "20191005",
            "20191006",
            "20191007"
          ],
          data: List
        },
        tableData: [
          {
    
            name: "ES6",
            unit: "Kbps",
            todayBuy: Mock.Random.float(100, 1000, 0, 2)
          }
        ]
      }
    };
  }
};

4、安装mock的语法生成数据

目录src/mock/index.js

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

//设置200-2000毫秒延迟数据
// Mock.setup({
    
//   timeout: "200-2000"
// });

//首页相关
Mock.mock(/\/home\/getData/, "get", homeApi.getStatisticalData);

挂在到main.js

import "./mock";

三、封装echarts组件

1、首先安装echarts

yarn add echarts

2、建立EChart组件

在目录componetns下新建EChart.vue

<template>
  <div style="height:100%" ref="echart"></div>
</template>
<script>
//封装思路
//1.观察文档,考虑组件需要的基本参数
//2.参数筛选,分为从父组件传来的参数和自身的参数
//3.完善组件,观察设计图,找不同,在文档中寻找对应的配置项
//4.细节优化,考虑多种场景下,图标的自适应的处理
import echarts from "echarts";

export default {
    
  //父组件出来的数据
  props: {
    
    //定义动态传入
    chartData: {
    
      type: Object,
      //默认值
      default() {
    
        return {
    
          //动态传入的参数
          xData: [],
          serites: []
        };
      }
    },
    //判断图表有无坐标轴
    isAxisChart: {
    
      type: Boolean,
      default: true
    }
  },
  computed: {
    
    //判断使用axisOption 还是normalOption
    options() {
    
      return this.isAxisChart ? this.axisOption : this.normalOption;
    }
  },
  //监听
  watch: {
    
    chartData: {
    
      handler: function() {
    
        this.initChart();
      },
      deep: true
    }
  },
  data() {
    
    return {
    
      echart: null,
      //有坐标轴
      axisOption: {
    
        //d
        // legend: {
    
        //   textStyle: {
    
        //     color: "#fff"
        //   }
        // },
        grid: {
    
          left: "10%",
          y: 20
        },

        //触发时机
        tooltip: {
    
          trigger: "axis"
        },

        //X轴
        xAxis: {
    
          //category类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。
          type: "category",
          data: [],
          axisLine: {
    
            lineStyle: {
    
              color: "#333333"
            }
          },
          axisLabel: {
    
            color: "#fff",
            fontSize: 6
          }
        },
        //Y轴
        yAxis: [
          {
    
            type: "value",
            axisLine: {
    
              lineStyle: {
    
                color: "#333333"
              }
            },
            axisLabel: {
    
              color: "#fff",
              fontSize: 6
            },
            splitLine: {
    
              show: false
            }
          }
        ],
        color: [
          "#29FCB5",
          "#b6a2de",
          "#5ab1ef",
          "#ffb980",
          "#d87a80",
          "#8d98b3",
          "#e5cf0d",
          "#97b552",
          "#95706d",
          "#dc69aa",
          "#07a2a4",
          "#9a7fd1",
          "#588dd5",
          "#f5994e",
          "#c05050",
          "#59678c",
          "#c9ab00",
          "#7eb00a",
          "#6f5553",
          "#c14089"
        ],
        series: []
      },
      //无坐标轴
      normalOption: {
    
        tooltip: {
    
          trigger: "item"
        },
        color: [
          "#0f78f4",
          "#dd536b",
          "#9462e5",
          "#a6a6a6",
          "#e1bb22",
          "#39c362",
          "#3ed1cf"
        ],
        series: []
      }
    };
  },
  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;
        console.log("axis");
      } else {
    
        this.normalOption.series = this.chartData.series;
        console.log("normal");
      }
    },
    //浏览器变化的时候 自适应
    resizeChart() {
    
      this.echart ? this.echart.resize() : "";
    }
  },
  mounted() {
    
    window.addEventListener("resize", this.resizeChart);
  },
  //销毁
  destroyed() {
    
    window.removeEventListener("resize", this.resizeChart);
  }
};
</script>

3、项目导入组件

导入目录 views/demo1/index.vue

<template>
  <div>
    <div style="float:left;width:60%">
      <echart
        :chartData="echartData.order"
        style="height:300px;width:500px;float:left"
      ></echart>
      <echart
        :chartData="echartData.user"
        style="height:300px;width:500px;float:left"
      ></echart>
      <echart
        :chartData="echartData.video"
        :isAxisChart="false"
        style="height:300px;width:500px;float:left;margin-top:100px"
      ></echart>
    </div>
    <div style="float:left;width:40%">
      <EPied
        :chartData="echartData.video"
        :isAxisChart="false"
        style="height:300px;width:500px;float:left;margin-top:100px"
      ></EPied>
    </div>
  </div>
</template>
<script>
import Echart from "../../components/EChart/EChart";
import EPied from "../../components/EChart/EChartBardemo";
export default {
    
  components: {
    
    Echart,
    EPied
  },

  data() {
    
    return {
    
      echartData: {
    
        order: {
    
          xData: [],
          series: []
        },
        user: {
    
          xData: [],
          series: []
        },
        video: {
    
          series: []
        },
        map: {
    
          series: []
        }
      }
    };
  },
  methods: {
    
    getTableData() {
    
      this.$http.get("/home/getData").then(res => {
    
        res = res.data;
        //订单折线图
        const order = res.data.orderData;
        this.echartData.order.xData = order.date;
        //第一步取出series中的name部分 -键名
        let keyArray = Object.keys(order.data[0]);
        console.log(keyArray);
        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",
          radius: ["70%", "85%"],
          center: ["40%", "50%"],
          avoidLabelOverlap: false,
          label: {
    
            normal: {
    
              show: false,
              position: "center"
            },
            emphasis: {
    
              show: true,
              // 自定义标签
              formatter: ["{num|{d}" + "%}", "{bt|{b}}"].join("\n"),
              rich: {
    
                num: {
    
                  fontSize: "24",
                  lineHeight: "40"
                },
                bt: {
    
                  fontSize: "10"
                }
              }
            }
          },
          // 视觉引导线隐藏
          labelLine: {
    
            normal: {
    
              show: false
            }
          }
        });
        // 地图
        this.echartData.map.series.push({
    
          data: res.data.mapData,
          type: "map",
          mapType: "重庆",
          itemStyle: {
    
            normal: {
     label: {
     show: true } },
            emphasis: {
     label: {
     show: true } }
          }
        });
      });
    },
    pieActive() {
    
      // 用定时器控制饼图高亮
      setInterval(() => {
    
        let index = -1; //高亮所在下标
        let dataLength = this.echartData.video.series[0].data.length; // 当前饼图有多少个扇形
        // 清除之前的高亮
        this.echartData.video.dispatchAction({
    
          type: "downplay",
          seriesIndex: 0,
          dataIndex: index
        });
        index = (index + 1) % dataLength;
        // 高亮当前图形
        this.echartData.video.dispatchAction({
    
          type: "highlight",
          seriesIndex: 0,
          dataIndex: index
        });
        // 显示 tooltip
        this.echartData.video.dispatchAction({
    
          type: "showTip",
          seriesIndex: 0,
          dataIndex: index
        });
      }, 2000);
    }
  },

  created() {
    
    this.getTableData();
    this.pieActive();
  },
  watch: {
    
    //观察option的变化
    option: {
    
      handler(newVal, oldVal) {
    
        if (this.Echart) {
    
          if (newVal) {
    
            this.Echart.setOption(newVal);
          } else {
    
            this.Echart.setOption(oldVal);
          }
        } else {
    
          this.init();
        }
      },
      deep: true //对象内部属性的监听,关键。
    }
  }
};
</script>

在这里插入图片描述
项目下载地址 //download.csdn.net/download/qq_35956539/12046855
安装 npm install
运行 npm run serve
项目地址:https://github.com/menglanbote/data-vis

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_35956539/article/details/103635436

智能推荐

【配准论文解读】Color Point Cloud Registration with 4D ICP Algorithm_关于企业投资决策中的4dicp框架表述-程序员宅基地

文章浏览阅读2.3k次,点赞2次,收藏14次。本文是对于IEEE ICRA2011的论文《Color Point Cloud Registration with 4D ICP Algorithm》做一解读,这篇文章主要介绍了一种通过HSV加权实现点云配准的方法,如有不正之处,欢迎斧正!一、Abstract 本文介绍了使用相关图像中的色调数据加速3D点云配准的方法。通过在传统三维坐标下加入加权的图像色调信息..._关于企业投资决策中的4dicp框架表述

Confluence使用教程 用户手册_confluence 使用教程-程序员宅基地

文章浏览阅读8.3k次,点赞9次,收藏49次。文章目录一、Confluence简介1.1、能做什..._confluence 使用教程

【LTE】LTE中SINR的理解-程序员宅基地

文章浏览阅读5.2k次,点赞3次,收藏49次。SINR:信号与干扰加噪声比 (Signal to Interference plus Noise Ratio)是指接收到的有用信号的强度与接收到的干扰信号(噪声和干扰)的强度的比值;要了解SINR,可以先了解它的近亲,SNR。SNR(Signal Noise Ratio,信噪比),就是信号与噪声的比值。这一概念,估计学过通信基础的读者都很熟悉,在下面著名的香农公式中就有出现。C=B×log₂(1..._lte sinr snr

Geos库学习之(三)——几何对象空间关系_geos空间关系计算-程序员宅基地

文章浏览阅读2.9k次,点赞4次,收藏5次。目录一.基础介绍二.GEOS里面空间几何关系判断的用法三.总结一.基础介绍常见的基础几何对象主要包括点、线、面所构成的图形。在进行几何对象空间关系判断的时候,我们在GEOS里面主要使用的是DE-9IM(Dimensionally Extended nine-Intersection Model (DE-9IM)),也称为九交模型。通常我们会将一个几何对象分为三个部分:外部(ex..._geos空间关系计算

java bean public 成员_怎么创建javabean-程序员宅基地

文章浏览阅读283次。详细内容本篇文章就来介绍Javabean是如何创建的,有哪些规则?JavaBean通常在Jsp页面中使用,JavaBean的创建方法两种。一就像使用普通Java类一样创建JavaBean实例,可以使用New关键字,后面使用构造方法,来实例化一个JavaBean实例;二是在Jsp页面通常使用Jsp动作标签使用使用JavaBean。这里主要介绍第一种创建方式。首先创建一个Web项目,因为JavaBea..._beanpublic

ZooKeeper 典型应用场景一览-程序员宅基地

文章浏览阅读6.1k次。看zookeeper这么长时间,不少东西都没太深,因为完全不知道为什么看,为什么学。每学一个新技术的时候我喜欢琢磨这玩意到底能干什么,能解决我们开发过程中的哪些痛点。然后就知道自己现在急不急于需要他,然后分门别类的排序优先级,现在的技术太多了,学不过来呀数据发布与订阅(配置中心)发布与订阅模型,即所谓的配置中心,顾名思义就是发布者将数据发布到ZK节点上,供订阅者动态获取数据,实现配置信息的集中式管...

随便推点

error C2664: “fopen”: 不能将参数 1 从“CString”转换为“const char *” _error c2664 fopen-程序员宅基地

文章浏览阅读1.1w次。其实还可能出现其它类似的问题,如:error C2664: “fopen”: 不能将参数 1 从“CString”转换为“const char *”error C2039: “strcpy”: 不是“ATL::CStringT”的成员但是程序在VC6下编译得很好,经过研究发现是设置上有所不同。在VC6中,默认使用MBCS编码,即多字节字符;而VC8、VC7默认的是Unicode编码,所以...关于这两种_error c2664 fopen

VS中MFC项目文件特别大的解决办法-程序员宅基地

文章浏览阅读1.6k次。转 来自http://m.zhizuobiao.com/vc/vc-18082800177/自己插个眼项目文件比较大因为 项目下有个隐藏文件夹.vs下面是解决办法本文主要向大家介绍了VC编程之Visual Studio 2015自动生成的大文件xxx.vc.db的删除问题,通过具体的内容向大家展示,希望对大家学习VC编程有所帮助。用vs2015创建Visual C..._为什么vs一个项目这么大

Eps总结(3)——Eps使用点云生成等高线及高程点_eps生成等高线-程序员宅基地

文章浏览阅读3.4w次,点赞7次,收藏53次。一、在工作空间中右键插入Eps点云数据(有的版本需要在工具栏“三维测图”中将点云转换为pcd格式,然后再在工作空间插入,我的这个版本不需要转换)二、生成等高线1、在工作空间插入点云。2、使用“1”线建一个闭合范围框。3、在工作空间中,对需要生成等高线的点云进行“右键”>”生成等高线”4、修改需要的登高距,具体大小需要根据《工程测量规范》进行计算。然后手绘或者由..._eps生成等高线

Go版GTK:环境搭建(windows)_win go gtk-程序员宅基地

文章浏览阅读8.1w次,点赞13次,收藏41次。1 下载安装msys2MSYS2 (Minimal SYStem 2) 是一个MSYS的独立改写版本,主要用于 shell 命令行开发环境。同时它也是一个在Cygwin (POSIX 兼容性层) 和 MinGW-w64(从”MinGW-生成”)基础上产生的,追求更好的互操作性的 Windows 软件。官方网址:http://www.msys2.org/ 百度云下载地址:https:/..._win go gtk

新闻文本分类之FastText_fasttext属于神经网络的一种吗-程序员宅基地

文章浏览阅读479次。深度学习也可以用于文本表示,还可以将其映射到一个低纬空间。其中比较典型的例子有:FastText、Word2Vec和Bert。在本章我们将介绍FastText。1. FastText入门篇1.1定义FastText是一种典型的深度学习词向量的表示方法,它非常简单通过Embedding层将单词映射到稠密空间,然后将句子中所有的单词在Embedding空间中进行平均,进而完成分类操作。所以FastText是一个三层的神经网络,输入层、隐含层和输出层。1.2优点FastText在文本分类任务上,是优_fasttext属于神经网络的一种吗

flv.js--播放直播流时出现的累积延迟、断流重连以及画面卡顿的解决方法_flvjs.events-程序员宅基地

文章浏览阅读8.7k次,点赞3次,收藏17次。本文参考了https://blog.csdn.net/HJFQC/article/details/113188241,有细微的改动解决延迟见https://blog.csdn.net/daqinzl/article/details/122370388断流重连通过监听flvjs.Events.ERROR来判断连接是否已经断开,然后进行断流重连:player的定义<div class="mainContainer"> <video id="video..._flvjs.events