baseddata.io/static/js/miner-rewards.js

141 lines
3.2 KiB
JavaScript

let dataArr = [];
const myChart = echarts.init(document.getElementById("chart"));
$.get("https://api.bitlab21.com/miner_rewards", {}, (response) => {
dataArr = response;
console.log(dataArr);
initEchart();
});
function initEchart() {
const option = {
backgroundColor: backgroundColor,
tooltip: {
backgroundColor: tooltipBgColor,
order: "seriesDesc",
textStyle: textStyleMain,
trigger: "axis",
},
toolbox: toolboxParams,
xAxis: {
data: dataArr.map((row) => row.date),
axisTick: axisTick,
axisLabel: axisLabel,
axisLine: axisLine,
},
grid: grid,
dataZoom: dataZoom(97),
yAxis: [
{
type: "value",
nameGap: 50,
name: "Total Daily Rewards (USD)",
nameLocation: "middle",
nameTextStyle: {
fontSize: 12 * fontScale,
padding: [0, 0, 15, 0],
color: "#eff1d6",
},
position: "left",
alignTicks: true,
axisTick: axisTick,
axisLine: axisLine,
splitLine: {
show: false,
},
axisLabel: axisLabel,
},
{
type: "value",
name: "Block Subsidy (BTC)",
nameGap: -30,
nameLocation: "middle",
nameTextStyle: yaxisTextStyle2,
axisTick: axisTick,
position: "right",
alignTicks: true,
axisLine: axisLine,
splitLine: {
show: false,
},
axisLabel: {
fontSize: 12 * fontScale,
color: "#eff1d6",
},
},
],
series: [
{
type: "line",
name: "Daily Subsidy (USD)",
smooth: true,
stack: "Total",
areaStyle: {},
symbol: "none",
lineStyle: {
width: 0,
},
data: dataArr.map((row) => row.subsidy_usd),
},
{
type: "line",
name: "Daily Fees (USD)",
smooth: true,
stack: "Total",
areaStyle: {},
symbol: "none",
lineStyle: {
width: 0,
},
data: dataArr.map((row) => row.totalfee_usd),
},
{
type: "line",
name: "Daily Total Reward (USD)",
smooth: true,
symbol: "none",
lineStyle: {
width: 1,
color: "#eff1d6",
},
data: dataArr.map((row) => row.total_reward_usd),
},
{
type: "line",
yAxisIndex: 1,
name: "Block Subsidy (BTC)",
symbol: "none",
lineStyle: {
width: 3,
},
data: dataArr.map((row) => row.block_subsidy),
},
],
};
myChart.setOption(option);
}
const checkboxLog = document.body.querySelector("#checkbox-log");
checkboxLog.addEventListener("change", (e) => {
const isChecked = e.target.checked;
myChart.setOption({
yAxis: [
{
type: "value",
type: isChecked ? "log" : "value",
name: "Price (USD)",
nameLocation: "middle",
splitNumber: isChecked ? 5 : 5,
nameTextStyle: yaxisTextStyle,
position: "left",
alignTicks: true,
axisLine: axisLine,
axisLabel: xaxisLabel,
},
],
dataZoom: dataZoom((start = isChecked ? 0 : 90)),
});
});