140 lines
2.9 KiB
JavaScript
140 lines
2.9 KiB
JavaScript
const fontScale = 0.8;
|
|
|
|
const backgroundColor = "#f9f9f9";
|
|
const tooltipBgColor = "#e7e7f5";
|
|
const textColor = "#373841";
|
|
|
|
const textStyleMain = {
|
|
fontFamily: "sans-serif",
|
|
fontSize: 12 * fontScale,
|
|
color: textColor,
|
|
};
|
|
|
|
const tooltip = {
|
|
borderColor: textColor,
|
|
backgroundColor: tooltipBgColor,
|
|
order: "seriesDesc",
|
|
textStyle: textStyleMain,
|
|
trigger: "axis",
|
|
};
|
|
|
|
const toolboxParams = {
|
|
itemSize: 16 * fontScale,
|
|
showTitle: true,
|
|
top: "-1%",
|
|
right: "20%",
|
|
iconStyle: {
|
|
borderColor: textColor,
|
|
borderWidth: 2,
|
|
},
|
|
feature: {
|
|
dataZoom: {
|
|
yAxisIndex: "none",
|
|
},
|
|
dataView: {},
|
|
saveAsImage: {
|
|
pixelRatio: 2,
|
|
},
|
|
},
|
|
};
|
|
|
|
const axisLabel = {
|
|
fontSize: 12 * fontScale,
|
|
color: textColor,
|
|
margin: 10,
|
|
};
|
|
|
|
const axisLine = {
|
|
show: true,
|
|
lineStyle: {
|
|
color: textColor,
|
|
width: 2,
|
|
},
|
|
};
|
|
|
|
const axisTick = { show: true };
|
|
|
|
const grid = {
|
|
bottom: 30,
|
|
top: 10,
|
|
left: 15,
|
|
containLabel: true,
|
|
};
|
|
|
|
const yaxisTextStyle = {
|
|
fontSize: 12 * fontScale,
|
|
padding: [0, 0, 10, 0],
|
|
color: textColor,
|
|
};
|
|
|
|
const yaxisTextStyle2 = {
|
|
fontSize: 12 * fontScale,
|
|
padding: [50, 0, 0, 0],
|
|
color: textColor,
|
|
};
|
|
|
|
function dataZoom() {
|
|
const dataZoom = [
|
|
{
|
|
type: "inside",
|
|
},
|
|
];
|
|
|
|
return dataZoom;
|
|
}
|
|
|
|
function nFormatter(value, digits) {
|
|
const lookup = [
|
|
{ value: 1, symbol: "" },
|
|
{ value: 1e3, symbol: "k" },
|
|
{ value: 1e6, symbol: "M" },
|
|
{ value: 1e9, symbol: "G" },
|
|
{ value: 1e12, symbol: "T" },
|
|
{ value: 1e15, symbol: "P" },
|
|
{ value: 1e18, symbol: "E" },
|
|
];
|
|
const rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
|
|
const item = lookup
|
|
.slice()
|
|
.reverse()
|
|
.find((item) => value >= item.value);
|
|
return item
|
|
? (value / item.value).toFixed(digits).replace(rx, "$1") + item.symbol
|
|
: "0";
|
|
}
|
|
|
|
function periodDropdown(periods, defaultIndex = 0) {
|
|
const modifiers = document.getElementById("chart-modifiers");
|
|
const dropdownContainer = document.createElement("div");
|
|
const dropdown = document.createElement("select");
|
|
const textNode = document.createTextNode("Select period: ");
|
|
|
|
dropdownContainer.id = "dropdown-container";
|
|
dropdown.id = "select-period-dropdown";
|
|
dropdownContainer.appendChild(textNode);
|
|
dropdownContainer.appendChild(dropdown);
|
|
modifiers.appendChild(dropdownContainer);
|
|
|
|
periods.forEach((period, index) => {
|
|
const option = document.createElement("option");
|
|
if (index === defaultIndex) {
|
|
option.selected = true;
|
|
}
|
|
option.value = period;
|
|
option.textContent = period;
|
|
dropdown.appendChild(option);
|
|
});
|
|
}
|
|
|
|
function getPeriodFromDropdown() {
|
|
let dropdown = document.getElementById("select-period-dropdown");
|
|
let selectedIndex = dropdown.selectedIndex;
|
|
return dropdown.options[selectedIndex].value;
|
|
}
|
|
|
|
window.addEventListener("resize", function () {
|
|
if (myChart != null && myChart != undefined) {
|
|
myChart.resize();
|
|
}
|
|
});
|