uCharts高性能跨平臺圖表庫，支持H5圖表、APP圖表、小程序圖表（微信小程序、支付寶小程序、百度小程序、頭條小程序、QQ小程序、360小程序），支持餅圖、圓環圖、線圖、柱狀圖、區域圖、雷達圖、圓弧進度圖、儀表盤、K線圖、條狀圖、混合圖、玫瑰圖、漏斗圖、詞雲圖、地圖。
一套代碼編到7個平臺
在uni-app裡面會使用到統計圖，和echarts類似，因為經常有用到uni-app開發一些app和小程序相關的項目，也經常用到圖表相關的插件，推薦ucharts給大家，個人感覺還是不錯的，種類多也比較完善，
支持圖表類型
- 餅圖 pie
- 圓環圖 ring
- 線圖 line（直線、曲線）
- 柱狀圖 column（分組、堆疊、溫度計）
- 區域圖 area（直線、曲線）
- 雷達圖 radar
- 圓弧進度圖 arcbar
- 儀表盤 gauge
- K線圖 candle
- 混合圖 mix（支持 Point、Line 直線曲線、Column、Area 直線曲線）
- 玫瑰圖 rose（面積模式、半徑模式）
- 詞雲圖 word（橫向、橫縱混排）
- 漏斗圖 funnel
- 地圖 map
插件特點
- 改造後的插件可以跨端使用，支持 H5、小程序（微信/支付寶/百度/頭條/QQ/360）、APP，調用簡單方便、性能及體驗極佳。
- 雖然沒有 Echarts 及 F2 圖表功能強大，但可以實現一套業務邏輯各端通用，並解決了支付寶小程序圖表顯示模糊等問題。
- 支持單頁面多圖表，demo 中單頁 10 個圖表，響應速度超快。
- 支持入場動畫及 ToolTip 動畫效果。
- 獨特支持 橫屏模式。
為何不用 Echarts？
- 相比 Echarts 及 F2 的複雜的設置，本插件幾乎等於傻瓜式的配置。
- Echarts 在跨端使用更復雜，本插件只需要簡單的兩個 標籤輕鬆區別搞定，代碼整潔易維護。
- Echarts 在 iOS 端圖表顯示錯位，只能引用網頁解決。
- 本插件打包後的體積相比 Echarts 小很多很多，所以性能更好。
- 如果您是 uni-app 初學者，那麼強烈建議您使用 uCharts，並且目前可以跨全端通用，減少工作量，增強一致性體驗。
- 圖表樣式均可自定義，懂 JS 的都可以讀懂插件源碼，直接修改 u-charts.js 源碼即可。
- 本插件經過大量測試，反覆論證並加以改造而成，請各位放心使用。
快速上手
使用方法
代碼示例：
<code><
template
><
view
class
="qiun-columns"
><
view
class
="qiun-bg-white qiun-title-bar qiun-common-mt"
><
view
class
="qiun-title-dot-light"
>柱狀圖view
>view
><
view
class
="qiun-charts"
><
canvas
canvas-id
="canvasColumn"
id
="canvasColumn"
class
="charts"
:style
="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"
>canvas
><
canvas
canvas-id
="canvasColumn"
id
="canvasColumn"
class
="charts"
>canvas
>view
>view
>template
><
script
>
import
uChartsfrom
'../../components/u-charts/u-charts.js'
;var
_self;var
canvaColumn=null
;export
default
{ data() {return
{cWidth
:''
,cHeight
:''
,pixelRatio
:1
,serverData
:''
} }, onLoad() { _self =this
; uni.getSystemInfo({success
:function
(res
) {if
(res.pixelRatio>1
){ _self.pixelRatio =2
; } } });this
.cWidth=uni.upx2px(750
);this
.cHeight=uni.upx2px(500
);this
.getServerData(); },methods
: { getServerData(){ uni.request({url
:'https://www.easy-mock.com/mock/5cc586b64fc5576cba3d647b/uni-wx-charts/chartsdata2'
,data
:{ },success
:function
(res
) {console
.log(res.data.data) _self.serverData=res.data.data;let
Column={categories
:[],series
:[]}; Column.categories=res.data.data.Column.categories; Column.series=res.data.data.Column.series; _self.showColumn("canvasColumn"
,Column); },fail
:()
=> {console
.log("網絡錯誤，小程序端請檢查合法域名"
); }, }); }, showColumn(canvasId,chartData){ canvaColumn=new
uCharts({$this
:_self,canvasId
: canvasId,type
:'column'
,legend
:true
,fontSize
:11
,background
:'#FFFFFF'
,pixelRatio
:_self.pixelRatio,animation
:true
,categories
: chartData.categories,series
: chartData.series,xAxis
: {disableGrid
:true
, },yAxis
: { },dataLabel
:true
,width
: _self.cWidth*_self.pixelRatio,height
: _self.cHeight*_self.pixelRatio,extra
: {column
: {width
: _self.cWidth*_self.pixelRatio*0.45
/chartData.categories.length } } }); }, changeData(){ canvaColumn.updateData({series
: _self.serverData.ColumnB.series,categories
: _self.serverData.ColumnB.categories }); } } }script
><
style
>
page
{background
:#F2F2F2
;width
:750
upx;overflow-x
: hidden;}.qiun-padding
{padding
:2%
;width
:96%
;}.qiun-wrap
{display
:flex;flex-wrap
:wrap;}.qiun-rows
{display
:flex;flex-direction
:row ;}.qiun-columns
{display
:flex;flex-direction
:column ;}.qiun-common-mt
{margin-top
:10
upx;}.qiun-bg-white
{background
:#FFFFFF
;}.qiun-title-bar
{width
:96%
;padding
:10
upx2%
;flex-wrap
:nowrap;}.qiun-title-dot-light
{border-left
:10
upx solid#0ea391
;padding-left
:10
upx;font-size
:32
upx;color
:#000000
}.qiun-charts
{width
:750
upx;height
:500
upx;background-color
:#FFFFFF
;}.charts
{width
:750
upx;height
:500
upx;background-color
:#FFFFFF
;}style
>/<code>
本人在uni-app小程序寫的圖表：
線圖統計圖表
總結
uCharts在小程序端使用起來真的很方便的，幾乎能滿足我們所有的圖表要求，確實比echarts好用的多，大家怎麼看呢？
