uni-app插入ucharts(echarts)圖表,支持H5，APP，小程序

這是uni-app里通用的圖表方法，從ucharts官網上整理的
鏈接: https://pan.baidu.com/s/1vMkVr2A_ycZ95Slj6_-xCg 提取碼: 2e61 復制這段內容后打開百度網盤手機App，操作更方便哦
壓縮包打開后這是個主要的文件夾放在根目錄上

然后直接在需要的vue文件里引入（下面代碼是個樣例，根據自己情況而定）

<qiun-data-charts type="column" :chartData="chartsDataColumn1" />

type屬性就是你要用的圖表樣式，chartData就是要綁定的圖表配置，具體使用去https://www.ucharts.cn/ ucharts官網的在線工具配置，配置好了直接粘貼過來

注意不要忘了給他一個畫布大小

劃重點：如果渲染不出來就把HBuilder軟件關了，重新啟動運行一下

做完這些，基本是沒問題的，下面再詳細說一下圖表配置問題：

標準數據格式1：（折線圖、柱狀圖、區域圖等需要categories的直角坐標系圖表類型）

chartData:{categories: ["2016", "2017", "2018", "2019", "2020", "2021"],series: [{name: "目標值",data: [35, 36, 31, 33, 13, 34]}, {name: "完成量",data: [18, 27, 21, 24, 6, 28]}] }

標準數據格式2：（餅圖、圓環圖、漏斗圖等不需要categories的圖表類型）

chartData:{series: [{name: "groupA",data: [{name: "一班",value: 50}, {name: "二班",value: 30}, {name: "三班",value: 20}, {name: "四班",value: 18}, {name: "五班",value: 8}]}] }

注：其他特殊圖表類型，請參考mockdata文件夾下的數據格式（從官網查看）
https://gitee.com/uCharts/uCharts
上壓縮包鏈接（ucharts教程官網打不開，可從這下載）
鏈接: https://pan.baidu.com/s/123NMCEQ_l0BEOfnIOqVoHQ 提取碼: xwv2 復制這段內容后打開百度網盤手機App，操作更方便哦

下面這個截圖就是官網教程整個示例文件的內容
其他基本圖表可以參考ucharts.vue文件里的內容

uni-app中插入圖表的基本操作就這樣，其他操作還是建議去官網閱讀
https://gitee.com/uCharts/uCharts#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95

總結

以上是生活随笔為你收集整理的uni-app插入ucharts(echarts)图表,支持H5，APP，小程序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。