图表示例

标准数据格式

"ColumnMeter": {
      "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"
      }]
}

注意：series数据中第一位即series[0]（目标值）中数值需要比series[1]（完成量）中大。否则进度条会超出边框。

调用方法

new uCharts({
    $this: _self,
    canvasId: canvasId,
    type: 'column',
    legend: true,
    fontSize: 11,
    background: '#FFFFFF',
    pixelRatio: _self.pixelRatio,
    animation: true,
    categories: chartData.categories,
    series: chartData.series,
    xAxis: {
        disableGrid: true,
    },
    yAxis: {
        //disabled:true
    },
    dataLabel: true,
    width: _self.cWidth * _self.pixelRatio,
    height: _self.cHeight * _self.pixelRatio,
    extra: {
        column: {
            //meter参数为“温度计式图表”
            type: 'meter',
            //width为每个柱子的宽度
            width: _self.cWidth * _self.pixelRatio * 0.45 / chartData.categories.length,
            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.easy-mock.com/mock/5cc586b64fc5576cba3d647b/uni-wx-charts/chartsdata2',
                    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: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>