const F2 = require('@antv/f2');
|
import deepAssign from './deepAssign'
|
// F2封装
|
function FGraph(el, type) {
|
this.id = el.getAttribute("id");
|
this.minMax = {
|
min: 0,
|
max: 0
|
};
|
this.colors = {
|
min: 'red',
|
max: 'green',
|
normal: 'blue'
|
};
|
this.chart = "";
|
this.txtShapes = {
|
show: true,
|
list: []
|
};
|
if(this.id) {
|
this._init(this.id, type);
|
}else {
|
this._init(null, type);
|
}
|
}
|
|
// 初始化
|
FGraph.prototype._init = function(id, type) {
|
// 创建 Chart 对象
|
this.chart = new F2.Chart({
|
id: id,
|
pixelRatio: window.devicePixelRatio, // 指定分辨率
|
syncY: true,
|
animate: false
|
});
|
|
// 设置x轴线
|
this.chart.axis("x", {
|
line: {
|
lineWidth: 1,
|
stroke: '#bbb',
|
top: true, // 展示在最上层
|
},
|
});
|
// 设置y轴线
|
this.chart.axis("y", {
|
line: {
|
lineWidth: 1,
|
stroke: '#bbb',
|
top: true, // 展示在最上层
|
},
|
grid: {
|
lineWidth: 1,
|
stroke: '#bbb',
|
}
|
});
|
|
// 设置提示框
|
this.chart.tooltip({
|
alwaysShow: false,
|
});
|
|
// 载入数据源
|
this.chart.source([]);
|
|
// 设置最大值和最小值
|
this.setMinMax([]);
|
|
// 设置图表类型
|
this._setType(type);
|
|
// 不显示legend
|
this.chart.legend(false);
|
|
// 渲染图表
|
this.chart.render();
|
};
|
// 设置图表类型
|
FGraph.prototype._setType = function(type) {
|
var self = this;
|
// 根据类型设置图表
|
switch(type) {
|
case 'line':
|
this.chart.line().position('x*y');
|
// 不显示文本
|
this.txtShapes.show = false;
|
break;
|
default:
|
// 设置颜色
|
this.chart.interval().position('x*y').color('x*y', function(x, y) {
|
var minMax = self.minMax;
|
var colors = self.colors;
|
var color = colors.normal;
|
if(y == minMax.min) {
|
color = colors.min;
|
}else if(y == minMax.max) {
|
color = colors.max;
|
}
|
return color;
|
});
|
break;
|
}
|
};
|
// 更新数据
|
FGraph.prototype.changeData = function(data) {
|
// 设置最大值和最小值
|
this.setMinMax(data);
|
// 更改数据
|
this.chart.changeData(data);
|
};
|
|
// 设置文本
|
FGraph.prototype._addTxtShape = function(data) {
|
// 判断是否显示文本
|
if(!this.txtShapes.show) {
|
return;
|
}
|
var self = this;
|
var chart = this.chart;
|
// 移除文本
|
this._txtShapesDestory();
|
// 绘制柱状图文本
|
const offset = -5;
|
const canvas = chart.get('canvas');
|
const group = canvas.addGroup();
|
data.forEach(function(obj) {
|
const point = chart.getPosition(obj);
|
const text = group.addShape('text', {
|
attrs: {
|
x: point.x,
|
y: point.y + offset,
|
text: obj.y,
|
textAlign: 'center',
|
textBaseline: 'bottom',
|
fill: '#808080'
|
}
|
});
|
self.txtShapes.list.push(text);
|
});
|
}
|
// 修改大小
|
FGraph.prototype.changeSize = function(width, height) {
|
width = width?width:null;
|
height = height?height:null;
|
this.chart.changeSize(width, height);
|
}
|
|
// 根据data的值获取最大值和最小值
|
FGraph.prototype.setMinMax = function(data) {
|
var rs = {
|
min: 0,
|
max: 0
|
};
|
// 设置data第一个值到rs中
|
if(data.length != 0) {
|
rs.min = data[0].y;
|
rs.max = data[0].y;
|
}
|
// 遍历data的值
|
for(var i=1; i<data.length; i++) {
|
var _data = data[i];
|
// 设置最大值和最小值
|
rs.min = rs.min>_data.y?_data.y:rs.min;
|
rs.max = rs.max<_data.y?_data.y:rs.max;
|
}
|
this.minMax = rs;
|
}
|
// 销毁txtShapes
|
FGraph.prototype._txtShapesDestory = function() {
|
var txtShapes = this.txtShapes.list;
|
// 遍历txtShapes
|
for(var i=0; i<txtShapes.length; i++) {
|
var txtShape = txtShapes[i];
|
// 销毁
|
txtShape.destroy();
|
}
|
// 重置数组
|
this.txtShapes.list = [];
|
};
|
// 设置最值的颜色
|
FGraph.prototype.setColors = function(colors) {
|
this.colors = deepAssign({}, this.colors, colors);
|
};
|
// 销毁图表
|
FGraph.prototype.destroy = function() {
|
this.chart.destroy();
|
};
|
|
export default FGraph;
|
