How do I access the development tools and change the defaultOption?

I would like to know if there is any way to change the default state of an ECHARTS chart with developer tools. For example, it would be something like:

        document.addEventListener("DOMContentLoaded", () => {

            // Access type:'gauge' defaultOption
            echarts.extendSeriesModel({
                type: 'gauge',
                defaultOption: {
                    startAngle: 180,
                    endAngle: 0,
                    radius: '75%',
                    axisLine: {
                        lineStyle: {
                            color: [[1, "#333"]]
                        }
                    },
                    itemStyle: {
                        color: '#f00'
                    }
                }
            });

            // init
            const chart = echarts.init(document.getElementById('chart'));

            // option
            const option = {
                series: [
                    {
                        type: 'gauge', // new defaultOption (does not work)
                        data: [{ value: 50, name: 'Speed' }]
                    }
                ]
            };

            // setOption
            chart.setOption(option);
        });

<head>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
    <title>Custom Gauge</title>
</head>

<div id="chart" style="width: 100%; height: 100vh;"></div>

My intention (which is certainly incorrect) is to access the type of a chart internally (e.g. type:'gauge') and change its default settings for each type:'gauge' created.

Note that I prefer to use something related to these methods.

EDIT

When processing this code:

        // option
        const option = {
            series: [
                {
                    type: 'gauge', // new defaultOption (does not work)
                    data: [{ value: 50, name: 'Speed' }]
                }
            ]
        };

        // setOption
        chart.setOption(option);

The result would be:

In other words, I'd like to change the initial pattern of the graph, but using an ECHARTS function/method designed for this purpose (see link above).

Solution

The following code looks like giving you the result you want. Please confirm.

You will see, that in this example I am using the built-in registerTheme method to create a custom theme that can be applied to all gauge-type charts.

Instead of tinkering or modifying the internals of the library (which is not recommended), I make use of the extensible API provided by the registerTheme method to easily create instances of custom gauge charts.

Note: the built-in preview of StackOverflow, is showing a messed-up version of the chart due to its limited with. Please copy and paste the code in some kind of editor, e.g. Codepen to see and tweak the final result.

echarts.registerTheme('custom-gauge-theme', {
  gauge: {
    startAngle: 180,
    endAngle: 0,
    min: 0,
    max: 100,
    splitNumber: 10,
    itemStyle: {
      color: '#ff0000',
    },
    axisLabel: {
      distance: 30,
      color: '#000',
      fontSize: 20,
      formatter: function (value) {
        return Math.round(value); // Round to nearest integer
      }
    },
    axisLine: {
      lineStyle: {
        color: [
          [1, '#000'],
        ]
      },
    },
  }

});

const chart = echarts.init(document.getElementById('chart'), 'custom-gauge-theme');

chart.setOption({
  series: [
    {
      type: 'gauge',
      data: [{ value: 50, name: "Speed" }],
    },
  ],
});

<head>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
    <title>Custom Gauge</title>
</head>

<div id="chart" style="width: 100%; height: 100vh;"></div>