image.png
AntV G2官方文档
为什么选择AntV G2呢？
我自己之前也用过 Echarts,毕竟是老油条的图表库了，但是内容真的太多了，而且每次的 opation设置都一大堆，而且需要把后端返回的数据处理好后塞到对应的 xAxis series data里面。当然还有对应的tooltip，如果我想同时取到x,y轴或者其他的数据，很难用formatter去拿到(也可能是我太菜，不知道其他方法吧)，我也是因为这个原因才选择了 G2。
G2好用是好用，但是文档看起来也不是很轻松，有时候会因为一个配置项，一直找不到对应的文档，所以文档的最下面(小笔记，vue项目)我会把我遇到的配置以通俗的语法标注给大家，望大家参考~~
使用方法
npm install @antv/g2 // yarn add @antv/g2
import { Chart } from '@antv/g2';
const data = [
{ genre: 'Sports', sold: 275 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 },
];
// Step 1: 创建 Chart 对象
const chart = new Chart({
container: 'c1', // 指定图表容器 ID
width: 600, // 指定图表宽度
height: 300, // 指定图表高度
});
// Step 2: 载入数据源
chart.data(data);
// Step 3: 创建图形语法，绘制柱状图
chart.interval().position('genre*sold');
// Step 4: 渲染图表
chart.render();
小笔记
目录
1.在改变窗口的时候如何自适应图表
2.移除或改变图表底部的那个分类的标签小点
3.开启和调整底部缩略轴
4.自定义tooltip鼠标悬浮提示框
5.自定义图表数据颜色
6.改变图形的透明度，样式等
7.数据更新图表重新渲染
8.图表背景实线改为虚线
1.在改变窗口的时候如何自适应图表
gif_0105.gif
chartcfg.autoFit
或者监听窗口，根据容器大小配置宽高 chart.changeSize()
mounted() {
//.router-view 装你图表的标签class，.getClientRects()[0].width获取它的宽度变化
this.chartWidth =
document.querySelector(".router-view").getClientRects()[0].width;
},
//页面用的是 keep-alive 创建和移除监听事件 or created/beforeDestroy
activated() {
window.addEventListener("resize", this.handleWindowResize);
},
deactivated() {
window.removeEventListener("resize", this.handleWindowResize);
},
...
//监听窗口变化方法
handleWindowResize() {
this.chartWidth =
document.querySelector(".router-view").getClientRects()[0].width - 50;
//chart.changeSize() 改变图表宽高
this.myChart.changeSize(this.chartWidth, this.chartHeight);
},
...
//创建的图表
let that = this
this.myChart = new Chart({
container: "container", // 指定图表容器 ID
width: that.chartWidth,
height: that.chartHeight, // 指定图表高度
padding: [20, 50, 150, 50], // 上，右，下，左
});
2.移除或改变图表底部的那个分类的标签小点
image.png
chart.legend
参考示例
chart.legend(false);//关闭
//放在右边
chart.legend({ position: 'right'});
3.开启和调整底部缩略轴
image.png
chart.option('slider')
chart.option("slider", { height: 100 });
4.自定义tooltip鼠标悬浮提示框
image.png
TooltipCfg.itemTpl
chart.data(data);
chart.tooltip({
shared: true, // 多用于柱状图，不启用会出现数据间有小段空白位置不显示tooltip
showTitle: false,//不显示标题
showMarkers: false,//不显示贴敷上去的小点
position: "right",//显示位置
// g2-tooltip-marker 小圆点默认class，color默认颜色
itemTpl: `
{value}
{num}
`,
});
//tooltip "value*num" 你要暴漏出来的数据
chart.interval().position("value*num").color("pt").tooltip("value*num", function (value, num) {
return { value, num };
});
...
chart.render();
或者固定label提示标注
ScaleOption.alias
image.png
chart.scale('value', {
alias: '销售额(万)',
});
5.自定义图表数据颜色
image.png
chart.color(),一般
chart.color('year')默认就是根据数据字段为year的进行颜色划分，划分的颜色为默认颜色
//根据年份数值返回指定颜色
chart.color('year', (val) => {
if (val === '2013') {
return '#36c361';
}
return '#ff5957';
})
也可以直接定义一个颜色值或者数组，这样就自动替换默认的颜色了
chart.color('year',色值/色值数组)
6.改变图形的透明度，样式等
chart.style()
相关参数配置，更多的配置参数大家可以参考
解决面积堆叠的图表透明度太低问题
chart.style({ fillOpacity: 1})
7.数据更新图表重新渲染
chart.clear()
在初始化或者渲染数据时去判断是否有chart的存在，有的则使用chart.clear(),也可以参考下面我这样写
myChart:null;
...
//数据初始化或者数据变化时调用
this.initChart()
...
initChart(){
if (!this.myChart) {
this.myChart = new Chart({
container: "container",
autoFit: true,
height: 500, // 指定图表高度
padding: [20, 50, 150, 50], // 上，右，下，左
});
} else {
this.myChart.clear(); // 清理所有
}
const chart = this.myChart;
//加载数据
chart.data(data);
chart.render();
}
8.图表背景实线改为虚线
image.png
chart.axis()
绘图属性
chart.axis("value", {
grid: {
//背景网格刻度线样式
line: {
style: {
lineWidth: 0.5,
lineDash: [5, 2], //虚线
},
},
},
});
...
chart.axis("不需要展示的",{
grid:null
})
目前先更新这么多，后续有用到还会持续更新~~