> 有时候App里要求以图表方式展示数据，比如柱状图、饼状图等，这个时候就需要用到uCharts > 展示效果 >  * [导入u-charts插件](https://www.kancloud.cn/wangking/uniapp/1983111#ucharts_6) * [服务端返回的json](https://www.kancloud.cn/wangking/uniapp/1983111#json_10) * [页面中进行使用](https://www.kancloud.cn/wangking/uniapp/1983111#_14) ## 导入u-charts插件 > 插件地址：[https://ext.dcloud.net.cn/plugin?id=271](https://ext.dcloud.net.cn/plugin?id=271) > 将插件导入到 /components目录下即可，至于引入，在页面前端调用时import引入 ## 服务端返回的json > 接口测试地址：[https://www.ucharts.cn/data.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> ~~~