一. chart图表demo网址
网址：/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="/os/antv/assets/f2/3.2.1/f2.min.js"></script><script src="/os/antv/assets/lib/lodash-4.17.4.min.js"></script><script src="/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": "-08-31"}, {"goodsId": 2, "sum": 0, "creatTime": "-08-31"}, {"goodsId": 1, "sum": 0, "creatTime": "-09-01"}, {"goodsId": 2, "sum": 1, "creatTime": "-09-01"}, {"goodsId": 1, "sum": 0, "creatTime": "-09-02"}, {"goodsId": 2, "sum": 0, "creatTime": "-09-02"}, {"goodsId": 1, "sum": 0, "creatTime": "-09-03"}, {"goodsId": 2, "sum": 0, "creatTime": "-09-03"}, {"goodsId": 1, "sum": 0, "creatTime": "-09-04"}, {"goodsId": 2, "sum": 0, "creatTime": "-09-04"}, {"goodsId": 1, "sum": 0, "creatTime": "-09-05"}, {"goodsId": 2, "sum": 1, "creatTime": "-09-05"}, {"goodsId": 1, "sum": 0, "creatTime": "-09-06"}, {"goodsId": 2, "sum": 0, "creatTime": "-09-06"}, {"goodsId": 1, "sum": 0, "creatTime": "-09-07"}, {"goodsId": 2, "sum": 0, "creatTime": "-09-07"}, {"goodsId": 1, "sum": 0, "creatTime": "-09-08"}, {"goodsId": 2, "sum": 0, "creatTime": "-09-08"}, {"goodsId": 1, "sum": 0, "creatTime": "-09-09"}, {"goodsId": 2, "sum": 0, "creatTime": "-09-09"}, {"goodsId": 1, "sum": 0, "creatTime": "-09-10"}, {"goodsId": 2, "sum": 0, "creatTime": "-09-10"}, {"goodsId": 1, "sum": 0, "creatTime": "-09-11"}, {"goodsId": 2, "sum": 0, "creatTime": "-09-11"}, {"goodsId": 1, "sum": 0, "creatTime": "-09-12"}, {"goodsId": 2, "sum": 0, "creatTime": "-09-12"}, {"goodsId": 1, "sum": 0, "creatTime": "-09-13"}, {"goodsId": 2, "sum": 0, "creatTime": "-09-13"}, {"goodsId": 1, "sum": 4, "creatTime": "-09-14"}, {"goodsId": 2, "sum": 0, "creatTime": "-09-14"}, {"goodsId": 1, "sum": 0, "creatTime": "-09-15"}, {"goodsId": 2, "sum": 0, "creatTime": "-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: "/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: "/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: "/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() {}})}
有什么不懂的欢迎在下面留言，一起进步。。。。。。
