Vue+?Antv?F2怎么實(shí)現(xiàn)層疊柱狀圖

這篇文章主要介紹“Vue+ Antv F2怎么實(shí)現(xiàn)層疊柱狀圖”的相關(guān)知識，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“Vue+ Antv F2怎么實(shí)現(xiàn)層疊柱狀圖”文章能幫助大家解決問題。

一、 創(chuàng)建canvas標(biāo)簽

<canvas id="caseChart" ></canvas>

二、 編寫圖表繪制代碼

methods:{
        //獲取專利案件Chart圖標(biāo)信息
        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;

            //創(chuàng)建 Chart 對象
            _this.casechart = new this.$F2.Chart({            
              id: 'caseChart',
              pixelRatio: window.devicePixelRatio,            //指定分辨率
            });

            //source 載入數(shù)據(jù)
            _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 內(nèi)容框
              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);
            
            //創(chuàng)建圖形語法，繪制圖，由 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();
        });
    },

三、展示效果

關(guān)于“Vue+ Antv F2怎么實(shí)現(xiàn)層疊柱狀圖”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點(diǎn)。