141 lines
3.2 KiB
JavaScript
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)),
|
|
});
|
|
});
|