如何使用Plotly Javascript在Vue.js 2中实现平滑曲率的环形进度图

实现思路 #

• 放弃饼图挖空的实现方案，该方案天生不支持圆角端点，曲率生硬
• 改用Plotly*散点极坐标（scatterpolar）*类型绘制环形：
  • 绘制两条极坐标路径，底层是浅灰色完整环形作为背景，上层是彩色进度路径
  • 将line.shape设为spline启用平滑曲线，line.width控制环形厚度，line.cap设为round实现圆角端点
  • 进度值按比例映射为极坐标角度（完整环对应0_{360°，例：60%进度对应0}216°）
• 中心进度文本通过annotations配置项直接渲染，无需额外DOM元素

Vue 2 实现代码 #

首先安装依赖：
npm install vue-plotly plotly.js-dist

组件示例代码：

<template>
  <div>
    <plotly :data="chartData" :layout="chartLayout" :config="chartConfig" style="width: 300px; height: 300px" />
  </div>
</template>

<script>
import Plotly from 'vue-plotly'

export default {
  components: { Plotly },
  data() {
    return {
      // 进度值，可动态修改
      progress: 75,
      chartConfig: {
        displayModeBar: false,
        responsive: true
      }
    }
  },
  computed: {
    chartData() {
      const progressAngle = (this.progress / 100) * 360
      return [
        // 背景环
        {
          type: 'scatterpolar',
          r: [1, 1],
          theta: [0, 360],
          mode: 'lines',
          line: {
            color: '#e0e0e0',
            width: 20,
            shape: 'spline'
          },
          hoverinfo: 'skip',
          showlegend: false
        },
        // 进度环
        {
          type: 'scatterpolar',
          r: [1, 1],
          theta: [0, progressAngle],
          mode: 'lines',
          line: {
            color: '#4caf50',
            width: 20,
            shape: 'spline',
            cap: 'round'
          },
          hoverinfo: 'skip',
          showlegend: false
        }
      ]
    },
    chartLayout() {
      return {
        polar: {
          radialaxis: {
            visible: false,
            range: [0, 1.1]
          },
          angularaxis: {
            visible: false,
            direction: 'clockwise',
            startangle: 90
          }
        },
        showlegend: false,
        margin: { t: 0, r: 0, b: 0, l: 0 },
        annotations: [
          {
            text: `${this.progress}%`,
            x: 0.5,
            y: 0.5,
            xref: 'paper',
            yref: 'paper',
            showarrow: false,
            font: {
              size: 36,
              color: '#333'
            }
          }
        ]
      }
    }
  }
}
</script>

关键参数说明 #

• polar.angularaxis.startangle: 90 让进度条从顶部开始绘制，符合常规进度图展示习惯
• line.cap: 'round' 是实现圆角端点的核心配置，搭配spline曲线可完全匹配平滑圆角的效果需求
• 调整line.width和radialaxis.range可以灵活修改环形厚度和整体尺寸

内容的提问来源于stack exchange，提问作者Luis G. Luna B.