Question 298028 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How do I adjust the background color of the progress bar (gauge echarts)?

I would like to remove/change the background color (to transparent) of the area indicated below:

enter image description here

Code example:

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts Gauge Example</title>
    <!-- Inclua a biblioteca ECharts -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
  </head>

  <body>

    <!-- Crie um contêiner para o gráfico -->
    <div id="gaugeChart" style="width: 600px; height: 400px;"></div>

    <script>
      // Seu código ECharts aqui
      const gaugeData = [{
          value: 20
        },
        {
          value: 40
        }
      ];

      let myChart = echarts.init(document.getElementById('gaugeChart'));

      const option = {
        series: [{
          type: 'gauge',
          clockwise: false,
          startAngle: 140,
          endAngle: -90,
          min: 0,
          max: 100,
          pointer: {
            show: true
          },
          axisLabel: {
          color: 'red'
          },
          progress: {
            show: true,
            overlap: false,
            roundCap: true,
            clip: false
          },
          data: gaugeData
        }]
      };

      myChart.setOption(option);

    </script>

  </body>

</html>

I’ve tried setting itemStyle: {backgroundColor: 'transparent'} inside progress: {...} but it doesn’t work. How can I adjust it in gauge echarts?

  • I changed the background color to emphasize the image of the graph and point out where I want to change it.
Tags:

2

Answers


  1. 0

    From the docs (https://echarts.apache.org/en/option.html#xAxis.axisLine.lineStyle.opacity) this would be configured with the axisLine.lineStyle option:

    const option = {
  series: [{
    type: 'gauge',
    clockwise: false,
    startAngle: 140,
    endAngle: -90,
    min: 0,
    max: 100,
    pointer: {
      show: true
    },
    axisLabel: {
      color: 'red'
    },
    axisLine: {
      lineStyle: {
        opacity: 0, //See here
      }
    },
    progress: {
      show: true,
      overlap: false,
      roundCap: true,
      clip: false
    },
    data: gaugeData
  }]
};

    You can also optionally adjust the width if you wish, you can see the other options from the linked docs.

    Login or Signup to reply.
  2. 0 
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts Gauge Example</title>
    <!-- Inclua a biblioteca ECharts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
</head>

<body>

    <!-- Crie um contêiner para o gráfico -->
    <div id="gaugeChart" style="width: 600px; height: 400px;"></div>

    <script>
        // Seu código ECharts aqui
        const gaugeData = [{
            value: 20
        },
        {
            value: 40
        }
        ];

        let myChart = echarts.init(document.getElementById('gaugeChart'));

        const option = {
            series: [{
                type: 'gauge',
                clockwise: false,
                startAngle: 140,
                endAngle: -90,
                min: 0,
                max: 100,
                pointer: {
                    show: true
                },
                axisLabel: {
                    color: 'red'
                },
                progress: {
                    show: true,
                    overlap: false,
                    roundCap: true,
                    clip: false
                },
                data: gaugeData,
                axisLine: {
                    lineStyle: {
                        color: [[0.2, 'green'], [0.8, 'yellow'], [1, 'red']], // Specify color stops
                        width: 10, // Set the stroke width
                        shadowBlur: 10, // Add shadow blur
opacity: 10,
                        shadowColor: 'rgba(0, 0, 0, 0.5)' // Shadow color
                    }
                }
            }]
        };

        myChart.setOption(option);

    </script>

</body>

</html>

    you need to configure axisLine property as shown.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search