## **图表示例** :-: ![](https://box.kancloud.cn/63e5833a7ccd8308b0f8ab59522c36c1_468x349.gif) ## **标准数据格式** ``` "chartData": { "categories": ["2013", "2014", "2015", "2016", "2017", "2018"], "series": [{ "name": "目标值", "data": [35, 36, 31, 33, 13, 34], "color": "#2fc25b" }, { "name": "完成量", "data": [18, {"value": 27,"color": "#f04864"}, 21, 24, 6, 28], "color": "#1890ff" }] } ``` >[danger] ## 注意:series数据中第一位即series\[0\](目标值)中数值需要比series\[1\](完成量)中大。否则进度条会超出边框。 ## **调用方法** ``` new uCharts({ $this: this, canvasId: canvasId, type: 'column', legend: {show:true}, fontSize: 11, background: '#FFFFFF', pixelRatio: 1, animation: true, categories: chartData.categories, series: chartData.series, xAxis: { disableGrid: true, }, yAxis: { //disabled:true }, dataLabel: true, width: this.cWidth, height: this.cHeight, extra: { column: { //meter参数为“温度计式图表” type: 'meter', //width为每个柱子的宽度 width: 20, meter: { //这个是外层边框(即目标值)的宽度 border: 4, //这个是内部填充颜色 fillColor: '#E5FDC3' } } } }); ``` ## **完整代码示例** ``` <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="canvasColumnMeter" id="canvasColumnMeter" 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, serverData:'', } }, 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) //下面这个根据需要保存后台数据,我是为了模拟更新柱状图,所以存下来了 _self.serverData=res.data.data; let ColumnMeter={categories:[],series:[]}; //这里我后台返回的是数组,所以用等于,如果您后台返回的是单条数据,需要push进去 ColumnMeter.categories=res.data.data.ColumnMeter.categories; //这里的series数据,如果为Meter,series[0]定义为外层数据,series[1]定义为内层数据 ColumnMeter.series=res.data.data.ColumnMeter.series; _self.showColumnMeter("canvasColumnMeter",ColumnMeter); }, fail: () => { _self.tips="网络错误,小程序端请检查合法域名"; }, }); }, showColumnMeter(canvasId,chartData){ canvaColumn=new uCharts({ $this:_self, canvasId: canvasId, type: 'column', legend:{show: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: { type:'meter', width: _self.cWidth*_self.pixelRatio*0.45/chartData.categories.length, meter:{ //这个是外层边框的宽度 border:4, //这个是内部填充颜色 fillColor:'#E5FDC3' } } } }); }, 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 } } }); }, } } </script> <style> page{background:#F2F2F2;width: 750upx;overflow-x: hidden;} .qiun-padding{padding:2%; width:96%;} .qiun-wrap{display:flex; flex-wrap:wrap;} .qiun-rows{display:flex; flex-direction:row !important;} .qiun-columns{display:flex; flex-direction:column !important;} .qiun-common-mt{margin-top:10upx;} .qiun-bg-white{background:#FFFFFF;} .qiun-title-bar{width:96%; padding:10upx 2%; flex-wrap:nowrap;} .qiun-title-dot-light{border-left: 10upx solid #0ea391; padding-left: 10upx; font-size: 32upx;color: #000000} .qiun-charts{width: 750upx; height:500upx;background-color: #FFFFFF;} .charts{width: 750upx; height:500upx;background-color: #FFFFFF;} </style> ```