mirror of
https://github.com/DrMboga/WotBlitzStatisticsBlazor.git
synced 2026-10-21 10:27:18 +02:00
596 lines
18 KiB
JavaScript
596 lines
18 KiB
JavaScript
var eChartsInterop = eChartsInterop || {};
|
|
|
|
eChartsInterop.BuildBarChartByTankType = function (elementId, chartTitle, chartData) {
|
|
var tankTypes = {
|
|
'HeavyTank': '/tank-type/vehicle.class.heavy.small.scale-200.png',
|
|
'AtSpg': '/tank-type/vehicle.class.atspg.small.scale-200.png',
|
|
'MediumTank': '/tank-type/vehicle.class.medium.small.scale-200.png',
|
|
'LightTank': '/tank-type/vehicle.class.light.small.scale-200.png'
|
|
};
|
|
|
|
var seriesLabel = {
|
|
show: true
|
|
}
|
|
|
|
// based on prepared DOM, initialize echarts instance
|
|
var myChart = echarts.init(document.getElementById(elementId), 'dark');
|
|
|
|
var lightData = chartData.find(d => d.tankType === 'lightTank');
|
|
var mediumData = chartData.find(d => d.tankType === 'mediumTank');
|
|
var heavyData = chartData.find(d => d.tankType === 'heavyTank');
|
|
var atData = chartData.find(d => d.tankType === 'AT-SPG');
|
|
|
|
// specify chart configuration item and data
|
|
var option = {
|
|
title: {
|
|
text: chartTitle
|
|
},
|
|
toolbox: {
|
|
show: true,
|
|
feature: {
|
|
saveAsImage: {}
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
name: '',
|
|
axisLabel: {
|
|
formatter: '{value}'
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: ['HeavyTank', 'AtSpg', 'MediumTank', 'LightTank'],
|
|
axisTick: {
|
|
alignWithLabel: true
|
|
},
|
|
axisLabel: {
|
|
formatter: function (value) {
|
|
return '{' + value + '| }';
|
|
},
|
|
rich: {
|
|
value: {
|
|
lineHeight: 10,
|
|
align: 'center'
|
|
},
|
|
HeavyTank: {
|
|
height: 20,
|
|
width: 20,
|
|
align: 'center',
|
|
backgroundColor: {
|
|
image: tankTypes.HeavyTank
|
|
}
|
|
},
|
|
AtSpg: {
|
|
height: 20,
|
|
width: 20,
|
|
align: 'center',
|
|
backgroundColor: {
|
|
image: tankTypes.AtSpg
|
|
}
|
|
},
|
|
MediumTank: {
|
|
height: 20,
|
|
width: 20,
|
|
align: 'center',
|
|
backgroundColor: {
|
|
image: tankTypes.MediumTank
|
|
}
|
|
},
|
|
LightTank: {
|
|
height: 20,
|
|
width: 20,
|
|
align: 'center',
|
|
backgroundColor: {
|
|
image: tankTypes.LightTank
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
type: 'bar',
|
|
label: seriesLabel,
|
|
barWidth: '30px',
|
|
data: [
|
|
{
|
|
value: heavyData.value,
|
|
itemStyle: {
|
|
color: heavyData.color
|
|
}
|
|
},
|
|
{
|
|
value: atData.value,
|
|
itemStyle: {
|
|
color: atData.color
|
|
}
|
|
},
|
|
{
|
|
value: mediumData.value,
|
|
itemStyle: {
|
|
color: mediumData.color
|
|
}
|
|
},
|
|
{
|
|
value: lightData.value,
|
|
itemStyle: {
|
|
color: lightData.color
|
|
}
|
|
}]
|
|
}]
|
|
};
|
|
|
|
// use configuration item and data specified to show chart
|
|
myChart.setOption(option);
|
|
window.addEventListener('resize',
|
|
function() {
|
|
myChart.resize();
|
|
});
|
|
};
|
|
|
|
eChartsInterop.BuildBarChartByNation = function (elementId, chartTitle, chartData) {
|
|
var flags = {
|
|
'china': '/flags/china-round.png',
|
|
'european': '/flags/eu-round.png',
|
|
'france': '/flags/france-round.png',
|
|
'germany': '/flags/germany-round.png',
|
|
'japan': '/flags/japan-round.png',
|
|
'other': '/flags/other-round.png',
|
|
'uk': '/flags/uk-round.png',
|
|
'usa': '/flags/usa-round.png',
|
|
'ussr': '/flags/ussr-round.png',
|
|
};
|
|
|
|
var seriesLabel = {
|
|
show: true
|
|
}
|
|
|
|
// based on prepared DOM, initialize echarts instance
|
|
var myChart = echarts.init(document.getElementById(elementId), 'dark');
|
|
|
|
var chinaData = chartData.find(d => d.country === 'china');
|
|
var euData = chartData.find(d => d.country === 'european');
|
|
var franceData = chartData.find(d => d.country === 'france');
|
|
var germanyData = chartData.find(d => d.country === 'germany');
|
|
var japanData = chartData.find(d => d.country === 'japan');
|
|
var otherData = chartData.find(d => d.country === 'other');
|
|
var ukData = chartData.find(d => d.country === 'uk');
|
|
var usaData = chartData.find(d => d.country === 'usa');
|
|
var ussrData = chartData.find(d => d.country === 'ussr');
|
|
|
|
// specify chart configuration item and data
|
|
var option = {
|
|
title: {
|
|
text: chartTitle
|
|
},
|
|
toolbox: {
|
|
show: true,
|
|
feature: {
|
|
saveAsImage: {}
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
name: '',
|
|
axisLabel: {
|
|
formatter: '{value}'
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: ['other', 'usa', 'germany', 'ussr', 'uk', 'japan', 'china', 'france', 'european'],
|
|
axisTick: {
|
|
alignWithLabel: true
|
|
},
|
|
axisLabel: {
|
|
formatter: function (value) {
|
|
return '{' + value + '| }';
|
|
},
|
|
rich: {
|
|
value: {
|
|
lineHeight: 10,
|
|
align: 'center'
|
|
},
|
|
other: {
|
|
height: 20,
|
|
width: 20,
|
|
align: 'center',
|
|
backgroundColor: {
|
|
image: flags.other
|
|
}
|
|
},
|
|
usa: {
|
|
height: 20,
|
|
width: 20,
|
|
align: 'center',
|
|
backgroundColor: {
|
|
image: flags.usa
|
|
}
|
|
},
|
|
germany: {
|
|
height: 20,
|
|
width: 20,
|
|
align: 'center',
|
|
backgroundColor: {
|
|
image: flags.germany
|
|
}
|
|
},
|
|
ussr: {
|
|
height: 20,
|
|
width: 20,
|
|
align: 'center',
|
|
backgroundColor: {
|
|
image: flags.ussr
|
|
}
|
|
},
|
|
uk: {
|
|
height: 20,
|
|
width: 20,
|
|
align: 'center',
|
|
backgroundColor: {
|
|
image: flags.uk
|
|
}
|
|
},
|
|
japan: {
|
|
height: 20,
|
|
width: 20,
|
|
align: 'center',
|
|
backgroundColor: {
|
|
image: flags.japan
|
|
}
|
|
},
|
|
china: {
|
|
height: 20,
|
|
width: 20,
|
|
align: 'center',
|
|
backgroundColor: {
|
|
image: flags.china
|
|
}
|
|
},
|
|
france: {
|
|
height: 20,
|
|
width: 20,
|
|
align: 'center',
|
|
backgroundColor: {
|
|
image: flags.france
|
|
}
|
|
},
|
|
european: {
|
|
height: 20,
|
|
width: 20,
|
|
align: 'center',
|
|
backgroundColor: {
|
|
image: flags.european
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
type: 'bar',
|
|
label: seriesLabel,
|
|
barWidth: '30px',
|
|
data: [
|
|
{
|
|
value: otherData.value,
|
|
itemStyle: {
|
|
color: otherData.color
|
|
}
|
|
},
|
|
{
|
|
value: usaData.value,
|
|
itemStyle: {
|
|
color: usaData.color
|
|
}
|
|
},
|
|
{
|
|
value: germanyData.value,
|
|
itemStyle: {
|
|
color: germanyData.color
|
|
}
|
|
},
|
|
{
|
|
value: ussrData.value,
|
|
itemStyle: {
|
|
color: ussrData.color
|
|
}
|
|
},
|
|
{
|
|
value: ukData.value,
|
|
itemStyle: {
|
|
color: ukData.color
|
|
}
|
|
},
|
|
{
|
|
value: japanData.value,
|
|
itemStyle: {
|
|
color: japanData.color
|
|
}
|
|
},
|
|
{
|
|
value: chinaData.value,
|
|
itemStyle: {
|
|
color: chinaData.color
|
|
}
|
|
},
|
|
{
|
|
value: franceData.value,
|
|
itemStyle: {
|
|
color: franceData.color
|
|
}
|
|
},
|
|
{
|
|
value: euData.value,
|
|
itemStyle: {
|
|
color: euData.color
|
|
}
|
|
}
|
|
]
|
|
}]
|
|
};
|
|
|
|
// use configuration item and data specified to show chart
|
|
myChart.setOption(option);
|
|
window.addEventListener('resize',
|
|
function() {
|
|
myChart.resize();
|
|
});
|
|
};
|
|
|
|
eChartsInterop.BuildBarChartByTier = function (elementId, chartTitle, chartData) {
|
|
|
|
var seriesLabel = {
|
|
show: true
|
|
}
|
|
|
|
// based on prepared DOM, initialize echarts instance
|
|
var myChart = echarts.init(document.getElementById(elementId), 'dark');
|
|
|
|
// specify chart configuration item and data
|
|
var option = {
|
|
title: {
|
|
text: chartTitle
|
|
},
|
|
toolbox: {
|
|
show: true,
|
|
feature: {
|
|
saveAsImage: {}
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
name: '',
|
|
axisLabel: {
|
|
formatter: '{value}'
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: ['X', 'IX', 'VIII', 'VII', 'VI', 'V', 'IV', 'III', 'II', 'I'],
|
|
axisTick: {
|
|
alignWithLabel: true
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
type: 'bar',
|
|
label: seriesLabel,
|
|
barWidth: '30px',
|
|
data: [
|
|
{
|
|
value: chartData[9].value,
|
|
itemStyle: {
|
|
color: chartData[9].color
|
|
}
|
|
},
|
|
{
|
|
value: chartData[8].value,
|
|
itemStyle: {
|
|
color: chartData[8].color
|
|
}
|
|
},
|
|
{
|
|
value: chartData[7].value,
|
|
itemStyle: {
|
|
color: chartData[7].color
|
|
}
|
|
},
|
|
{
|
|
value: chartData[6].value,
|
|
itemStyle: {
|
|
color: chartData[6].color
|
|
}
|
|
},
|
|
{
|
|
value: chartData[5].value,
|
|
itemStyle: {
|
|
color: chartData[5].color
|
|
}
|
|
},
|
|
{
|
|
value: chartData[4].value,
|
|
itemStyle: {
|
|
color: chartData[4].color
|
|
}
|
|
},
|
|
{
|
|
value: chartData[3].value,
|
|
itemStyle: {
|
|
color: chartData[3].color
|
|
}
|
|
},
|
|
{
|
|
value: chartData[2].value,
|
|
itemStyle: {
|
|
color: chartData[2].color
|
|
}
|
|
},
|
|
{
|
|
value: chartData[1].value,
|
|
itemStyle: {
|
|
color: chartData[1].color
|
|
}
|
|
},
|
|
{
|
|
value: chartData[0].value,
|
|
itemStyle: {
|
|
color: chartData[0].color
|
|
}
|
|
}
|
|
]
|
|
}]
|
|
};
|
|
|
|
// use configuration item and data specified to show chart
|
|
myChart.setOption(option);
|
|
window.addEventListener('resize',
|
|
function () {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
|
|
eChartsInterop.BuildStackedBarChart = function (elementId) {
|
|
var tankTypes = {
|
|
'HeavyTank': '/tank-type/vehicle.class.heavy.small.scale-200.png',
|
|
'AtSpg': '/tank-type/vehicle.class.atspg.small.scale-200.png',
|
|
'MediumTank': '/tank-type/vehicle.class.medium.small.scale-200.png',
|
|
'LightTank': '/tank-type/vehicle.class.light.small.scale-200.png'
|
|
};
|
|
|
|
var seriesLabel = {
|
|
show: true
|
|
}
|
|
|
|
// based on prepared DOM, initialize echarts instance
|
|
var myChart = echarts.init(document.getElementById(elementId), 'dark');
|
|
|
|
// specify chart configuration item and data
|
|
var option = {
|
|
|
|
title: {
|
|
text: 'Statistics by tank types'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { // Use axis to trigger tooltip
|
|
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['Battles', '% Побед', 'Avg Dmg']
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'value'
|
|
},
|
|
toolbox: {
|
|
show: true,
|
|
feature: {
|
|
saveAsImage: {}
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: ['HeavyTank', 'AtSpg', 'MediumTank', 'LightTank'],
|
|
axisTick: {
|
|
alignWithLabel: true
|
|
},
|
|
axisLabel: {
|
|
formatter: function (value) {
|
|
return '{' + value + '| }';
|
|
},
|
|
rich: {
|
|
value: {
|
|
lineHeight: 10,
|
|
align: 'center'
|
|
},
|
|
HeavyTank: {
|
|
height: 20,
|
|
width: 20,
|
|
align: 'center',
|
|
backgroundColor: {
|
|
image: tankTypes.HeavyTank
|
|
}
|
|
},
|
|
AtSpg: {
|
|
height: 20,
|
|
width: 20,
|
|
align: 'center',
|
|
backgroundColor: {
|
|
image: tankTypes.AtSpg
|
|
}
|
|
},
|
|
MediumTank: {
|
|
height: 20,
|
|
width: 20,
|
|
align: 'center',
|
|
backgroundColor: {
|
|
image: tankTypes.MediumTank
|
|
}
|
|
},
|
|
LightTank: {
|
|
height: 20,
|
|
width: 20,
|
|
align: 'center',
|
|
backgroundColor: {
|
|
image: tankTypes.LightTank
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Battles',
|
|
type: 'bar',
|
|
stack: 'total',
|
|
label: {
|
|
show: true
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: [830, 1300, 50, 5000]
|
|
},
|
|
{
|
|
name: '% Побед',
|
|
type: 'bar',
|
|
stack: 'total',
|
|
label: {
|
|
show: true
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: [35, 56, 48, 60]
|
|
},
|
|
{
|
|
name: 'Avg Dmg',
|
|
type: 'bar',
|
|
stack: 'total',
|
|
label: {
|
|
show: true
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: [600, 2500, 1700, 1300]
|
|
}
|
|
]
|
|
};
|
|
|
|
// use configuration item and data specified to show chart
|
|
myChart.setOption(option);
|
|
window.onresize = function () {
|
|
myChart.resize();
|
|
};
|
|
};
|
|
|