一、開源項目簡介

uCharts是一款基于canvas API開發的適用于所有前端應用的圖表庫，開發者編寫一套代碼，可運行到 Web、iOS、Android（基于 uni-app / taro ）、以及各種小程序（微信/支付寶/FinClip/百度/頭條/飛書/QQ/快手/釘釘/淘寶）、快應用等更多支持 canvas API 的平臺。

二、開源協議

使用Apache-2.0開源協議

三、界面展示

四、功能概述

高性能跨平臺圖表庫，支持H5、APP、小程序（微信小程序、支付寶小程序、釘釘小程序、百度小程序、頭條小程序、QQ小程序、快手小程序、360小程序）、Vue、Taro等更多支持canvas的框架平臺，支持餅圖、圓環圖、線圖、柱狀圖、山峰圖、區域圖、雷達圖、圓弧進度圖、儀表盤、K線圖、條狀圖、混合圖、玫瑰圖、漏斗圖、詞云圖、時序圖、散點圖、氣泡圖、地圖等常見圖表。

五、技術選型

組件方式

引用組件

相比原生 uCharts 我們更推薦使用組件方式來繪制圖表，組件方式使您只需專注數據與業務，大大提高了頁面的可讀性以及避開了一些平臺容易出問題的地方，您可通過以下方式獲得 uCharts 組件：

uni-app組件

• uni_modules 版本：通過 uni-app 插件市場 uCharts 發布頁面點擊使用 HBuilderX 導入插件按鈕導入到您的項目中。

• 非 uni_modules 版本：因 uni-app 插件市場無法更新該版本。

• 非 uniCloud 版本：與以上兩個版本的區別在于該版本沒有使用 uniCloud，不支持 uni-app 的 datacome 屬性，但仍支持 localdata 數據格式。

原生小程序組件

• 通過碼云開源地址獲取原生小程序組件。

• 通過 npm 安裝原生小程序組件依賴。

以 uni-app 平臺為演示如何使用 uCharts 組件，其他各個平臺的組件用法以在線演示或組件文檔的代碼查看為準：

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>

來源：uCharts 官網文檔