> 有時候App里要求以圖表方式展示數據，比如柱狀圖、餅狀圖等，這個時候就需要用到uCharts > 展示效果 >  [TOC] ## 導入u-charts插件 > 插件地址：https://ext.dcloud.net.cn/plugin?id=271 > 將插件導入到 /components目錄下即可，至于引入，在頁面前端調用時import引入 ## 服務端返回的json > 接口測試地址：https://www.ucharts.cn/data.json  ## 頁面中進行使用 ~~~ <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" @touchstart="touchColumn"></canvas> </view> </view> </template> <script> import uCharts from '@/components/u-charts/u-charts.js'; var _self; var canvaColumn = null; export default { data() { return { cWidth: '', cHeight: '', pixelRatio: 1 } }, onLoad() { _self = this; this.cWidth = uni.upx2px(750); this.cHeight = uni.upx2px(500); this.getServerData(); }, methods: { getServerData() { uni.request({ url: 'https://www.ucharts.cn/data.json', data: {}, success: function(res) { console.log(res.data.data) let Column = { categories: [], series: [] }; //這里我后臺返回的是數組，所以用等于，如果您后臺返回的是單條數據，需要push進去 Column.categories = res.data.data.ColumnB.categories; Column.series = res.data.data.ColumnB.series; _self.showColumn("canvasColumn", Column); }, fail: () => { _self.tips = "網絡錯誤，小程序端請檢查合法域名"; }, }); }, showColumn(canvasId, chartData) { canvaColumn = new uCharts({ $this: _self, canvasId: canvasId, type: 'column', padding: [15, 5, 0, 15], legend: { show: true, padding: 5, lineHeight: 11, margin: 0, }, fontSize: 11, background: '#FFFFFF', pixelRatio: _self.pixelRatio, animation: true, categories: chartData.categories, series: chartData.series, xAxis: { disableGrid: true, }, yAxis: { data: [{ position: 'right', axisLine: false, format: (val) => { return val.toFixed(0) + '元' }, }] }, dataLabel: true, width: _self.cWidth * _self.pixelRatio, height: _self.cHeight * _self.pixelRatio, extra: { column: { type: 'group', width: _self.cWidth * _self.pixelRatio * 0.45 / chartData.categories.length } } }); }, touchColumn(e) { canvaColumn.showToolTip(e, { format: function(item, category) { if (typeof item.data === 'object') { return category + ' ' + item.name + ':' + item.data.value } else { return category + ' ' + item.name + ':' + item.data } } }); canvaColumn.touchLegend(e, { animation: true }); } } } </script> <style> /*樣式的width和height一定要與定義的cWidth和cHeight相對應*/ .qiun-charts { width: 750upx; height: 500upx; background-color: #FFFFFF; } .charts { width: 750upx; height: 500upx; background-color: #FFFFFF; } </style> ~~~