uCharts_基于canvas API开发的适用于所有前端应用的图表库

Web前端开发网

fly63.com

首页资源工具文章教程栏目

uCharts

网站地址:https://www.ucharts.cn/

网站描述:基于canvas API开发的适用于所有前端应用的图表库

访问官网

uCharts是一款基于canvas api开发的适用于所有前端应用的图表库，开发者编写一套代码，可运行到 Web、iOS、Android（基于 uni-app / taro ）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等更多支持 canvas API 的平台。

原生方式

原生 uCharts 您只需获取 u-charts.js 或 u-charts.min.js 单个文件即可开始使用，您可通过以下方式获得 uCharts：

通过码云 uCharts 项目开源地址获取 u-charts.js，根据您项目运行的平台，选择引用对应目录的 u-charts.js。
通过 npm 命令npm i @qiun/ucharts安装，成功后即可使用 import 或 require 进行引用。
通过 uCharts 官网定制功能，定制您的专属 uCharts，体积更小、速度更快！

下载 u-charts.js 后，将其复制到您项目指定目录，在页面中引用这个 js 即可开始使用，本文以 uni-app 平台为演示如何使用 uCharts。

<canvas canvas-id="myid" id="myid" class="charts" @tap="tap"/>
 <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>
 <style scoped>
   .charts{
     width: 750rpx;
     height: 500rpx;
   }
 </style>

组件方式

相比原生 uCharts 我们更推荐使用组件方式来绘制图表，组件方式使您只需专注数据与业务，大大提高了页面的可读性以及避开了一些平台容易出问题的地方，您可通过以下方式获得 uCharts 组件：

uni-app组件

uni_modules 版本：通过 uni-app 插件市场 uCharts 发布页面点击使用 HBuilderX 导入插件按钮导入到您的项目中，点击进入。
非 uni_modules 版本：因 uni-app 插件市场无法更新该版本，最新版本在码云发布，点击进入。
非 uniCloud 版本：与以上两个版本的区别在于该版本没有使用 uniCloud，不支持 uni-app 的 datacome 属性，但仍支持 localdata 数据格式，点击进入。