有没有像gitlub提交记录可视化的echarts
时间: 2023-07-08 11:43:50 浏览: 131
基于JavaScript的echarts数据可视化大屏设计源码
5星 · 资源好评率100%
可以使用ECharts来实现Git提交记录的可视化。具体实现方法如下:
1. 首先,需要将Git提交记录导出为一个JSON文件,可以使用Git的命令行工具或者第三方工具来导出。例如,使用Git的命令行工具可以执行以下命令:
```
git log --pretty=format:'{%n "commit": "%H",%n "author": "%an <%ae>",%n "date": "%ad",%n "message": "%f"%n},' > log.json
```
该命令将所有提交记录导出为一个JSON文件,并且每个提交记录都是一个JSON对象。
2. 接下来,需要使用ECharts来读取JSON文件,并将提交记录可视化为一个图表。可以使用ECharts的数据格式化功能来将JSON文件解析为ECharts所需的数据格式。例如,可以使用以下代码来读取JSON文件并解析为ECharts所需的数据格式:
```
$.getJSON("log.json", function (data) {
var dateList = data.map(function (item) {
return item.date;
});
var commitList = data.map(function (item) {
return item.commit.substring(0, 7);
});
var chartData = data.map(function (item, index) {
var color = 'lightgreen';
if (index % 2 === 1) {
color = 'pink';
}
return {
value: [index, item.message, item.author, item.commit],
itemStyle: {
color: color
}
}
});
var option = {
tooltip: {},
title: [{
text: 'Git提交记录可视化',
left: 'center'
}],
grid: [{
left: 50,
right: 50,
bottom: 10,
top: 60,
containLabel: true
}],
xAxis: [{
type: 'category',
boundaryGap: false,
data: dateList,
axisLabel: {
formatter: function (value) {
return echarts.format.formatTime('yyyy-MM-dd', value);
}
},
splitLine: {
show: true,
lineStyle: {
color: '#999',
type: 'dashed'
}
},
axisLine: {
lineStyle: {
color: '#999'
}
}
}],
yAxis: [{
type: 'category',
data: commitList,
axisLine: {
lineStyle: {
color: '#999'
}
}
}],
series: [{
type: 'scatter',
symbolSize: 20,
data: chartData,
animationDelay: function (idx) {
return idx * 5;
}
}]
};
var chart = echarts.init(document.getElementById('chart'));
chart.setOption(option);
});
```
该代码将JSON文件解析为一个ECharts图表,并且使用散点图来表示提交记录。每个提交记录都是一个散点,可以通过鼠标悬浮来查看提交信息。
阅读全文