更新记录

1.0.0（2026-07-13）

首次发布

• 支持 5 种图表类型（折线图、柱状图、饼图、环形图、雷达图）
• Canvas 高性能渲染
• 流畅动画效果
• 支持明暗主题
• 完整的 TypeScript 类型定义
• 跨平台兼容（H5、微信小程序、支付宝小程序、App）
• 丰富的配置选项
• 简洁易用的 API

平台兼容性

chart-kit

专业的 uniapp 图表组件库，支持折线图、柱状图、饼图等多种图表类型。

✨ 特性

• 📊 5种图表类型 - 折线图、柱状图、饼图、环形图、雷达图
• 🎨 主题支持 - 内置明暗主题，支持自定义
• 🚀 高性能 - Canvas 渲染，流畅动画
• 📱 跨平台 - H5、微信小程序、支付宝小程序、App
• 💪 TypeScript - 完整的类型定义
• 🎯 易用性 - 简洁的 API，丰富的配置

📦 安装

npm install chart-kit

🚀 快速开始

1. 引入组件

<template>
  <view class="container">
    <canvas canvas-id="myChart" id="myChart" style="width: 375px; height: 300px;"></canvas>
  </view>
</template>

<script>
import ChartKit from 'chart-kit';

export default {
  onReady() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = new ChartKit('myChart', {
        type: 'line',
        width: 375,
        height: 300,
        data: {
          labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
          datasets: [{
            label: '销售额',
            data: [30, 50, 45, 60, 70, 65],
            color: '#5470c6'
          }]
        },
        title: {
          text: '月度销售趋势'
        }
      });

      chart.render();
    }
  }
};
</script>

2. 基础示例

折线图

const lineChart = new ChartKit('canvas-id', {
  type: 'line',
  width: 375,
  height: 300,
  data: {
    labels: ['周一', '周二', '周三', '周四', '周五'],
    datasets: [{
      label: '访问量',
      data: [120, 200, 150, 180, 220],
      color: '#5470c6'
    }]
  }
});

lineChart.render();

柱状图

const barChart = new ChartKit('canvas-id', {
  type: 'bar',
  width: 375,
  height: 300,
  data: {
    labels: ['产品A', '产品B', '产品C', '产品D'],
    datasets: [{
      label: '销量',
      data: [65, 59, 80, 45],
      color: '#91cc75'
    }]
  }
});

barChart.render();

饼图

const pieChart = new ChartKit('canvas-id', {
  type: 'pie',
  width: 375,
  height: 300,
  data: {
    labels: ['苹果', '香蕉', '橙子', '葡萄'],
    datasets: [{
      data: [30, 25, 20, 25]
    }]
  },
  colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666']
});

pieChart.render();

雷达图

const radarChart = new ChartKit('canvas-id', {
  type: 'radar',
  width: 375,
  height: 300,
  data: {
    labels: ['速度', '力量', '防御', '魔法', '敏捷'],
    datasets: [{
      label: '角色A',
      data: [80, 70, 60, 90, 75],
      color: '#5470c6'
    }]
  }
});

radarChart.render();

📖 API 文档

ChartOptions

ChartData

interface ChartData {
  labels: string[];        // 标签数组
  datasets: ChartDataset[]; // 数据集数组
}

interface ChartDataset {
  label?: string;          // 数据集名称
  data: number[];          // 数据数组
  color?: string;          // 颜色
  backgroundColor?: string; // 背景色
  borderColor?: string;    // 边框色
  borderWidth?: number;    // 边框宽度
}

方法

🎨 主题定制

const chart = new ChartKit('canvas-id', {
  type: 'line',
  theme: 'dark', // 使用暗色主题
  colors: ['#ff6b6b', '#4ecdc4', '#45b7d1'], // 自定义颜色
  // ...其他配置
});

🌟 高级用法

多数据集

const chart = new ChartKit('canvas-id', {
  type: 'line',
  width: 375,
  height: 300,
  data: {
    labels: ['1月', '2月', '3月', '4月', '5月'],
    datasets: [
      {
        label: '产品A',
        data: [30, 40, 35, 50, 45],
        color: '#5470c6'
      },
      {
        label: '产品B',
        data: [20, 30, 28, 40, 38],
        color: '#91cc75'
      }
    ]
  },
  legend: {
    show: true,
    position: 'bottom'
  }
});

chart.render();

自定义样式

const chart = new ChartKit('canvas-id', {
  type: 'bar',
  width: 375,
  height: 300,
  padding: {
    top: 60,
    right: 40,
    bottom: 60,
    left: 60
  },
  title: {
    text: '销售统计',
    fontSize: 18,
    color: '#333',
    align: 'left'
  },
  // ...其他配置
});

📱 平台兼容性

⚠️ 注意事项

1. Canvas ID 必须唯一
2. 确保在 onReady 生命周期中初始化图表
3. 数据更新后需要重新调用 render() 方法
4. 组件销毁时建议调用 destroy() 方法释放资源

💰 定价

• 首发价：¥199
• 原价：¥299
• 包含完整源码和技术支持

📞 技术支持

如有问题，请联系技术支持。

📄 许可证

MIT License