作为Web开发人员，在做项目的时候，项目都有一些报表的需求。今天给大家推荐一个图表库，兼容IOS、Android、各个平台小程序等。

项目简介

这是一个一款基于canvas API开发的适用于所有前端应用的图表库。报表种类齐全、功能强大，集成简单。兼容uni-app、taro 、各个小程序原生平台，可根据项目需求选型。

技术架构

1、技术：canvas API、JavaScript、Css。

2、兼容平台：uni-app、taro 、微信小程序、支付宝小程序、京东小程序、字节小程序、快手小程序、百度小程序等平台。

项目结构

**报表类型

**

1、柱状图：基本柱状图、堆叠柱状图、圆角+渐变+半透明柱状图、温度计图表、圆角温度计图表、柱状图滚动条、全圆角柱状图+标记线

2、山峰图：圆角山峰图、尖角山峰图、三角山峰图、直角山峰图、山峰图无边渐变色、山峰图有边透明渐变+滚动条、山峰图有边渐变+标记线、山峰图圆角渐变色柱状图

3、条状图：堆叠条状图、圆角条状图+渐变色

4、折线图：基本折线图、基本曲线图、基本时序图、折线图+断点续连connectNulls、折线图滚动条、时间轴折线图

5、区域图：基本折线区域图、渐变色曲线区域图、渐变色时序区域图、时间轴(矢量轴)区域图

6、散点图：散点图

7、气泡图：气泡图

8、混合图：多坐标系混合图

9、饼状图：基本饼状图、带分割线+渐变色、自定义标签内容、自定义标签隐藏

10、环形图：基本环形图、分割线+渐变色、自定义标签内容、自定义标签隐藏

11、玫瑰图：面积玫瑰图、半径玫瑰图+分割线+渐变色、自定义标签内容、自定义标签隐藏

12、雷达图：多边形雷达图、圆形雷达图、刻度标签+网格抽稀、渐变色雷达图、

13、进度条：圆弧进度条+渐变色、多重整圆进度条、逆时针+圆弧进度条、逆时针+多重整圆进度条、圆角整圆进度条、平角整圆进度条

14、仪表盘：基本仪表盘、其他仪表盘

15、漏斗图：标准漏斗图、渐变色+自定义标签、倒三角形漏斗图、金字塔形漏斗图

16、词云图：词云图

17、K线图：K线图+双指缩放

18、地图：地图

19、交互演示：交互数据应用示例、交互数据、TooltipFormat格式化示例、tooltipCustom自定义示例

使用方式

1、原生方式

HTML部分

<template>
  <view>
    <canvas canvas-id="myid" id="myid" class="charts" @tap="tap"/>
  </view></template>

JS部分

<script>
  import uCharts from '../u-charts.js';
  var uChartsInstance = { };
  export default {
    data() {    
      return {
        cWidth: 750,      
        cHeight: 500
    };
  },
  onReady() {    //这里的 750 对应 css .charts 的 width
    this.cWidth = uni.upx2px(750);    //这里的 500 对应 css .charts 的 height
  this.cHeight = uni.upx2px(500);    this.getServerData();
  },  methods: {
    getServerData() {      //模拟从服务器获取数据时的延时
    setTimeout(() => {
      let res = {
        categories: ["2016", "2017", "2018", "2019", "2020", "2021"], series: [
          {
            name: "目标值", data: [35, 36, 31, 33, 13, 34]
          },
          {
            name: "完成量", data: [18, 27, 21, 24, 6, 28]
          }
        ]
      }; this.drawCharts('myid', res);
    }, 500);
    },
  drawCharts(id,data){      const ctx = uni.createCanvasContext(id, this);
  uChartsInstance[id] = new uCharts({type: "column",        context: ctx,        width: this.cWidth,        height: this.cHeight,        categories: data.categories,        series: data.series,        xAxis: {disableGrid: true
        },        yAxis: {data: [ {min: 0 } ]
        },        extra: {column: {type: "group"
          }
        }
      });
    },
  tap(e){
    uChartsInstance[e.target.id].touchLegend(e);
  uChartsInstance[e.target.id].showToolTip(e);
    }
  }
};
</script>

CSS部分

<style scoped>
  .charts{    width: 750rpx;    height: 500rpx;
  }
</style>

2、组件方式

HTML部分

<template>
  <view class="charts-box">
    <qiun-data-charts type="column" :chartData="chartData" />
  </view>
  </template>

JS部分

<script>  export default {    data() {          return {chartData: { },    };  },  onReady() {this.getServerData();  },  methods: {    getServerData() {      //模拟从服务器获取数据时的延时    setTimeout(() => {      let res = {        categories: ["2016", "2017", "2018", "2019", "2020", "2021"], series: [          {            name: "目标值", data: [35, 36, 31, 33, 13, 34]          },          {            name: "完成量", data: [18, 27, 21, 24, 6, 28]          }        ]      }; this.chartData = JSON.parse(JSON.stringify(res));    }, 500);    },  }};</script>

CSS部分

<style scoped>
  .charts-box {    width: 100%;    height: 300px;

  }
</style>

报表效果截图

柱状图

山峰图

条状图

折线图

区域图

散点图

气泡图

混合图

饼状图

环形图

玫瑰图

项目地址： https://gitee.com/uCharts/uCharts

- End -

专注分享编程知识、热门有用有趣的开源项目