Vue+ Antv F2實現層疊柱狀圖

<canvas id="caseChart" style="width: 100%;height: 230px;"></canvas>

methods:{
        //獲取專利案件Chart圖示資訊
        getCaseChartData(){
            var _this = this;
            var params = {
                dataType:_this.caseDataType,
                beginDate:'',
                endDate:_this.endDate
            }                
            _this.$http.get('/api/patent/StatisticsPatentChartAmount',{params:params})
            .then(res =>{
                if(res.status == 200){
                    for(var i = 0; i < res.data.length; i++){
                        if(res.data[i].dataType == "monthPatent"){res.data[i].dataType = '新立案'}
                        else if(res.data[i].dataType == "applyPatent"){res.data[i].dataType = '新申請'}
                        else if(res.data[i].dataType == "PCTPatent"){res.data[i].dataType = 'PCT國際'}
                        else if(res.data[i].dataType == "otherPatent"){res.data[i].dataType = '其他案件'}
                        else {}
                        res.data[i].date = res.data[i].date+"-01" + " 00:00:00"
                    }
                    _this.caseData = res.data;
                    _this.$options.methods.caseChart.bind(this)();
                }else{
                    
                }
            })
            .catch(error =>{
            })                    
        },
    
        caseChart(){
            var _this = this;

            //建立 Chart 物件
            _this.casechart = new this.$F2.Chart({            
              id: 'caseChart',
              pixelRatio: window.devicePixelRatio,            //指定解析度
            });

            //source 載入資料
            _this.casechart.source(JSON.parse(JSON.stringify(this.caseData)), {    
              date: {    //x軸
                type: 'timeCat',
                tickCount: 6,
    //            range: [ 0.1, 0.9 ],
                mask:'YY-MM',
              },
//              amount: {    
//              }
            });
            _this.casechart.tooltip({
              custom: true, // 自定義 tooltip 內容框
              onChange: function onChange(obj) {
                const legend = _this.casechart.get('legendController').legends.top[0];
                const tooltipItems = obj.items;
                const legendItems = legend.items;
                const map = {};
                legendItems.forEach(function(item) {
                  map[item.name] = item;
                });
                tooltipItems.forEach(function(item) {
                  const name = item.name;
                  const value = item.value;
                  if (map[name]) {
                    map[name].value = value;
                  }
                });
    //            legend.setItems(_.values(map));
              },
              onHide: function onHide() {
                const legend = _this.casechart.get('legendController').legends.top[0];
                legend.setItems(_this.casechart.getLegendItems().country);
              }
            });    
            
            var barWidth = 16 * (window.innerWidth / 375);
            
            //建立圖形語法，繪製圖，由 date 和 amount 兩個屬性決定圖形位置，date 對映至 x 軸，amount 對映至 y 軸
            _this.casechart.interval()            
              .position('date*amount')
              .color('dataType')
              .adjust('stack')
              .size(barWidth)

            //渲染圖表
            _this.casechart.render();                
        }
    }，
    mounted() {
        var v = this;
        this.$nextTick(() => {
            v.caseChart();
        });
    },