import Highcharts from "highcharts/highstock";

const chartBaseConfig = {
  title: {
    text: "",
  },
  accessibility: {
    enabled: false,
  },
  chart: {
    style: {
      fontSize: 16,
    },
  },
  credits: {
    enabled: false,
  },
  legend: {
    align: "center",
    verticalAlign: "top",
  },
};

export function lineChartRender(data) {
  let options = {
    // colors: ["#436DFF", "#25DEDB"],
    plotOptions: {
      series: {
        marker: {
          fillColor: "#FFFFFF",
          lineWidth: 2,
          lineColor: null,
        },
      },
    },
    xAxis: {
      categories: data.time,
      labels: {
        style: {
          color: "#999",
        },
      },
      tickWidth: 1,
      tickLength: 5,
      lineColor:'#bfbfbf',
      tickColor:'#bfbfbf',
    },
    yAxis: [
      {
        gridLineWidth: 0,
        lineWidth: 1,
        lineColor:'#bfbfbf',
        tickColor:'#bfbfbf',
        tickWidth: 1,
        tickLength: 5,
        labels: {
          style: {
            color: "#999",
          },
        },
        title: {
          text: "次",
          align: "high",
          style: {
            color: "#999",
          },
          y: -10,
          offset: 0,
          rotation: 0,
        },
      },
    ],
    series: [
      {
        data: data.value,
        type: "line",
        name: "阅读量",
        yAxis: 0,
      },
    ],
    ...chartBaseConfig,
  };
  Highcharts.chart("chartBox1", options);
}

export function pieChartRender(data) {
  let options = {
    ...chartBaseConfig,
    // colors: ["#59F7CA", "#62F2F8", "#F2B949", "#FF8838", "#FDFDFD", "#4A7CE9"],
    credits: {
      enabled: false,
    },
    chart: {
      ...chartBaseConfig.chart,
    },
    title: {
      text: "",
    },
    legend: {
      ...chartBaseConfig.legend,
      align: "right",
      verticalAlign: "top",
      layout: "vertical",
      x: 0,
      y: 0,
    },
    tooltip: {
      shared: false,
      pointFormat: '<span>{point.y}次:{point.Percent}%<br/>'
    },
    plotOptions: {
      pie: {
        allowPointSelect: true,
        cursor: "pointer",
        dataLabels: {
          enabled: true,
          distance: -10,
          format: "",
        },
        showInLegend: true,
      },
    },
    series: [
      {
        type: "pie",
        innerSize: "80%",
        name: "",
        colorByPoint: true,
        borderRadius: 0,
        data: data,
      },
    ],
  };
  Highcharts.chart("chartBox2", options);
}
