一、開(kāi)源項(xiàng)目簡(jiǎn)介

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

二、開(kāi)源協(xié)議

使用Apache-2.0開(kāi)源協(xié)議

三、界面展示

四、功能概述

高性能跨平臺(tái)圖表庫(kù)，支持H5、APP、小程序（微信小程序、支付寶小程序、釘釘小程序、百度小程序、頭條小程序、QQ小程序、快手小程序、360小程序）、Vue、Taro等更多支持canvas的框架平臺(tái)，支持餅圖、圓環(huán)圖、線(xiàn)圖、柱狀圖、山峰圖、區(qū)域圖、雷達(dá)圖、圓弧進(jìn)度圖、儀表盤(pán)、K線(xiàn)圖、條狀圖、混合圖、玫瑰圖、漏斗圖、詞云圖、時(shí)序圖、散點(diǎn)圖、氣泡圖、地圖等常見(jiàn)圖表。

五、技術(shù)選型

組件方式

引用組件

相比原生 uCharts 我們更推薦使用組件方式來(lái)繪制圖表，組件方式使您只需專(zhuān)注數(shù)據(jù)與業(yè)務(wù)，大大提高了頁(yè)面的可讀性以及避開(kāi)了一些平臺(tái)容易出問(wèn)題的地方，您可通過(guò)以下方式獲得 uCharts 組件：

uni-app組件

• uni_modules 版本：通過(guò) uni-app 插件市場(chǎng) uCharts 發(fā)布頁(yè)面點(diǎn)擊使用 HBuilderX 導(dǎo)入插件按鈕導(dǎo)入到您的項(xiàng)目中。

• 非 uni_modules 版本：因 uni-app 插件市場(chǎng)無(wú)法更新該版本。

• 非 uniCloud 版本：與以上兩個(gè)版本的區(qū)別在于該版本沒(méi)有使用 uniCloud，不支持 uni-app 的 datacome 屬性，但仍支持 localdata 數(shù)據(jù)格式。

原生小程序組件

• 通過(guò)碼云開(kāi)源地址獲取原生小程序組件。

• 通過(guò) npm 安裝原生小程序組件依賴(lài)。

以 uni-app 平臺(tái)為演示如何使用 uCharts 組件，其他各個(gè)平臺(tái)的組件用法以在線(xiàn)演示或組件文檔的代碼查看為準(zhǔn)：

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() {      //模擬從服務(wù)器獲取數(shù)據(jù)時(shí)的延時(shí)      setTimeout(() => {        let res = {            categories: ["2016","2017","2018","2019","2020","2021"],            series: [              {                name: "目標(biāo)值",                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>

來(lái)源：uCharts 官網(wǎng)文檔