如何使用 Apache eCharts 创建单个进度线？答案

【问题标题】：How to create a single progress line using Apache eCharts?如何使用 Apache eCharts 创建单个进度线？
【发布时间】：2022-11-01 12:45:09
【问题描述】：

如何使用 Apache eCharts 创建单个进度线？

这是一个图像示例：

蓝线应根据其值而变化，例如：

当值为 0 时，应该没有蓝线，只有灰色。
当值为 50 时，蓝色应填充一半线条，灰色填充另一半。
当值为 100 时，它应该是全蓝色的。

蓝色也应该在加载时动画。

虽然示例图像没有显示这一点，但线条也应该有圆形端盖。

这种简单类型的进度线在 Apache eCharts 中是否可行？

【问题讨论】：

标签： echarts

【解决方案1】：

给你：（my echarts sandbox）

var myChart = echarts.init(document.getElementById('main'));

var progressLineLength = 500;
var maxValue = 100;
var value = 70;

option = {
  graphic: {
    elements: [
      {
        type: 'group',
        left: 'center',
        top: 'center',
        children: [
          {
            type: 'rect',
            shape: {
              x:0,
              y:0,
              width: progressLineLength,
              height:10,
            },
            style: {
              fill: '#E5E5E5'
            }
          },
          {
            type: 'rect',
            shape: {
              x:0,
              y:0,
              width: progressLineLength*value/maxValue,
              height:10,
            },
            style: {
              fill: '#3874CB'
            },
            keyframeAnimation: {
              duration: 1000,
              loop: false,
              keyframes: [
              {
                percent: 0,
                scaleX: 0,
              },
              {
                percent: 1,
                scaleX: 1,
              } 
              ]
            }
          }
        ]
      }
    ]
  }
};

myChart.setOption(option)

<html>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
    <div id="main" style="width: 600px; height:200px;"></div>
  </body>
</html>

【讨论】：