vue弹窗modal显示v-charts注意点

1、设置柱状图宽度
使用chartExtend属性

<ve-histogram :data="stackchartData[pubdatacarditem.type]" :settings="stackchartSettings[pubdatacarditem.type]" :extend="chartExtend[pubdatacarditem.type]" width="500px" height="400px"></ve-histogram>

this.chartExtend[item.type] = {
                        series: {
                            barMaxWidth: 35
                        },
                    }

2、modal弹窗不显示v-charts图
1）网上给的解决方案一般都是在引用组件时定义宽度高度

<ve-histogram :ref="pubdatacarditem.type" :data="stackchartData[pubdatacarditem.type]" :settings="stackchartSettings[pubdatacarditem.type]" :extend="chartExtend[pubdatacarditem.type]" width="500px" height="400px"></ve-histogram>

当时还是未解决
2）在点击弹窗弹出时，请求后端接口，获取数据，对stackchartData和stackchartSettings进行赋值
3）赋值完成后，在modal定义一个key，重新渲染一下
this.modalkey+=1;

<Modal
                v-model="showpublishdata"
                footer-hide
                :scrollable="true"
                width="1200px;"
                @on-visible-change="statechange(showpublishdata)"
                >
                <div slot="header" class="block">
                    <font size="4">【{{this.displayname}}】</font>
                </div>
                <div :key="modalkey" class="grid" style="margin-left: 10px;">
                <Card class="pubdatacard-css" v-for="(pubdatacarditem, pubdatacardindex) in versionPubList" :key="pubdatacardindex">
                    <ve-histogram :data="stackchartData[pubdatacarditem.type]" :settings="stackchartSettings[pubdatacarditem.type]" :extend="chartExtend[pubdatacarditem.type]" width="500px" height="400px"></ve-histogram>
                    <div style="text-align:center;">
                        <span style="font-weight:bold;">{{pubdatacarditem.name}}</span>
                    </div>
                </Card>
                </div>
            </Modal>

image.png

3、扩展属性，x轴文字倾斜，柱状图宽度设置

this.chartExtend[item.type] = {
                        series: {
                            barMaxWidth: 35, //柱状最大宽度
                        },
                        xAxis: {
                            axisLabel: {  
                                interval:0,  // 坐标轴刻度标签的显示间隔
                                rotate:30  // 刻度标签旋转的角度
                            }
                        }


                    }

4、设置堆叠柱状图的颜色
1）组件绑定颜色

<ve-histogram :colors="colors" :data="stackchartData[pubdatacarditem.type]" :settings="stackchartSettings[pubdatacarditem.type]" :extend="chartExtend[pubdatacarditem.type]" :data-empty="dataEmpty[pubdatacarditem.type]" width="500px" height="400px"></ve-histogram>

2)data定义颜色列表

colors: ['#FFD700','#4682B4','#749f83','#bda29a','#6e7074','#2f4554','#ca8622', '#d48265','#c23531', '#61a0a8','#91c7ae',  '#c4ccd3'],

5、暂无数据
引入import 'v-charts/lib/style.css'
无数据时赋值
this.dataEmpty[item.type]=true;