mock.js假数据+G2

最新推荐文章于 2023-06-30 10:34:12 发布
最新推荐文章于 2023-06-30 10:34:12 发布
阅读量215 收藏
点赞数
分类专栏： 学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38698632/article/details/82788418
版权

原文链接：http://www.cnblogs.com/CyLee/p/6072399.html

官网：http://mockjs.com/examples.html#DPD

方便使用

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>柱状图</title>
    <!-- 引入 G2 文件 -->
    <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.2.8/dist/g2.min.js"></script>
    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script src="http://mockjs.com/dist/mock.js"></script>
  </head>
  <body>    
    <!-- 创建图表容器 -->
    <button id="tu1">折线图</button>
    <button id="tu2">饼状图</button>
    <div id="c1"></div>
    <div id="c2"></div>
    <script>
        //调用mock方法模拟数据
    Mock.mock(
        'http://mockjs', {
            "array":[
                {
                    "genre" : 'zxst',     //模拟名称
                    "sold|1-100":100,
                    "item": '事件一',
                    "count":0.17,        
                    "action":'浏览网站',
                    "pv|50000-100000":100000, 
                    "a|1-100":100,
                    "b|1-100":100, 
                    "color"    : "@color",    //模拟色值
                    "date"     : "@date('yyyy-MM-dd')",  //模拟时间
                    "url"      : "@url()",     //模拟url
                    "content"  : "@cparagraph()" //模拟文本
                },
                {
                    "genre" : 'zxr',     //模拟名称
                    "sold|1-100":100,          //模拟年龄(1-100)
                    "item": '事件二',
                    "count":0.12, 
                    "a|1-100":100,
                    "b|1-100":100, 
                    "action":'放入购物车',
                    "pv|30000-50000":50000,  
                    "color"    : "@color",    //模拟色值
                    "date"     : "@date('yyyy-MM-dd')",  //模拟时间
                    "url"      : "@url()",     //模拟url
                    "content"  : "@cparagraph()" //模拟文本
                },
                {
                    "genre" : 'zxqd',     //模拟名称
                    "sold|1-100":100,          //模拟年龄(1-100)
                    "item": '事件三',
                    "count":0.31,   
                    "a|1-100":100,
                    "b|1-100":100, 
                    "action":'生成订单',
                    "pv|10000-30000":30000,  
                    "color"    : "@color",    //模拟色值
                    "date"     : "@date('yyyy-MM-dd')",  //模拟时间
                    "url"      : "@url()",     //模拟url
                    "content"  : "@cparagraph()" //模拟文本
                },
                {
                    "genre" : 'zxdst',     //模拟名称
                    "sold|1-100":100,          //模拟年龄(1-100)
                    "item": '事件四',
                    "count":0.20,   
                    "a|1-100":100,
                    "b|1-100":100, 
                    "action":'支付订单',
                    "pv|1000-10000":10000,  
                    "color"    : "@color",    //模拟色值
                    "date"     : "@date('yyyy-MM-dd')",  //模拟时间
                    "url"      : "@url()",     //模拟url
                    "content"  : "@cparagraph()" //模拟文本
                },
                {
                    "genre" : 'zxgft',     //模拟名称
                    "sold|1-100":100,          //模拟年龄(1-100)
                    "item": '事件五',
                    "count":0.20,   
                    "a|1-100":100,
                    "b|1-100":100, 
                    "action":'完成交易',
                    "pv|100-1000":1000,  
                    "color"    : "@color",    //模拟色值
                    "date"     : "@date('yyyy-MM-dd')",  //模拟时间
                    "url"      : "@url()",     //模拟url
                    "content"  : "@cparagraph()" //模拟文本
                }
            ]
            
        }
    );
    $("#tu1").click(function(){
     //ajax请求
        $.ajax({
            url        : "http://mockjs",    //请求的url地址
            dataType   : "json",   //返回格式为json
            async      : true, //请求是否异步，默认为异步，这也是ajax重要特性
            data       : {},    //参数值
            type       : "GET",   //请求方式
            beforeSend : function() {
                //请求前的处理
            },
            success: function(res) {
                //请求成功时处理
                console.log(res.array);
                var data=res.array
   
      // G2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
      // Step 1: 创建 Chart 对象
      
      const chart = new G2.Chart({
        container: 'c1', // 指定图表容器 ID
        width : 600, // 指定图表宽度
        height : 300 // 指定图表高度
      });
      // Step 2: 载入数据源
      chart.source(data);
      // Step 3：创建图形语法，绘制柱状图，由 date 和 sold 两个属性决定图形位置，date 映射至 x 轴，sold 映射至 y 轴
      chart.line().position('date*sold')
      chart.point().position('date*sold').size(4).shape('circle').style({
         stroke: '#fff',
         lineWidth: 1
        });
        
        chart.interval().position('date*sold')
      // Step 4: 渲染图表
      chart.render();
            },
            complete: function() {
                //请求完成的处理
            },
            error: function() {
                //请求出错处理
            }
        });
    })
    $("#tu2").click(function(){ 
    //ajax请求
   $.ajax({
       url        : "http://mockjs",    //请求的url地址
       dataType   : "json",   //返回格式为json
       async      : true, //请求是否异步，默认为异步，这也是ajax重要特性
       data       : {},    //参数值
       type       : "GET",   //请求方式
       beforeSend : function() {
           //请求前的处理
       },
       success: function(res) {
           //请求成功时处理
           console.log(res.array);
           var data=res.array

 // G2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
 // Step 1: 创建 Chart 对象
 
 var chart = new G2.Chart({
  container: 'c2',
  forceFit: true,
  height: window.innerHeight
});
chart.source(data, {
  percent: {
    formatter: function formatter(val) {
      val = val * 100 + '%';
      return val;
    }
  }
});
chart.coord('theta', {
  radius: 0.75
});
chart.tooltip({
  showTitle: false,
  itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
});
chart.intervalStack().position('count').color('item').label('count', {
  formatter: function formatter(val, item) {
    return item.point.item + ': ' + val*100+'%';
  }
}).tooltip('item*count', function(item, count) {
    count = count * 100 + '%';
  return {
    name: item,
    value: count
  };
}).style({
  lineWidth: 1,
  stroke: '#fff'
});
chart.render();
       },
       complete: function() {
           //请求完成的处理
       },
       error: function() {
           //请求出错处理
       }
   });
})

</script>
  </body>
</html>

 

diamonds-
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery+ajax+mock.js模拟注册
10-16
实现JQuery+ajax+mock.js模拟注册，判断输入框是否输入正确
mock.js实现模拟生成假数据功能示例
10-17
主要介绍了mock.js实现模拟生成假数据功能,结合实例形式分析了mock.js插件生成模拟数据的相关操作技巧,需要的朋友可以参考下
Mock 造假数据
a378113472的博客
04-27 2491
第一部分：直接使用 1.1 提前条件 1. 安装nodejs, 【没装的，找卖药的问下】。 2. npm install mockjs 1.2 罗列基本法，尽量开箱即用 基本涵盖了常用的所有字段类型 // mock.js const Mock = require('mockjs') const Random = Mock.Random; const data = Mock.mock({ // 中文名字 | 姓 | 名 china_name: Random.cname(), chin
js 假值
weixin_30828379的博客
04-13 57
在 freecodecamp 上做到一个剔除数组中的 假值 的题目。 然后它列了6个假值：也就是 false、 null 、0 、 "" 、undefined 和 NaN。 此为背景 我就开始做题， 这要剔除的话， 6个值要每个都循环判断过后挑出来删掉咯。 想法很直白， 但是想想也觉得， 有点扯， 那得写多少个循环啊， 我就否决了。 绞尽脑汁想只用一个循环做出来... 随手搜了一下 “JS 假...
如何使用mockjs模拟假数据
Dzb1993的博客
02-23 2282
首先 使用 npm install mockjs --save 安装mockjs 插件 1. 在项目src目录下创建mock文件夹 2.在mock文件夹下准备要使用的json数据 3.把mock数据需要的图片放在public文件夹中【public文件夹打包的时候，会把相应的资源原封不动的打包到dist文件夹下】 图片存放在 public下面的images文件夹 ， 图片路径最开头的 / 代表public文件夹 4.创建mockServe.js文件，通过mockjs插件实现模拟数据 5.在入口文
如何使用mock生成假数据来开发?
最新发布
weixin_53818172的博客
06-30 408
如何生成假数据数据在开发时测试?
Javascript 判断假值的方法
Vision
02-05 3334
概念：什么叫假值？ 在JavaScript中，false、null、0、”“、undefined 和 NaN被称为假值。 Boolean 对象是一个布尔值的对象包装器。var x = new Boolean();如果Boolean构造函数的参数不是一个布尔值,则该参数会被转换成一个布尔值.如果参数是 0, -0, null, false, NaN, undefined, 或者空字符串 (“”)
vue+mock.js实现前后端分离
10-16
Vue.js 是一个轻量级的前端框架，而Mock.js 是一个用于模拟数据的工具，它们结合使用可以在开发过程中模拟后端API，使前端开发得以独立进行。 **安装Mock.js** 在Vue项目中使用Mock.js，首先需要通过npm 安装： ``...
mock.js模拟数据实现前后端分离
10-16
主要为大家详细介绍了mock.js模拟数据实现前后端分离，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue+mock.js+axios
11-08
Mock.js 可以自定义规则生成假数据，帮助开发者快速进行页面展示和功能测试。在“基于vue框架写的一个列表页到详情页的功能”中，mock.js 可能被用来模拟后台返回的数据，以便前端可以正常展示列表和点击后的详情...
JavaScript中有 6 种值为“假”
码农之路
11-12 1222
1.false (布尔型) 2.null (用于定义空的或者不存在的引用) 3.undefined (未定义值) 4.0 (数值型) 5."'' (空字符串) (字符型) 6.NaN 这里面 false 本身是布尔类型，其它 5 个则不是。除了这 6 个外，其它均为“真” ，包括对象、数组、正则、函数等。注意'0'、'null'、'false'、{}、[]也都是真值 ...
JavaScript中表示假的值有哪些？
Csdn_____c的博客
01-29 764
如何知道js中表示假的值有哪些，我们只需要通过一个常见的函数Booealn()就可以解决了。 常见的假值有： 1. 0 2. NAN 3. ""或者是'' 4. null 5. undefined []和{}都是表示的真值 结果如下
html的table前台造假数据,html写出来的table和js更新后的效果不一样(数据一样)
weixin_29552815的博客
06-04 275
$('#permission1').DataTable({"language": dataTablesLanguage,serverSide: true,stateSave: false,stateDuration: 0,"filter": false,'paging':false,'info':false,'infoEmpty':false,'zeroRecords':false,"sortab...
理解mockjs并且怎么去使用mockjs
weixin_46419373的博客
11-24 726
今天发现个好的东西 参考链接：https://github.com/nuysoft/Mock/wiki （mockjs的详细讲解） 一. 什么是mockjs? 生成随机数据，拦截 Ajax 请求 二. 为什么要使用mockjs? 在做开发时，当后端的接口还未完成，前端为了不影响工作效率，手动模拟后端接口， 1.我们可以使用json文件来模拟后台数据，但比较局限，无法模拟数据的增删改查 2.使用json-server模拟，但不能随机生成所需数据 3.使用mockjs模拟后端接口，可随机生成所需数据，.
JS中的真与假
lwf的博客
05-29 2529
会进行真值，假值判断的地方 if，else if switch while，for &&，||：逻辑与逻辑或 !!： 转化成布尔值 数据类型——数字（NaN)、字符串、布尔、函数、对象（elem、[]、{}、null）、未定义在js里，一般认为有内容或存在的（值或对象，0除外）进行判断时就是true值，而没有内容或不存在的(“”,undefined,null等等)进行判断时就是false值。真：
html中随机生成假文
远方
12-08 3870
输入Lorem按tab键
Charles抓包和Mock数据的方法
热门推荐
简言
07-23 1万+
1.安装软件 百度搜索charles，第一个地址官方链接了：https://www.charlesproxy.com 如果没安装java环境，首次进入charles会提示需要安装java包，下一个java包就可以了。 安装后，长这样的。 打开软件。 2、设置网络 a、查询电脑的IP地址 Window使用快捷键win+R进入运行窗口，输入cmd，再输入ipconfig MA...
mock.js 生成假数据 前端独立于后台开发
夜
06-12 6329
mock.js的作用是产生假数据，使得前端的开发独立于后台开发，而后台发开者$(document).ready(function() { var template = { 'results|1-4':[{ 'num':'@integer(0,4)', 'sent':'@sentence' }] } Mock.mock("mock/getmockdata", templat
html 假数据,mock.js实现模拟生成假数据功能示例
weixin_42316952的博客
06-09 2528
本文实例讲述了mock.js实现模拟生成假数据功能。分享给大家供大家参考，具体如下：mock使用方法很简单, 下面是简单的用法, 详细的用法可以看官方文档, 写的很清楚, 下面的代码直接拷贝到本地html文件, 双击打开即可生成你想要的数据MockJS-demovar Random = Mock.Random;var data = Mock.mock({'list|4': [{'id|+1': 1...
如何在uniapp中使用mock.js模拟数据
05-16
在uniapp中使用mock.js模拟数据，需要以下步骤： 1. 安装mock.js依赖包，在命令行中输入：npm install mockjs --save-dev 2. 在uniapp的根目录下创建一个mock文件夹，用于存放mock数据文件。 3. 在mock文件夹下创建一个mock.js文件，用于编写mock数据。 4. 在main.js中引入mock.js，并使用mock数据。代码如下： ``` import Mock from 'mockjs'; // 引入mock数据文件 import './mock'; // 开启mock Mock.setup({ timeout: '50-200' }) ``` 5. 在mock.js文件中编写mock数据。例如： ``` import Mock from 'mockjs'; // 模拟数据 Mock.mock('/api/user', { 'name': '@cname', // 随机生成中文名字 'age|18-60': 1, // 随机生成18-60岁之间的整数 'email': '@email', // 随机生成邮箱 'address': '@city(true)' // 随机生成省市区 }) ``` 6. 在需要使用mock数据的地方，发送请求获取mock数据。例如： ``` import axios from 'axios'; axios.get('/api/user') .then(res => { console.log(res.data) }) .catch(err => { console.log(err) }) ``` 注意：在正式环境中，需要将mock数据禁用或移除。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值