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

本文将介绍怎样设置 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>

上面代码中,在创建 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>
如果在胜利前却步,往往只会拥抱失败;如果在困难时坚持,常常会获得新的成功。
1 不喜欢
说说我的看法 -
全部评论(
没有评论
关于
本网站属于个人的非赢利性网站,转载的文章遵循原作者的版权声明,如果原文没有版权声明,请来信告知:hxstrive@outlook.com
公众号