102 lines
2.2 KiB
JavaScript
102 lines
2.2 KiB
JavaScript
|
let dataArr = [];
|
||
|
|
const myChart = echarts.init(document.getElementById("chart"));
|
||
|
|
|
||
|
|
$.get("https://api.bitlab21.com/feerates", {}, (response) => {
|
||
|
|
dataArr = response;
|
||
|
|
console.log(dataArr);
|
||
|
|
initEchart();
|
||
|
|
});
|
||
|
|
|
||
|
|
function initEchart() {
|
||
|
|
const option = {
|
||
|
|
backgroundColor: backgroundColor,
|
||
|
|
tooltip: {
|
||
|
|
valueFormatter: (value) => `${value.toFixed(0)} sats/vByte`,
|
||
|
|
backgroundColor: tooltipBgColor,
|
||
|
|
order: "seriesDesc",
|
||
|
|
textStyle: textStyleMain,
|
||
|
|
trigger: "axis",
|
||
|
|
},
|
||
|
|
toolbox: toolboxParams,
|
||
|
|
xAxis: {
|
||
|
|
data: dataArr.map((row) => row.date),
|
||
|
|
axisTick: axisTick,
|
||
|
|
axisLabel: axisLabel,
|
||
|
|
axisLine: axisLine,
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
axisTick: axisTick,
|
||
|
|
splitLine: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
axisLabel: axisLabel,
|
||
|
|
axisLine: axisLine,
|
||
|
|
},
|
||
|
|
grid: grid,
|
||
|
|
dataZoom: dataZoom((start = 98)),
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
type: "line",
|
||
|
|
id: "min-feerate",
|
||
|
|
name: "min",
|
||
|
|
showSymbol: false,
|
||
|
|
barCategoryGap: "0%",
|
||
|
|
data: [0],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: "bar",
|
||
|
|
stack: "value",
|
||
|
|
name: "10th",
|
||
|
|
barCategoryGap: "0%",
|
||
|
|
data: dataArr.map((row) => row.feerate_10th),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: "bar",
|
||
|
|
stack: "value",
|
||
|
|
name: "25th",
|
||
|
|
barCategoryGap: "0%",
|
||
|
|
data: dataArr.map((row) => row.feerate_25th),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: "bar",
|
||
|
|
stack: "value",
|
||
|
|
name: "50th",
|
||
|
|
barCategoryGap: "0%",
|
||
|
|
data: dataArr.map((row) => row.feerate_50th),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: "line",
|
||
|
|
id: "mean-feerate",
|
||
|
|
name: "mean",
|
||
|
|
showSymbol: false,
|
||
|
|
barCategoryGap: "0%",
|
||
|
|
data: [0],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: "bar",
|
||
|
|
stack: "value",
|
||
|
|
name: "75th",
|
||
|
|
barCategoryGap: "0%",
|
||
|
|
data: dataArr.map((row) => row.feerate_75th),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: "bar",
|
||
|
|
stack: "value",
|
||
|
|
name: "90th",
|
||
|
|
barCategoryGap: "0%",
|
||
|
|
data: dataArr.map((row) => row.feerate_90th),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: "line",
|
||
|
|
id: "max-feerate",
|
||
|
|
name: "max",
|
||
|
|
showSymbol: false,
|
||
|
|
barCategoryGap: "0%",
|
||
|
|
data: [0],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
|
||
|
|
myChart.setOption(option);
|
||
|
|
}
|