npm install @antv/g2 --save
import G2 from "@antv/g2";
initComponent() {
this.chart = new G2.Chart({
container: "mountNode",
forceFit: true,
height: 300,//高度
padding: "auto", //居中
});
let dataDO = JSON.parse(
window.JSON.stringify(this.areaData).replace(/salesVolume/g, "销售量") //深拷贝拿过来的值
);
this.chart.axis("销售量", {
line: {
stroke: "rgba(67, 154, 255, 1)", // 坐标轴线的颜色
strokeOpacity: 0, // 坐标轴线的透明度,数值范围为 0 - 1
},
grid: {
lineStyle: {
stroke: "rgba(67, 154, 255, 0.1)",
},
},
label: {
textStyle: {
fill: "#798EE1",
},
formatter: function formatter(val) {
return val;
},
},
tickLine: null,
subTickLine: null,
});
var Shape = G2.Shape;
Shape.registerShape("interval", "textInterval", {
//显示上方标题
drawShape: function drawShape(cfg, group) {
var points = this.parsePoints(cfg.points); // 将0-1空间的坐标转换为画布坐标
let value = cfg.origin._origin.销售量;
group.addShape("text", {
attrs: {
text: value,
textAlign: "center",
x: points[1].x + cfg.size / 2,
y: points[1].y,
fontFamily: "PingFang SC",
fontSize: 12,
fill: "#40A9FF",
},
});
},
});
this.chart.axis("销售量", {
line: {
stroke: "rgba(67, 154, 255, 0.3)", // 坐标轴线的颜色 设置Y轴
strokeOpacity: 1, // 坐标轴线的透明度,数值范围为 0 - 1
},
grid: {
lineStyle: {
stroke: "rgba(67, 154, 255, 0.2)",
},
},
label: {
//坐标文字
textStyle: {
fill: "#40A9FF",
},
formatter: function formatter(val) {
return val;
},
},
});
this.chart.axis("goodsName", {
line: {
stroke: "rgba(67, 154, 255, 0.3)", // 坐标轴线的颜色 设置X轴
strokeOpacity: 1, // 坐标轴线的透明度,数值范围为 0 - 1
},
label: {
textStyle: {
fill: "#40A9FF",
},
formatter: function formatter(val) {
return val;
},
},
});
this.chart.tooltip({
crosshairs: {
//去除柱状图阴影部分
type: "",
},
inPlot: false,
shared: false,
});
// this.chart.clear()
this.chart.source(dataDO);
// console.log(this.areaData)
let arr = [];
for (var i = 0; i < this.areaData.length; i++) {
arr.push(this.areaData[i]["salesVolume"]);
}
let maxNum = Math.max(...arr); //取最大值
var num = null;
if (maxNum < 100) {
num = 50
} else if (maxNum > 100) {
num = Math.round(maxNum / 10+100);
}
this.chart.scale("销售量", {
tickInterval: num, // 用于指定坐标轴各个标度点的距离
});
// }
this.chart.legend(false); //去掉底部对应颜色文字
this.chart
.interval()
.position("goodsName*销售量")
.shape("textInterval")
.size(60);
this.chart
.interval()
.position("goodsName*销售量")
.color("goodsName", [
//设置渐变颜色
"l(90) 0:rgba(253, 85, 127, 1) 0.3:rgba(243, 198, 128, 0.72) 1:rgba(16, 30, 57, 0.3)",
"l(90) 0:rgba(207, 197, 128, 1) 0.3:rgba(228, 224, 198, 0.72) 1:rgba(16, 30, 57, 0.3)",
"l(90) 0:rgba(23, 185, 254, 1) 0.3:rgba(60, 119, 255, 0.72) 1:rgba(16, 30, 57, 0.3)",
"l(90) 0:rgba(23, 185, 254, 1) 0.3:rgba(60, 119, 255, 0.72) 1:rgba(16, 30, 57, 0.3)",
"l(90) 0:rgba(23, 185, 254, 1) 0.3:rgba(60, 119, 255, 0.72) 1:rgba(16, 30, 57, 0.3)",
"l(90) 0:rgba(23, 185, 254, 1) 0.3:rgba(60, 119, 255, 0.72) 1:rgba(16, 30, 57, 0.3)",
"l(90) 0:rgba(23, 185, 254, 1) 0.3:rgba(60, 119, 255, 0.72) 1:rgba(16, 30, 57, 0.3)",
"l(90) 0:rgba(23, 185, 254, 1) 0.3:rgba(60, 119, 255, 0.72) 1:rgba(16, 30, 57, 0.3)",
"l(90) 0:rgba(23, 185, 254, 1) 0.3:rgba(60, 119, 255, 0.72) 1:rgba(16, 30, 57, 0.3)",
"l(90) 0:rgba(23, 185, 254, 1) 0.3:rgba(60, 119, 255, 0.72) 1:rgba(16, 30, 57, 0.3)",
])
.size(15);
this.chart.render();
},
每次重新动态赋值的时候需要把chart清除掉再重新创建
this.repetition( this.ByDayList); //后台取到的值
this.chart.destroy();
this.initComponent();
效果图
这两个G2地址大家可以参考一下
总结:G2文档写的很一般,甚至有点乱,没有eacharts那么清晰明了,使用起来也比较麻烦,代码量多