import * as echarts from "echarts";

const constColor = "#00ffff";
const axisCommon = function () {
  return {
    axisLine: {
      show: true,
      lineStyle: {
        color: constColor
      }
    },
    axisTick: {
      show: false,
      lineStyle: {
        color: constColor
      }
    },
    axisLabel: {
      show: true,
      color: constColor
    },
    splitLine: {
      show: false,
      lineStyle: {
        type: 'solid',
        color: '#0b388a'
      }
    },
    splitArea: {
      areaStyle: {
        color: constColor
      }
    }
  };
};

let theme = {
  color: [
    "#55d5d2",
    "#91cc75",
    "#fac858",
    "#ee6666",
    "#73c0de",
    "#3ba272",
    "#fc8452",
    "#9a60b4",
    "#ea7ccc",
  ],
  backgroundColor: "rgba(0,0,0,0)",
  textStyle: {},
  title: {
    textStyle: {
      color: "#ffffff",
    },
    subtextStyle: {
      color: "#ffffff",
    },
  },
  line: {
    itemStyle: {
      borderWidth: 1,
    },
    lineStyle: {
      width: 2,
    },
    symbolSize: 4,
    symbol: "emptyCircle",
    smooth: false,
  },
  radar: {
    itemStyle: {
      borderWidth: 1,
    },
    lineStyle: {
      width: 2,
    },
    symbolSize: 4,
    symbol: "emptyCircle",
    smooth: false,
  },
  bar: {
    itemStyle: {
      barBorderWidth: "0",
      barBorderColor: "rgba(255,255,255,0)",
    },
  },
  pie: {
    itemStyle: {
      borderWidth: "0",
      borderColor: "rgba(255,255,255,0)",
    },
  },
  scatter: {
    itemStyle: {
      borderWidth: "0",
      borderColor: "rgba(255,255,255,0)",
    },
  },
  boxplot: {
    itemStyle: {
      borderWidth: "0",
      borderColor: "rgba(255,255,255,0)",
    },
  },
  parallel: {
    itemStyle: {
      borderWidth: "0",
      borderColor: "rgba(255,255,255,0)",
    },
  },
  sankey: {
    itemStyle: {
      borderWidth: "0",
      borderColor: "rgba(255,255,255,0)",
    },
  },
  funnel: {
    itemStyle: {
      borderWidth: "0",
      borderColor: "rgba(255,255,255,0)",
    },
  },
  gauge: {
    itemStyle: {
      borderWidth: "0",
      borderColor: "rgba(255,255,255,0)",
    },
  },
  candlestick: {
    itemStyle: {
      color: "#eb5454",
      color0: "#47b262",
      borderColor: "#eb5454",
      borderColor0: "#47b262",
      borderWidth: 1,
    },
  },
  graph: {
    itemStyle: {
      borderWidth: "0",
      borderColor: "rgba(255,255,255,0)",
    },
    lineStyle: {
      width: 1,
      color: "#aaa",
    },
    symbolSize: 4,
    symbol: "emptyCircle",
    smooth: false,
    color: [
      "#55d5d2",
      "#91cc75",
      "#fac858",
      "#ee6666",
      "#73c0de",
      "#3ba272",
      "#fc8452",
      "#9a60b4",
      "#ea7ccc",
    ],
    label: {
      color: "#ffffff",
    },
  },
  map: {
    itemStyle: {
      areaColor: "#eee",
      borderColor: "#444",
      borderWidth: 0.5,
    },
    label: {
      color: "#000",
    },
    emphasis: {
      itemStyle: {
        areaColor: "rgba(255,215,0,0.8)",
        borderColor: "#444",
        borderWidth: 1,
      },
      label: {
        color: "rgb(100,0,0)",
      },
    },
  },
  geo: {
    itemStyle: {
      areaColor: "#eee",
      borderColor: "#444",
      borderWidth: 0.5,
    },
    label: {
      color: "#000",
    },
    emphasis: {
      itemStyle: {
        areaColor: "rgba(255,215,0,0.8)",
        borderColor: "#444",
        borderWidth: 1,
      },
      label: {
        color: "rgb(100,0,0)",
      },
    },
  },
  timeAxis: axisCommon(),
  logAxis: axisCommon(),
  valueAxis: axisCommon(),
  categoryAxis: axisCommon(),
  toolbox: {
    iconStyle: {
      borderColor: "#1be441",
    },
    emphasis: {
      iconStyle: {
        borderColor: "#ff0d0d",
      },
    },
  },
  legend: {
    textStyle: {
      color: constColor
    },
  },
  tooltip: {
    axisPointer: {
      lineStyle: {
        color: constColor,
        width: 1,
      },
      crossStyle: {
        color: constColor,
        width: 1,
      },
    },
  },
  visualMap: {
    color: ["#0b1f24", "#d773d8", "#f6efa6"],
  },
  dataZoom: {
    handleSize: "undefined%",
    textStyle: {},
  },
  markPoint: {
    label: {
      color: "#ffffff",
    },
    emphasis: {
      label: {
        color: "#ffffff",
      },
    },
  },
};
echarts.registerTheme("custom", theme);