一. chart图表demo网址
网址：http://antv.alipay.com/zh-cn/f2/3.x/demo/index.html
二. 本文主要对面积对比图，扇形图，柱状图三大常见图进行介绍
效果图如下：
html代码：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>demo</title>
<link rel="stylesheet" href="css/index.css" />
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/chart.js" ></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/f2/3.2.1/f2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/lodash-4.17.4.min.js"></script>
<script src="https://gw.alipayobjects.com/os/rmsportal/NjNldKHIVQRozfbAOJUW.js"></script>
</head>
<body> <div class="instrument-panel">
<div class="panel-con">
<div class="panel-linear">
<canvas id="linear"></canvas>
<div class="consumption">
<p>-库存消耗</p>
</div>
</div>
<div class="panel-other">
<div class="panel-pancake">
<canvas id="mountNode"></canvas>
<div class="product-proportion">
<p>-产品占比</p>
</div>
</div>
<div class="panel-columnar">
<canvas id="columnar"></canvas>
<div class="user-map">
<p>-本月用户示意图</p>
</div>
</div>
</div>
</div>
</div> </body>
</html>
我们在html页面内加入三个画布标签canvas，插入面积对比图，扇形图，柱状图；
css代码：
.instrument-panel{
display: flex;
flex-direction: column;
align-items: center;
}
.instrument-panel .panel-con{
width: 90%;
height: 720px;
display: flex;
flex-direction: column;
align-items: center;
margin: 65px 0px;
}
.instrument-panel .panel-con .panel-linear{
width: 100%;
height: 340px;
background-color: #fff;
margin-bottom: 40px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.panel-linear .consumption{
position: absolute;
left: 24px;
top: 44px;
color: #333;
font-size: 18px;
}
.panel-linear canvas{
width: 80%;
height: 300px;
}
.instrument-panel .panel-con .panel-other{
width: 100%;
height: 340px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.panel-con .panel-other .panel-pancake{
width: 48.5%;
height: 340px;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.panel-pancake canvas{
width: 70%;
height: 340px;
}
.panel-pancake .product-proportion{
position: absolute;
left: 24px;
top: 44px;
color: #333;
font-size: 18px;
}
.panel-con .panel-other .panel-columnar{
width: 48.5%;
height: 340px;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.panel-columnar canvas{
width: 70%;
height: 220px;
margin-top: 40px;
}
.panel-columnar .user-map{
position: absolute;
left: 24px;
top: 44px;
color: #333;
font-size: 18px;
}重点来了，我们使用ajax接口数据实时监测数据的变化，并呈现在图表上面
三. 接口数据形式
1.面积对比图：
{"state": 200, "result": [{"goodsId": 1, "sum": 0, "creatTime": "2018-08-31"}, {"goodsId": 2, "sum": 0, "creatTime": "2018-08-31"}, {"goodsId": 1, "sum": 0, "creatTime": "2018-09-01"}, {"goodsId": 2, "sum": 1, "creatTime": "2018-09-01"}, {"goodsId": 1, "sum": 0, "creatTime": "2018-09-02"}, {"goodsId": 2, "sum": 0, "creatTime": "2018-09-02"}, {"goodsId": 1, "sum": 0, "creatTime": "2018-09-03"}, {"goodsId": 2, "sum": 0, "creatTime": "2018-09-03"}, {"goodsId": 1, "sum": 0, "creatTime": "2018-09-04"}, {"goodsId": 2, "sum": 0, "creatTime": "2018-09-04"}, {"goodsId": 1, "sum": 0, "creatTime": "2018-09-05"}, {"goodsId": 2, "sum": 1, "creatTime": "2018-09-05"}, {"goodsId": 1, "sum": 0, "creatTime": "2018-09-06"}, {"goodsId": 2, "sum": 0, "creatTime": "2018-09-06"}, {"goodsId": 1, "sum": 0, "creatTime": "2018-09-07"}, {"goodsId": 2, "sum": 0, "creatTime": "2018-09-07"}, {"goodsId": 1, "sum": 0, "creatTime": "2018-09-08"}, {"goodsId": 2, "sum": 0, "creatTime": "2018-09-08"}, {"goodsId": 1, "sum": 0, "creatTime": "2018-09-09"}, {"goodsId": 2, "sum": 0, "creatTime": "2018-09-09"}, {"goodsId": 1, "sum": 0, "creatTime": "2018-09-10"}, {"goodsId": 2, "sum": 0, "creatTime": "2018-09-10"}, {"goodsId": 1, "sum": 0, "creatTime": "2018-09-11"}, {"goodsId": 2, "sum": 0, "creatTime": "2018-09-11"}, {"goodsId": 1, "sum": 0, "creatTime": "2018-09-12"}, {"goodsId": 2, "sum": 0, "creatTime": "2018-09-12"}, {"goodsId": 1, "sum": 0, "creatTime": "2018-09-13"}, {"goodsId": 2, "sum": 0, "creatTime": "2018-09-13"}, {"goodsId": 1, "sum": 4, "creatTime": "2018-09-14"}, {"goodsId": 2, "sum": 0, "creatTime": "2018-09-14"}, {"goodsId": 1, "sum": 0, "creatTime": "2018-09-15"}, {"goodsId": 2, "sum": 0, "creatTime": "2018-09-15"}]}2.扇形图：
{"state": 200, "result": [{"goodsId": 2, "sum": 4}, {"goodsId": 1, "sum": 2}]}3.柱状图：
{"state": 200, "result": {"sum_lastmonth": 6, "marked": 4, "unmarked": 2}}js代码：
$(function() {
linear(); //线形图
pancake(); // 饼形图
columnar(); //柱形图
})
function linear() {
var sellerId = getCookie("sellerId");
var sellerId = {
"sellerId": sellerId,
}
$.ajax({
url: "https://www.xxxxxx.cn/xxxxx/xxxxx/", //15天新用户统计
data: sellerId,
type: "get",
success: function(data) {
var newclient = JSON.parse(data).result;
// console.log(newclient);
for(var i=0;i<newclient.length;i++){
newclient[i].creatTime=newclient[i].creatTime.slice(0,10);
newclient[i].goodsId=(newclient[i].goodsId+'').replace('1','格林童话');
newclient[i].goodsId=(newclient[i].goodsId+'').replace('2','阿里巴巴与四十大盗');
}
var data=newclient;
// console.log(data);
var chart = new F2.Chart({
id: 'linear',
pixelRatio: window.devicePixelRatio
});
chart.source(data);
chart.scale('creatTime', {
tickCount: 15
});
chart.scale('sum', {
tickCount: 6
});
chart.axis('creatTime', {
label: {
fontSize:12
}
});
chart.area().position('creatTime*sum').color('goodsId', ['#2196F3', '#DD6666']).shape('smooth');
chart.line().position('creatTime*sum').color('goodsId', ['#2196F3', '#DD6666']).shape('smooth');
chart.render();
},error: function() {
}
})
}
function pancake() {
var sellerId = getCookie("sellerId");
var sellerId = {
"sellerId": sellerId,
}
$.ajax({
url: "https://www.xxxxxxx.cn/xxxxxx/xxxxxxx/", //报告种类统计
data: sellerId,
type: "get",
success: function(data) {
//打印出数组
var bookresult=JSON.parse(data).result;
var sums=0;
for(var i=0;i<bookresult.length;i++){
bookresult[i].goodsId=(bookresult[i].goodsId+'').replace('1','格林童话');
bookresult[i].goodsId=(bookresult[i].goodsId+'').replace('2','阿里巴巴与四十大盗');
sums+=bookresult[i].sum;
}
// console.log(sums)
var data=bookresult;
var map = {};
data.map(function(obj) {
map[obj.goodsId] = Math.round((obj.sum)/sums*100) + '%';
});
var chart = new F2.Chart({
id: 'mountNode',
pixelRatio: window.devicePixelRatio,
padding: [20, 'auto']
});
chart.source(data, {
sum: {
formatter: function formatter(val) {
return val + '%';
}
}
});
chart.tooltip(false);
chart.legend({
position: 'right',
itemFormatter: function itemFormatter(val) {
return val + ' ' + map[val];
}
});
chart.coord('polar', {
transposed: true,
innerRadius: 0.6,
radius: 0.85
});
chart.axis(false);
chart.interval().position('a*sum').color('goodsId', ['#2196F3', '#3DC1C7']).adjust('stack');
chart.guide().html({
position: ['50%', '46%'],
html: '<div style="width: 250px;height: 40px;text-align: center;">' + '<div style="font-size: 16px">总数量</div>' + '<div style="font-size: 24px">'+sums+'</div>' + '</div>'
});
chart.render();
},
error: function() {
}
})
}
function columnar() {
var sellerId = getCookie("sellerId");
var sellerId = {
"sellerId": sellerId,
}
$.ajax({
url: "https://www.xxxxxxx.cn/xxxxx/xxxxxxx/", //近一个月用户 标记与未标记统计
data: sellerId,
type: "get",
success: function(data) {
//获取最近30天新增客户数
var addperson = JSON.parse(data).result.sum_lastmonth;
//获取未标记客户数
var unmark = JSON.parse(data).result.unmarked;
//获取已标记客户数
var mark = JSON.parse(data).result.marked;
var data = [{
sign: '最近30天新增客户数',
quality: addperson
}, {
sign: '未标记客户数',
quality: unmark
}, {
sign: '已标记客户数',
quality: mark
}];
var chart = new F2.Chart({
id: 'columnar',
pixelRatio: window.devicePixelRatio
});
chart.source(data, {
quality: {
tickCount: 5
}
});
chart.tooltip({
showItemMarker: false,
onShow: function onShow(ev) {
var items = ev.items;
items[0].name = null;
items[0].name = items[0].title;
}
});
chart.axis('sign', {
label: {
fontSize:12
}
});
chart.interval().position('sign*quality').color('sign', ['#3DC1C7', '#FCBD44', '#DD6666']);
chart.render();
},
error: function() {
}
})
}有什么不懂的欢迎在下面留言，一起进步。。。。。。