uCharts，高性能跨平臺圖表庫，支持 H5 圖表、APP 圖表、小程序圖表（微信小程序、支付寶小程序、百度小程序、頭條小程序），支持餅圖、圓環(huán)圖、線圖、柱狀圖、區(qū)域圖、雷達(dá)圖、圓弧進(jìn)度圖、儀表盤、K 線圖、條狀圖、混合圖、玫瑰圖、漏斗圖、詞云圖。

支持H5、小程序（微信/支付寶/百度/頭條/QQ/360）、APP，調(diào)用簡單方便、性能及體驗(yàn)極佳。
雖然沒有Echarts及F2圖表功能強(qiáng)大，但可以實(shí)現(xiàn)一套業(yè)務(wù)邏輯各端通用，并解決了支付寶小程序圖表顯示模糊等問題。
支持單頁面多圖表，demo中單頁10個(gè)圖表，響應(yīng)速度超快。
支持入場動(dòng)畫及ToolTip動(dòng)畫效果。
獨(dú)特支持橫屏模式感謝masterLi提供需求。

相比Echarts及F2的復(fù)雜的設(shè)置，本插件幾乎等于傻瓜式的配置。
Echarts在跨端使用更復(fù)雜，本插件只需要簡單的兩個(gè)<canvas>標(biāo)簽輕松區(qū)別搞定，代碼整潔易維護(hù)。
Echarts在IOS端圖表顯示錯(cuò)位，只能引用網(wǎng)頁解決。
本插件打包后的體積相比Echarts小很多很多，所以性能更好。
如果您是uni-app初學(xué)者，那么強(qiáng)烈建議您使用uCharts，并且目前可以跨全端通用，減少工作量，增強(qiáng)一致性體驗(yàn)。
圖表樣式均可自定義，懂js的都可以讀懂插件源碼，直接修改u-charts.js源碼即可。
本插件經(jīng)過大量測試，反復(fù)論證并加以改造而成，請各位放心使用。

您會(huì)發(fā)現(xiàn)這個(gè)圖表即使在echarts里也不是很好實(shí)現(xiàn)，那么就需要我們自己動(dòng)手去實(shí)現(xiàn)。下面就讓我們一起來完成，本文旨在拋磚引玉，希望各位朋友能夠更好的應(yīng)用uCharts來完成您的項(xiàng)目，如果您有更好的設(shè)計(jì)，請?zhí)峤荒腜R到碼云giteeuCharts跨端圖表，幫助更多朋友，感謝您的付出及貢獻(xiàn)！

各位遇到問題請先參考以下問題，如果仍不能解決，請留言。

如果用在您的項(xiàng)目上圖表不顯示，請先運(yùn)行demo頁面，如果demo頁面也無法顯示，請查看全局樣式是否定義了canvas的樣式，如有請取消。
圖表背景顏色問題，很多朋友設(shè)置圖表背景顏色時(shí)候，只修改了view和canvas的css,忘記了修改實(shí)例化參數(shù)中的background:'#FFFFFF'，導(dǎo)致圖表畫板右側(cè)有一道白條（這個(gè)是圖表配置中的右邊距），所以特修改了demo中的柱狀圖的背景顏色供大家參考。
如果遇到圖表與預(yù)期尺寸不符合，請檢查canvas標(biāo)簽上的css與cWidth、cHeihgt設(shè)置的值是否相符，css請用upx為單位，cWidth、cHeihgt的單位為px，請參考demo用uni.upx2px()方法轉(zhuǎn)換。
如遇到開啟拖拽，而實(shí)際無法拖拽的情況，請先檢查canvas標(biāo)簽是否綁定的touch事件。
如果涉及到v-if切換顯示圖表組件，第二次可能會(huì)變空白，建議用v-show替代v-if切換顯示圖表組件。

在高分屏模式下，如果發(fā)現(xiàn)圖表已顯示，但位置不正確，請檢查上級view容器的樣式，為了解決高分屏canvas模糊問題，使用了css的transform，所以請修改上級樣式使canvas容器縮放至相應(yīng)位置。
如果將canvas放在多級<view>組件下，遇到ToolTip不顯示或點(diǎn)擊區(qū)域不正確，請?jiān)?code>touch事件中增加以下代碼解決。

//#ifdef MP-ALIPAY
e.mp.currentTarget.offsetTop+=uni.upx2px(510);
//#endif

uni.upx2px(510);是canvas組件的上級<view>組件的高度

`支付寶小程序IDE中不顯示，但運(yùn)行到真機(jī)是可以顯示的，請真機(jī)測試。`

一套代碼編到 7 個(gè)平臺，依次掃描二維碼，親自體驗(yàn) uCharts 圖表跨平臺效果！IOS 因 demo 比較簡單無法上架，請自行編譯。

uCharts高性能跨平臺圖表