如何调整进度条（仪表echarts）的背景颜色？

Question

我想删除/更改下面所示区域的背景颜色（透明）：

代码示例：

<!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>

我尝试将

itemStyle: {backgroundColor: 'transparent'}

设置在

progress: {...}

内，但不起作用。如何在仪表echarts中调整它？

我更改了背景颜色以强调图表的图像并指出我要更改的位置。

Answer 1

从文档（https://echarts.apache.org/en/option.html#xAxis.axisLine.lineStyle.opacity）中，这将使用

axisLine.lineStyle

选项进行配置：

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
  }]
};

如果您愿意，您还可以选择调整宽度，您可以从链接的文档中查看其他选项。

如何调整进度条（仪表echarts）的背景颜色？

问题描述投票：0回答：1

1个回答

最新问题

如何调整进度条（仪表echarts）的背景颜色？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1