How to use the highcharts.getOptions function in highcharts

}

  for (let i = 0; i < Highcharts.charts.length; i = i + 1) {
    chart = Highcharts.charts[i];
    if(chart.options.chart.type === 'scatter3d'){
      Highcharts.addEvent(chart.container, 'mousedown', dragStart(chart));
      Highcharts.addEvent(chart.container, 'touchstart', dragStart(chart));

    }
  }
}, 1000); //1000 ms is totally arbitrary and really a hack to make sure the event binders occur after charts are loaded

// Give the points a 3D feel by adding a radial gradient
Highcharts.setOptions({
    colors: Highcharts.getOptions().colors.map(function (color) {
        return {
            radialGradient: {
                cx: 0.4,
                cy: 0.3,
                r: 0.5
            },
            stops: [
                [0, color],
                [1, Highcharts.Color(color).brighten(-0.2).get('rgb')]
            ]
        };
    })
});

export default class ScatterChart extends React.Component {
  render() {

type: 'column',
          yAxis: 1,
          data: tempData.pv
        }, {
          name: '错误率',
          type: 'spline',
          data: tempData.jsErr,
          tooltip: {
            valueSuffix: '%'
          }
        }],
        yAxis: [{ // Primary yAxis
          labels: {
            format: '{value}%',
            style: {
              color: Highcharts.getOptions().colors[1]
            }
          },
          min: 0,
          title: {
            text: '错误率',
            style: {
              color: Highcharts.getOptions().colors[1]
            }
          }
        }, { // Secondary yAxis
          title: {
            text: 'PV',
            style: {
              color: Highcharts.getOptions().colors[0]
            }
          },

let tempData = {
      times: [],
      succRate: []
    };
    _.each(data, (val) => {
      tempData.times.push([new Date(val.createTime).getTime(), val.times]);
      tempData.succRate.push([new Date(val.createTime).getTime(), parseFloat((val.succRate * 100).toFixed(2))]);
    });
    this.api_config = {
      type: 40,
      ext: {
        yAxis: [{ // Primary yAxis
          labels: {
            format: '{value}%',
            style: {
              color: Highcharts.getOptions().colors[1]
            }
          },
          min: 0,
          max: 100,
          title: {
            text: "成功率",
            style: {
              color: Highcharts.getOptions().colors[1]
            }
          }
        }, { // Secondary yAxis
          title: {
            text: '调用次数',
            style: {
              color: Highcharts.getOptions().colors[0]
            }

type: 'column',
          yAxis: 1,
          data: tempData.pv
        }, {
          name: '错误率',
          type: 'spline',
          data: tempData.jsErr,
          tooltip: {
            valueSuffix: '%'
          }
        }],
        yAxis: [{ // Primary yAxis
          labels: {
            format: '{value}%',
            style: {
              color: Highcharts.getOptions().colors[1]
            }
          },
          min: 0,
          title: {
            text: '错误率',
            style: {
              color: Highcharts.getOptions().colors[1]
            }
          }
        }, { // Secondary yAxis
          title: {
            text: 'PV',
            style: {
              color: Highcharts.getOptions().colors[0]
            }
          },

this.api_config = {
      type: 40,
      ext: {
        yAxis: [{ // Primary yAxis
          labels: {
            format: '{value}%',
            style: {
              color: Highcharts.getOptions().colors[1]
            }
          },
          min: 0,
          max: 100,
          title: {
            text: "成功率",
            style: {
              color: Highcharts.getOptions().colors[1]
            }
          }
        }, { // Secondary yAxis
          title: {
            text: '调用次数',
            style: {
              color: Highcharts.getOptions().colors[0]
            }
          },
          labels: {
            format: '{value}',
            style: {
              color: Highcharts.getOptions().colors[0]
            }
          },
          opposite: true

private setHighchartTheme() {
        const currentOptions = Highcharts.getOptions();
        for (const property in currentOptions) {
            if (typeof currentOptions[property] !== 'function') {
                delete currentOptions[property]
            }
        }
        Highcharts.setOptions(this.defaultHighchartsTheme);
        Highcharts.setOptions(this.theme.highcharts as any);
    }

}, {
                type: 'column',
                name: 'Scope Change',
                data: dataset.map((week) => {
                    return {
                        y: week.scopeChangeCompletion[metric].count,
                        issues: week.scopeChangeCompletion.list,
                    }
                })
            }, {
                type: 'spline',
                name: 'Velocity',
                data: dataset.map(week => week.completion[metric].velocity),
                marker: {
                    lineWidth: 2,
                    lineColor: Highcharts.getOptions().colors[3],
                    fillColor: 'white'
                }
            }, {
                type: 'spline',
                name: 'SC Evo.',
                data: dataset.map(week => week.scopeChangeCompletion[metric].velocity),
                marker: {
                    lineWidth: 2,
                    lineColor: Highcharts.getOptions().colors[4],
                    fillColor: 'white'
                }
            }],
            credits: {
                enabled: false
            }
        };

import React, { Component } from 'react';
import Highcharts from 'highcharts';
import {
  HighchartsChart, withHighcharts, Title, XAxis, YAxis, TreemapSeries, Legend
} from 'react-jsx-highcharts';
import ExampleCode from '../utils/ExampleCode';
import code from './exampleCode';

const colorAxis = {
  minColor: '#FFFFFF',
  maxColor: Highcharts.getOptions().colors[0]
};

class App extends Component {

  constructor (props) {
    super(props);

    this.state = {
      treemapData: [
        { name: 'A', value: 6, colorValue: 1 },
        { name: 'B', value: 6, colorValue: 2 },
        { name: 'C', value: 4, colorValue: 3 },
        { name: 'D', value: 3, colorValue: 4 },
        { name: 'E', value: 2, colorValue: 5 },
        { name: 'F', value: 2, colorValue: 6 },
        { name: 'G', value: 1, colorValue: 7 }

constructor() {
        this.defaultHighchartsTheme = cloneDeep(Highcharts.getOptions());
        try {
            const stored = localStorage.getItem('theme');
            if (stored) {
                this.theme = JSON.parse(stored);
            } else {
                this.theme = this.themes[0];
            }
        } catch (err) {
            this.theme = this.themes[0];
        }
        this.setHighchartTheme();
    }