原文鏈接：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>