uniapp 渐变环状图如何实现

“在uniapp中想实现一个渐变的环状图效果，类似于数据可视化的百分比展示。查了echarts和uCharts的文档没找到直接可用的方案。请问有没有现成的组件或实现思路？最好能支持自定义渐变色和动画效果，如果能有代码示例就更好了！”

2 回复

使用 ECharts 或 uCharts 插件实现。步骤如下：

  1. 安装 ECharts 或 uCharts 插件。
  2. 引入并配置图表，设置 type 为 ‘pie’。
  3. 在 series 中配置 itemStyle，使用线性渐变（linearGradient）或径向渐变（radialGradient）。
  4. 调整颜色和角度，实现环状渐变效果。

示例代码片段：

itemStyle: {
  color: {
    type: 'linear',
    x: 0, y: 0, x2: 0, y2: 1,
    colorStops: [{
      offset: 0, color: 'red'
    }, {
      offset: 1, color: 'blue'
    }]
  }
}

在 UniApp 中实现渐变环状图，推荐使用 ECharts 组件，因为它支持丰富的图表类型和自定义渐变效果。以下是实现步骤和示例代码：

步骤 1：安装 ECharts 插件

  1. 在 UniApp 项目中，通过 npm 安装 ECharts：
    npm install echarts
  2. 引入 ECharts 并创建自定义组件（或直接使用 uni-ec-canvas 组件）。

步骤 2：使用 uni-ec-canvas 组件

在页面中引入 uni-ec-canvas 组件（需从插件市场下载或自定义）：

<template>
  <view>
    <uni-ec-canvas ref="canvas" canvas-id="ring-chart" :ec="ec"></uni-ec-canvas>
  </view>
</template>

步骤 3：配置渐变环状图选项

在 script 部分定义 ECharts 配置：

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      ec: {
        onInit: (canvas, width, height) => {
          const chart = echarts.init(canvas, null, {
            width: width,
            height: height
          });
          canvas.setChart(chart);

          // 渐变环状图配置
          const option = {
            series: [{
              type: 'pie',
              radius: ['40%', '70%'], // 内环和外环半径
              itemStyle: {
                borderRadius: 5, // 圆角
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false // 隐藏标签
              },
              data: [
                {
                  value: 70,
                  name: '完成度',
                  itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: '#FF9A8B' }, // 渐变起始色
                      { offset: 1, color: '#FF6B9D' }  // 渐变结束色
                    ])
                  }
                },
                {
                  value: 30,
                  name: '剩余',
                  itemStyle: {
                    color: '#f0f0f0' // 背景环颜色
                  }
                }
              ]
            }]
          };
          chart.setOption(option);
          return chart;
        }
      }
    };
  }
};
</script>

说明：

  • radius: 控制环的粗细，例如 ['40%', '70%'] 表示内环半径为 40%，外环为 70%。
  • 渐变颜色: 使用 echarts.graphic.LinearGradient 定义线性渐变，调整 offset 和颜色值自定义效果。
  • 数据: data 数组中第一个对象是主要环（如完成度），第二个是背景环。

注意事项：

  • 确保 uni-ec-canvas 组件正确引入（可能需要调整路径或依赖）。
  • 渐变颜色和半径可根据需求调整。
  • 如果遇到渲染问题，检查 canvas 尺寸或 echarts 版本兼容性。

通过以上步骤，即可在 UniApp 中实现一个简单的渐变环状图。如果需要交互或动画，可在 option 中添加相应配置。

回到顶部