uni-app UChart 怎样动态设置 canvas 的宽度？

下面是我们创建uChart时常用代码：

<script>
    import uCharts from '@/components/u-charts/u-charts.js';
    var _self;
    var canvaLineA=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: {
            createChart: function(canvasId,chartData){
                canvaLineA = new uCharts({
                    $this:_self,
                    canvasId: canvasId,
                    type: 'line',
                    //...
                    width: _self.cWidth*_self.pixelRatio,
                    height: _self.cHeight*_self.pixelRatio,
                    extra: {
                        line:{
                            type: 'straight'
                        }
                    }
                });
            }
        }
    }
</script>

uni-app广告位

上面代码中，在创建 uCharts 是指定了 charts 的宽度和高度，如下：

width: _self.cWidth*_self.pixelRatio,
height: _self.cHeight*_self.pixelRatio,

但是，创建出来的 uchart 可视化图表并没有填充满屏幕宽度。我们可以直接使用绑定语法修改 <canvas> 元素的宽度，如下：

<!-- 报警类型空心圆图 -->
<canvas canvas-id="canvasLineA" id="canvasLineA"
    :style="{width:cWidth +'px',height:cHeight +'px'}"
    class="charts charts_ring" @touchstart="touchRingAlarm"></canvas>