highCharts 设置标示线

highcharts的图表配置千千万，需要改个内容需要去看文档，最难受的是文档有些不全，大部分还是英文，想要搞明白太费时间了，往往一个小细节就要花一两个小时才能找到关键位置进行修改。
有想着找个一劳永逸的方案，进行解决，把文档看几遍把属性都记住，可是没有几天就忘记了，而且很多又用不上，只有需求到了才会去看文档。
既然找不到好的方案，那就把经历过的记录一下，帮助一下还没有经历过的。
如果大家在使用过程中，产品有一些独到之处可以分享出来。
这一次需要开发个新图，很多属性之前都没有遇到过。
效果图如下：

这张图里面涉及到了
1、坐标轴隐藏
2、图表倒置
3、标示线处理
4、柱状图内部文字展示
5、柱状图hover效果
6、设置刻度线

{
    title: {
      text: '',
    },
    chart: {
      spacing: [40, 24, 0, 24],
      height,
      inverted: true, // 图表倒置
    },
    credits: {
      enabled: false, // 隐藏highCharts链接信息
    },
    colors: colors,
    tooltip: {
      borderWidth: 0,
      backgroundColor: 'rgba(255, 255, 255, 0.0)', // 设置背景色为透明色
      padding: 0,
      shadow: false,
      useHTML: true,
      shared: true,
      formatter: function () {
        const { points = [] } = this || {};
        // @ts-ignore
        const result = this?.y - baseLine;
        let name = '';
        let flag = '';
        // @ts-ignore
        if (result > 0) {
          name = intl.formatMessage({
            id: 'pages.overview.title.energyRanking4',
          });
          flag = '+';
        } else {
          name = intl.formatMessage({
            id: 'pages.overview.title.energyRanking5',
          });
          flag = '-';
        }
        // @ts-ignore
        const v = ((Math.abs(this?.y - baseLine) * 100) / baseLine).toFixed(2) + '%';
        return `<div class="chartsTooltipHomeBar">
            ${points.reduce((_value) => {
              let value: string = _value;
              value += `<p><span>${name || '-'} ${Math.abs(result).toFixed(
                2,
              )} ${unit} </span> <span class="split">|</span> <span>
              ${baseLine ? flag : ''}${baseLine ? v : '-'}</span></p>`;
              return value;
            }, ``)}
          </div>`;
      },
    },
    xAxis: {
      lineWidth: 0, //去掉x轴线
      tickWidth: 0, //去掉刻度
      crosshair: {
        color: '#F7F7F7', // hover 对于图像时，展示对应背景色
      },
      zoomEnabled: false,
      tickLength: 4,
      tickmarkPlacement: 'on',
      title: {
        align: 'high',
        x: 0,
        y: -20,
        // 旋转角度6
        rotation: 0,
        text: `<span class="chartsYAxisTitleText">${yAxisName}</span>`,
      },
      labels: {
        style: {
          color: 'red', // 设置X坐标轴颜色
          fontSize: '14px',
        },
      },

      gridLineColor: 'transparent', // 设置刻度线颜色，这里设置成透明
      categories: xAxis,
    },
    yAxis: {
      zoomEnabled: false,
      gridLineDashStyle: undefined,
      gridLineColor: 'transparent',
      title: {
        reserveSpace: false,
        // text: `<span class="chartsYAxisTitleText">${yAxisName}</span>`,
        text: '',
        align: 'high',
        rotation: 0,
        offset: 0,
        useHTML: true,
        style: {
          color: '#7F7F7F',
        },
        x: 0,
        y: 0,
      },
      labels: {
        enabled: false,
        style: {
          color: '#7F7F7F',
        },
      },
      plotLines: [ //标示线
        {
          color: '#FBCE07', //线的颜色，定义为黄色
          dashStyle: 'Dash', //标示线的样式，默认是solid（实线），这里定义为长虚线
          value: baseLine, //定义在哪个值上显示标示线
          width: 2, //标示线的宽度，2px
          label: { // 标示线展示的文字
            text: `${baseLine} ${unit}`, 
            rotation: -0, //文字位置
            textAlign: 'center',
            verticalAlign: 'top',
            style: { // 字体样式
              color: ' #404040',
              fontWeight: 500,
              fontSize: '14px',
            },
          },
          zIndex: 9, // 这个属性可以让标示线浮起来，不会被遮住
        },
      ],
    },
    legend: {
      enabled: false,
    },
    plotOptions: {
      series: {
        borderWidth: 0,
        dataLabels: {
          enabled: true, // 启用
          inside: true, // 文字的位置，这里设置为在柱形图内部
        },
      },
      bar: {
        borderWidth: 0,
        maxPointWidth: 16,
        states: {
          hover: {
            color: '#FBCE07', // 柱状图hover时柱子的颜色
          },
        },
      },
    },
    series: series.map((v) => ({
      type: 'bar',
      lineWidth: 2,
      marker: {
        enabled: v?.data?.length === 1,
      },
      ...v,
      dataLabels: [ // 对柱形图内部文字样式和格式的设置
        {
          align: 'left', // 左对齐
          format: '{y} ' + unit, 
          borderWidth: 0,
          style: { 
            color: '#FFFFFF',
            fontStyle: 'normal',
            fontWeight: 400,
            fontSize: '12px',
            border: '0px',
          },
          borderColor: '#FFFFFF',
        },
      ],
    })),
  }