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;
}

window.addEventListener("resize", function () {
  if (myChart != null && myChart != undefined) {
    myChart.resize();
  }
});